I have a bootstrap v3 inline form:

<div id="searchsection" hidden>
  <form id="searchform" class="form-inline" role="form">
    <label>Find:</label> 
    <select id="field" class="form-control">
      <optgroup label="Strings">
        <option value="authors" selected="selected">Authors</option>
        <option value="title">Title</option>
        <option value="pub">Publication Name</option>
        <option value="keywords">Keywords</option>
        <option value="physloc">Physical Location</option>
        <option value="ment">Comment</option>
      </optgroup>
      <optgroup label="Dates">
        <option value="datepub">Publication Date</option>
        <option value="dateread">Date Read</option>
      </optgroup>
    </select>  

    <input type="text" id="narrowon1" class="form-control"/>
    <label for="narrowon2" class="form-control"></label> 
    <input type="text" id="narrowon2" class="form-control" placeholder="YYYYMM" hidden/>
    <input type="button" id="narrower" name="narrower" value="Narrow" class="form-control btn btn-primary"/>
    <input type="button" id="widener" name="widener" value="Widen" class="form-control btn btn-primary"/>
  </form>
</div> <!-- end of searchsection -->

I would like to reduce the width of the boxes narrowon1 and narrowon2 when the optgroup is Dates so that they would only hold six digits each; I am thinking of setting size="6". However, when I simply add those attributes in jQuery via a statement such as

$('#narrowon1').attr('size',"6");

they don't affect the rendered output. I expect the Bootstrap classes are overriding my additions.

What is a "Bootstrap-friendly" way to alter the sizes of these input boxes?

I have a bootstrap v3 inline form:

<div id="searchsection" hidden>
  <form id="searchform" class="form-inline" role="form">
    <label>Find:</label> 
    <select id="field" class="form-control">
      <optgroup label="Strings">
        <option value="authors" selected="selected">Authors</option>
        <option value="title">Title</option>
        <option value="pub">Publication Name</option>
        <option value="keywords">Keywords</option>
        <option value="physloc">Physical Location</option>
        <option value="ment">Comment</option>
      </optgroup>
      <optgroup label="Dates">
        <option value="datepub">Publication Date</option>
        <option value="dateread">Date Read</option>
      </optgroup>
    </select>  

    <input type="text" id="narrowon1" class="form-control"/>
    <label for="narrowon2" class="form-control"></label> 
    <input type="text" id="narrowon2" class="form-control" placeholder="YYYYMM" hidden/>
    <input type="button" id="narrower" name="narrower" value="Narrow" class="form-control btn btn-primary"/>
    <input type="button" id="widener" name="widener" value="Widen" class="form-control btn btn-primary"/>
  </form>
</div> <!-- end of searchsection -->

I would like to reduce the width of the boxes narrowon1 and narrowon2 when the optgroup is Dates so that they would only hold six digits each; I am thinking of setting size="6". However, when I simply add those attributes in jQuery via a statement such as

$('#narrowon1').attr('size',"6");

they don't affect the rendered output. I expect the Bootstrap classes are overriding my additions.

What is a "Bootstrap-friendly" way to alter the sizes of these input boxes?

• javascript
• html
• twitter-bootstrap

• I can't really do much without seeing your CSS – Phil Commented Jan 16, 2014 at 20:12
• My only CSS is the inclusion of bootstrap and jQuery-UI with ` <link rel="stylesheet" href="./bootstrap.css" /> <link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.10.3.custom.min.css" />`. I imagine I can do almost all the styling I want to do by adding some Bootstrap classes, and figuring out which ones I need is part of my problem I think. – user1416227 Commented Jan 16, 2014 at 20:35

3 Answers 3

The maxlength attribute will not be affected by any CSS applied to the <input>. How are you applying it in javascript as you can't limit the character length with CSS?

I think you might be mistaking the maxlength attribute with the actual width of the <input>. Here is a some info on the attribute: Maxlength Attribute

View the log and make sure your <input> looks like this:

<input maxlength="6" name="someInput" />

Edit:

Place a class of your own on the input and place new styles on the <input>. Make sure your local CSS file loads after the bootstrap CSS. Than you can easily override it.

If you can't create a new CSS file, try $('input').css('width', '200px'); with jQuery

You'll need to wrap each input field inside a div with the class of col-sm-2 you can change the number with which ever you like.

You can customise Bootstrap styles by overriding them with your own CSS.

See the Customizing section on the Bootstrap website for information on how it's done:

http://getbootstrap./getting-started/#customizing