CODEWITHSUNDEEP
jqueryhtmljquery-mobile
Learner
Learner

Reputation: 810

Customize width for TextBox Jquery-1.10.min,js

I am using jquery-1.10.min.js and jquery-mobile-1.4.0.min.js and trying to customize the width for a textbox . i can notice slight changes if applied though styling (css) or by HTML markups but still jquery css is overruling it and size of the text box is not changing, it remains the same ,100%. What could be the fix for it . Following is the code snippet.

  <script>
 .mystyle1
        {  .ui-input-text
        { width: 85px; display: inline-block; }}
        }        
        #box
        {
            width:20px;
        }
 </script> 
 <input id="box" type="text" class="mystyle" value="0" data-mini="true" />

Upvotes: 0

Views: 194

Answers (1)

Gajotres
Gajotres

Reputation: 57309

First, you can't call yourself a web developer (developer all around) unless you learn to debug your own code. In this case you need to learn to use browser developer tools so you can see real HTML structure.

This is how INPUT type text starts:

<input id="box" type="text" class="mystyle" value="0" data-mini="true" />

And this is how it looks after jQuery Mobile redesign it:

<div class="ui-input-text ui-body-inherit ui-corner-all ui-mini ui-shadow-inset">
    <input type="text" data-mini="true" value="0" class="mystyle" id="box"/>
</div>

As you can see you need to modify INPUT element parent object if you want to change INPUT width or placement.

Solution

Working example: http://jsfiddle.net/Gajotres/vds2U/81/

HTML:

<span class="box-holder">
    <input id="box" type="text" class="mystyle" value="0" data-mini="true" />                    
</span>

CSS:

.box-holder .ui-input-text {
    width: 50px;
}

I have wrapped INPUT element with parent SPAN element, with it we can change inner structure using CSS. Other solution is using jQuery and accessing INPUT parent.

Upvotes: 1

Related Questions