Solved

Bootstrap in-line form - need to change the width of several fields

Posted on 2016-08-07
20
34 Views
Last Modified: 2016-08-08
I am trying to create an input form  using Bootstrap and am using the IN-LINE FORM template. This works well for me, but the width of several fields in the form need to be increased. The documentation notes the following:

"May require custom widths Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required."

So, it seems there is a way to change the width of some form fields, but I cannot figure out how to do this.  Below is the form as it now stands along with its code.  Hopefully someone can help.

Thanks


Form image with note on changes needed  
<!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">
  </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" 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" 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>

Open in new window

0
Comment
Question by:jameskane
  • 13
  • 7
20 Comments
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41746306
Hi James,
In the code you pasted, the form inputs have a class "form-control"
so what you can do is create a NEW class to override bootstrap as below

.increase-width {
	width: 300px !important;
}

Open in new window


Then add the newly created class to the input as shown in below code line:

<input type="text" class="form-control increase-width" placeholder="adresse" >

Open in new window


<textarea class="form-control increase-width" type="text" id="notes" rows="5"></textarea>

Open in new window


adding the new class will override bootstrap and increase the width of the input (you can use same class for multiple inputs)

Above is just an example to increase width to 300px... you can adjust as per your requirements.

let me know if this works.

thanks,
Prasadh
0
 

Author Comment

by:jameskane
ID: 41746430
Many thanks for the reply Prasadh !

I implemented what you said, but must have misunderstood I'm afraid. I created the css file as shown below

@charset "utf-8";
/* CSS Document */
.increase-width {
	width: 300px ;
}

Open in new window


I then embedded it into the code as shown below - lines 11, 46 and 95.

Unfortunately there is no change to the form fields in question.

James
<!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="xampp2/htdocs/office_python/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>

Open in new window

0
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41747023
well did you link the new css file to your page?

usually when you use bootstrap as framework, you have a CSS file as CUSTOM.CSS attached to the page, here you can put all your custom css rules and overrides...

do you have any such file... if yes, then put the new css code in that file... if not... just put the code in the page HEAD PART itself by using below code... this code should be put before the </head> tag AND AFTER the link where you call your bootstrap CSS files... it has to load last to override.

<style type="text/css">
.increase-width {
	width: 300px ;
}
</style>

Open in new window

0
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41747026
update... sorry i noticed that you have already included the CSS file in your head...

so now just use the code in document itself as given above.
0
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41747030
and you have excluded the !important after 300px.....  that's why it is not overriding the bootstratp

again giving the code you have to use.

.increase-width {
	width: 300px !important;
}

Open in new window


try using this code in your  "increase-width.css" file...
I am sure it will work
0
 

Author Comment

by:jameskane
ID: 41747198
Sorry, I'm still missing something - no change to widths of form fields.

This is the increase-width css coding - with the correction

@charset "utf-8";
/* CSS Document */
<style type="text/css">
.increase-width {
	width: 300px !important;
}
</style>

Open in new window



This is the html page for the form. Line 11 shows the link to the css file
Lines 46 and 95 are the lines where the css is used.


<!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="C:/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>

Open in new window

0
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41747351
Ok 2 things I noticed...

1) The link to css is from a local file... it will work on your local machine, but not when you upload the file. (change it when you upload the files to path relevant to your root)

href="C:/css/increase-width.css"

Open in new window


2) The CSS code you have put is for when you want to include a style INSIDE A DOCUMENT... and not for an attached css file.

so you have to remove the below 2 tags from css file and save it.
remove a) <style type="text/css">
and
remove b) </style>

the css should JUST HAVE THE STYLE code...

.increase-width {
	width: 300px !important;
}

Open in new window

correct these 2 things and it will work fine.

thanks,
Prasadh
0
 

Author Comment

by:jameskane
ID: 41747424
Hi Prasadh. First many thanks with your patience on this.  I have made the changes as described below, but unfortunately it is still not working. No increase in width in either of the 2 form fields.


This is the css file now

.increase-width {
	width: 300px !important;
}

Open in new window



This is the page now. Changed the pointer to the CSS file  Line  11
No change to other lines which use the css. Lines 46 and 95

<!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="C:\ColdFusion9\wwwroot\Office_15\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>
  
  
  <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>

Open in new window

0
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41747447
I created the same files on my desktop in a folder... and everything is working fine...

basically you have to check if the CSS link is ACTUALLY LOADING THE CSS OR NOT...

href="C:\ColdFusion9\wwwroot\Office_15\css\increase-width.css"

Open in new window


if it is NOT loading the css then our new style is not going to overwrite bootstrap..

so go back to the link and check if there is a mistake..

you must be using a local server like XAMPP. WAMP or MAMP...

your site will be in a folder inside the wwwroot....

if thats the case then your css link should be like below

href="css/increase-width.css"

Open in new window


check again and let me know ..

thanks,
Prasadh
0
 

Author Comment

by:jameskane
ID: 41747540
Unfortunately still no luck I'm afraid.

I did change the address of increase-width.css and lined it up with the address of the page which contains the form. So I am inclined to rule that out as a cause of the problem.

However on looking at the bootstrap pointer between the headers (below) I realize that my bootstrap functionality is coming from a a url pointer to the bootstrap website. I have not installed it locally. SO my increase-width.css is not in the same css folder at that used for the main bootstrap functionality. Could this be the problem ?


Header extract from html page

<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">
  </head>

Open in new window


Address of page which contains form.
http://localhost:8500/Office_15/BOOTSTRAP_TEMPLATE_formInLine.html

Open in new window

0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 9

Accepted Solution

by:
Prasadh Baapaat earned 500 total points
ID: 41747606
ok.. so as per your link address... in your computer (localhost) there is a folder "Office_15" and inside that folder is your website.. correct?

so there should be a folder inside "Office_15" by the name "css" and the file "increase-width.css" should be physically present there...

it does not matter where the bootstrap css is being loaded from... whether via CDN or from local folder...

you should change the link in your page header to what I am giving below:

<link rel="stylesheet" type="text/css" href="css/increase-width.css">

Open in new window


let me know what happens.
0
 

Author Comment

by:jameskane
ID: 41747719
Getting there !!!   You will see from the two images below that the two target fields have been enlarged. I also attach an image of the page before application of the increase-width.

Enlarged size for the two fieldspage before making change with increase-width
However,  I have found that it does not matter what value I use for PX in the increase-width definition. Using 3 or using 900 gets you the same size of target form elements. Don't understand this ???
I would like the size for the two targets to be 50% greater.

increase-width  definition
.increase-width {
	width: 10px !important;
}

Open in new window


revised code between headers (note I have placed the css file at the same level as office_15,  which is directly below wwroot.

<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>

Open in new window

0
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41747749
Hi,
as I said, I have made a file on my machine to test out before I answer you... so sending you a screenshot with different widths set in CSS... it changes as per value given.

here is a picture of form with 10px, 300px & 500px width.

10px, 300px
What I want to say is that I have showed you a way where you are able to target a specific element and change its properties/appearance via CSS.

now since you are using bootstrap... responsive design naturally kicks in..

so when you achieve satisfactory result on desktop for input width, you will also need to test it on various devices and set media queries to address the various devices and input widths to be shown.

let me know your views or any further questions.

Prasadh
0
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41747763
I checked out using percentages... and after trying out various %

I think this should work for you and give desired width.

.increase-width {
	width: 150% !important;
}

Open in new window


again... keep in mind the responsive design & set media queries accordingly.. or this css will give unwanted results on some devices.

thanks,
Prasadh
0
 

Author Comment

by:jameskane
ID: 41747783
I would like to understand why you were able to get the different window sizes while I can only get one size ?  Is it because I have used the in-line 'template' and this is just constraining what adjustments can be made using an intervention such as 'increase-width'.   In my case I cannot achieve your 500 px width, which is where I want to get to

Did you use in-line approach in your design ?
0
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41747799
I have a folder for answering questions & i make new folder in it whenever I start answering a new question... this way I keep a track + copy of what I answer...

I did not use any particular approach.... I just copied the page code and made a page called "form.html" on my machine... and made a folder"css" with the css file and here I am answering your questions...

so basically I have not changed ANYTHING from your original question.... except add the css code and apply it to 2 inputs you wanted to be changed .

so everything I am saying should work perfectly fine...  pls check if anything is missing
0
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41747808
send me the full code for HTML page + CSS again so I can check if everything is ok ...
0
 

Author Closing Comment

by:jameskane
ID: 41747966
Many thanks Prasadh for all the time and patience you have given to my  problem. I now have a form which I can use and would never have got here without you !  The associated techniques I acquired will stand by me.

Got some follow up questions which I would like to ask, but I'll leave that for another question.

Thanks again for the solution and the knowledge !
0
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41747973
You are welcome :)
0
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41747975
one tip... you should use a CUSTOM.CSS file for all such changes.... so that all overrides, any media queries etc. go in that single file
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article will show you how to create an ISO CD-ROM/DVD-ROM image (*.iso), and MD5 checksum signature, for use with VMware vSphere Hypervisor 6.5 (ESXi 6.5). It's a good idea to compare checksums, because many installations fail because of a corr…
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now