jameskane

asked on 8/7/2016

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

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

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

Bootstrap

Last Comment

Prasadh Baapaat

8/22/2022 - Mon

Prasadh Baapaat

8/7/2016

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

jameskane

8/7/2016

ASKER

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

Prasadh Baapaat

8/8/2016

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

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!

James Murphy

Prasadh Baapaat

8/8/2016

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.

Prasadh Baapaat

8/8/2016

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

jameskane

8/8/2016

ASKER

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

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

Prasadh Baapaat

8/8/2016

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

jameskane

8/8/2016

ASKER

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

Prasadh Baapaat

8/8/2016

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

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst

William Peck

jameskane

8/8/2016

ASKER

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

ASKER CERTIFIED SOLUTION

Prasadh Baapaat

8/8/2016

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

jameskane

8/8/2016

ASKER

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.

page 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

Prasadh Baapaat

8/8/2016

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.

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

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

Prasadh Baapaat

8/8/2016

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

jameskane

8/8/2016

ASKER

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 ?

Prasadh Baapaat

8/8/2016

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

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.

rwheeler23

Prasadh Baapaat

8/8/2016

send me the full code for HTML page + CSS again so I can check if everything is ok ...

jameskane

8/8/2016

ASKER

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 !

Prasadh Baapaat

8/8/2016

You are welcome :)

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

Prasadh Baapaat

8/8/2016

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