CODEWITHSUNDEEP
jquerycssjquery-mobile
Imran Qadir Baksh - Baloch
Imran Qadir Baksh - Baloch

Reputation: 34054

Jquery Mobile 1.3 and Input Size issue?

I am using Jquery mobile 1.3. I have an input,

        <input style="width: 75px" type="text"  />

The problem is that it's size is always large. How to make it small,

http://jsfiddle.net/2bWfL/163/

<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    

        <input type="text" style="width:75px"/>
    </div><!-- /content -->

</div><!-- /page -->

</body>

Upvotes: 1

Views: 8526

Answers (2)

MayurCM
MayurCM

Reputation: 701

If you want different sizes for text inputs on same page then remove the width attribute from CSS like this

div .ui-input-text {  padding: 0 .4em; }

Then on your html page wherever you define your input text define it as below

<div style="width:30px"><input type="text" placeholder="01">

So define width you want in your div tag and you ll be able to give different width to different text input. Hope this answer helps to non designer persons like me

Thanks

Upvotes: 1

anwith.ct
anwith.ct

Reputation: 663

JQuery Mobile has default sizes for all its controls (in terms of percentages), and also JQM replaces the html tags we write with its own generated tags (usually spans), so inorder to change the width of the textbox, add the following code to the head of your page.

<style type="text/css">
.ui-input-text
{
width: 75px !important;
}
</style>

Since the JQM controls adjusts itself to the size of the screen, its advised to use percentages instead of 'px' values or 'em's.

Upvotes: 6

Related Questions