jameskane
asked on
Bootstrap in-line form - how to customize the default size bootstrap
Follow-on question to last one.
I am able to customize bootstrap in-line default solution to extend the length of a form field. However I am unable to vary the size of such fields. I can either have the default length or an increased length which is about 50% longer. I need to increase the length by 3 times the default length. Perhaps I need to use another approach, or there is something obviously stupid in my code.
I am attaching the Form page code and the customization CSS which I am using. Appreciate someone looking through it - to find the error I am making or to confirm the approach I am taking is wrong and pointing my in a better direction
Thanks for your help
increase-width css used to customize
Page which presents Form and uses above customization css (increase-width.css)
Note : Line 12 shows integration of customizaton css into page
Lines 47 and 96 show utilization of increase-width css into form fields.
I am able to customize bootstrap in-line default solution to extend the length of a form field. However I am unable to vary the size of such fields. I can either have the default length or an increased length which is about 50% longer. I need to increase the length by 3 times the default length. Perhaps I need to use another approach, or there is something obviously stupid in my code.
I am attaching the Form page code and the customization CSS which I am using. Appreciate someone looking through it - to find the error I am making or to confirm the approach I am taking is wrong and pointing my in a better direction
Thanks for your help
increase-width css used to customize
.increase-width {
width: 150% !important;
}
Page which presents Form and uses above customization css (increase-width.css)
Note : Line 12 shows integration of customizaton css into page
Lines 47 and 96 show utilization of increase-width css into form fields.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<!--<link rel="stylesheet" type="text/css" href="localhost:8500/Office_15/css/increase-width.css">-->
<link rel="stylesheet" type="text/css" href="css/increase-width.css">
</head>
<body>
<div class="container">
<br><br>
<form class="form-inline">
<br><br>
<div class="form-group" for="civilities">
<select class="c-select">
<option selected>Mme</option>
<option value="Mlle">Mlle</option>
<option value="M">M</option>
</select>
</div>
<div class="form-group">
<label class="sr-only" for="Nom" >Nom</label>
<input type="text" class="form-control" id="Nom" placeholder="Nom" >
</div>
<div class="form-group" >
<label class="sr-only" for="Prenom" > Prenom</label>
<input type="text" class="form-control" id="Prenom" placeholder="Prenom">
</div>
<br><br>
<!--BELOW IS A REPEAT OF ABOVE WITH THE LABELS SUPRESSED AND REPLACED BY PLACEHOLDER-->
<div class="form-group">
<label class="sr-only" for="Adresse" >adresse</label>
<input type="text" class="form-control increase-width" placeholder="adresse" >
</div>
<br><br>
<div class="form-group">
<label class="sr-only" for="ZIP" >zip</label>
<input type="text" class="form-control" id="ZIP" placeholder="ZIP" >
</div>
<div class="form-group" >
<label class="sr-only" for="Ville" > Ville</label>
<input type="text" class="form-control" id="Ville" placeholder="Ville">
</div>
<br><br>
<div class="form-group">
<label class="sr-only" for="mobile" >mobile</label>
<input type="text" class="form-control" id="mobile" placeholder="Mobile" >
</div>
<div class="form-group" >
<label class="sr-only" for="tel" > tel</label>
<input type="text" class="form-control" id="tel" placeholder="Tel : Maison">
</div>
<div class="form-group" >
<label class="sr-only" for="email" > Email</label>
<input type="text" class="form-control" id="email" placeholder="Email">
</div>
<br><br>
<div class="form-group">
<label class="sr-only" for="Naissance" >Naissance</label>
<input type="text" class="form-control" id="Naissance" placeholder="Naissance l'annee" >
</div>
<div class="form-group" >
<label class="sr-only" for="nomresponsible" > nomresponsible</label>
<input type="text" class="form-control" id="nomresponsible" placeholder="Nom Responsible">
</div>
<div class="form-group" >
<label class="sr-only" for="exampleInputName3" > prenomresponsible</label>
<input type="text" class="form-control" id="prenomresponsible" placeholder="Prenom Responsible">
</div>
<br><br>
<label for="notes">Membre Notes</label><br>
<div class="form-group" >
<textarea class="form-control increase-width" type="text" id="notes" rows="5"></textarea>
</div>
<br><br>
<div class="form-group" >
<button type="submit" class="btn-primary">Valider la mise a jour</button>
</div>
<!--<button type="submit" class="btn btn-primary">Send invitation</button>-->
</form>
</div>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
ASKER
i'll try that Prasadh. No, it would be great if you would take the time to continue - I see this as a natural follow on from my last question - which you answered for me.
Thanks
james
Thanks
james
ok let me know if you get the width correct using 300%
thanks,
Prasadh
thanks,
Prasadh
ASKER
Afraid not Prasadh - no change in the width.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
if link is opening correctly, it will show your form... currently I have the width set to 100%
change it to 300% and see if it changes the width in result
change it to 300% and see if it changes the width in result
ASKER
thanks again for the solution and the education !
you are welcome :)
try using 300% instead of 150%
read some book or tutorial on CSS... it will help you.
if you want someone else to look at it let me know, so I will discontinue answering.
thanks,
Prasadh