How change visual width of <CFINPUT> text field

The area code only takes a max of 5 characters. But its physical width looks like it could take like 20 as it spreads out on the page. The same with all my other telephone input fields.  I tried using width="30"  But it makes no difference. How do I control this?

<div class="col-md-3 col-sm-4 col-xs-4" >
<div class="input-icon right">
<i class="fa tooltips" data-original-title=""></i>
<cfif trim( eq "United States" or trim( eq "Canada"
      <cfset variables.Maxlength = 3>
	<cfset variables.Maxlength = 5>
<cfinput type="Text" class="form-control number" id="Phone1AreaCode" name="Phone1AreaCode" value="#getMember.Phone1AreaCode#" Maxlength="#variables.Maxlength#" Size="5" Validate = "Integer" Message="Phone area code may only contain numbers">

Open in new window

Ian WhiteOwner and FounderAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Pravin AsarPrincipal Systems EngineerCommented:
You may use style attribute

<cfinput type="text" style="width:60px; font-size: 12px;" ...
Pravin AsarPrincipal Systems EngineerCommented:
You may try this one

<cfform name="f1">
      <br/>ZipCode: <cfinput name="zipcode"  type="text" size="5" maxlength="5" value="12345" style="font-size: 1em; width: 4em;"/>
      Phone: (<cfinput name="areacode" type="text" size="3" maxlength="3" value="321" style="font-size: 1em; width: 2.0em;"/>)
      -<cfinput name="phone1" type="text" size="3" maxlength="3" value="999" style="font-size: 1em; width: 2.0em;"/>
      -<cfinput name="phone2" type="text" size="4" maxlength="3" value="9999" style="font-size: 1em; width: 2.75em;"/>
<cfselect name="sel1" query="qryData" value="optionvalue" display="optiondisplay"/>
(no points...)

But its physical width looks like it could take like 20

I don't see that result in CF10|CF11 w/FF or IE.  It looks like about 8 or 9.  Perhaps the CSS in your app is overriding the settings? Use your browser's tools to inspect the element CSS to see if its inheriting a different width from somewhere else.
OWASP Proactive Controls

Learn the most important control and control categories that every architect and developer should include in their projects.

Ian WhiteOwner and FounderAuthor Commented:
Thanks for the contribution. I am using CF11 . Maybe bootstrap is overriding.

I had a look through inspect - but I am not very good at it.  It would be interesting to see what is overriding it.  Please see the page below then scroll down to area code and do inspect.

Test page with Area Code
(no points..)

Looks like it is inheriting the width from the parent. Since the div takes up about a 3rd of the available width, that's why the text box is wider than expected.  As mentioned above, you can override the style to change it. Just don't use inline css ;-)  

inspect element

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ian WhiteOwner and FounderAuthor Commented:
Thanks out of interest which browser did you use to inspect and where di you go to  find the override. I know you can right click to inspect on all browsers.

I put this at the end of the page

          .phoneArea .number {width:60px;

Open in new window

So all the input widths are ok now. But the now the  spacing is now all out of wack. Any ideas?
Pravin AsarPrincipal Systems EngineerCommented:
Bootstrap is setting div widths; that is why

<div class="col-md-3 col-sm-4 col-xs-4">Area Code</div>

Change the width to 1 or 2

<div class="col-md-1 col-sm-2 col-xs-2">Area Code</div>
Ian WhiteOwner and FounderAuthor Commented:
Dont worry - I will try and sort out the spacing. Looks like the developer kept putting in <div class="col-md-3 col-sm-4 col-xs-4 row" > and that makes it spread out too muchj
Thanks out of interest which browser did you use to inspect and where di you go to  find the override. I know you can right click to inspect on all browsers.

I used FF.  The "Computed" tab gives you net effect after applying inheritance.  Sometimes it takes some investigation, but in this specific case finding the offending property was simple ie Since the symptom was "the element is too wide", you know to inspect the "width" element. Expanding it (and checking the bootstrap css) showed 100% width, which means it will inherit from the parent element. Looking at the parent div showed it used a relative size too, meaning the textbox would always expand to be as wide as the div.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.