Solved

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

Posted on 2016-08-07
20
1 solution
76 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Join The Community
  • 13
  • 7
20 Comments
 
LVL 10

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 10

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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Go "Always On" Today
 
LVL 10

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 10

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 10

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 10

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

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 10

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 10

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 10

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 10

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 10

Expert Comment

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

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Take Survey Now!
Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Create N column layout for Bootstrap
Article by: Julian
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.
Add Theme to ASP.NET MVC
Article by: Shaun
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
How to scan a network for running services?
Video by: AdRem
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…
Network monitoring: why having a policy is the best policy?
Video by: AdRem
Monitoring a network: why having a policy is the best policy? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the enormous benefits of having a policy-based approach when monitoring medium and large networks. Software utilized in this v…
Advertise Here

630 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

Advertise Here