css - Jquery Mobile 1.3 and Input Size issue? -


i using jquery mobile 1.3. have input,

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

the problem it's size large. how make 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> 

jquery mobile has default sizes controls (in terms of percentages), , jqm replaces html tags write own generated tags (usually spans), inorder change width of textbox, add following code head of page.

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

since jqm controls adjusts size of screen, advised use percentages instead of 'px' values or 'em's.


Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

How to get the ip address of VM and use it to configure SSH connection dynamically in Ansible -

javascript - Get parameter of GET request -