CODEWITHSUNDEEP
jquerycssjquery-mobile
Subjective Effect
Subjective Effect

Reputation: 1465

JQuery Mobile 1.4 text inputs widths

I've recently switched to JQuery Mobile 1.4 and although overall I prefer it to 1.3 I'm having a lot of formatting issues.

I want to have a list of changeable values and this is the code I'm using.

<div class="ui-field-contain">
<label for="name">Amount</label>
<input type="number" name="name1" id="name1" value="" style="width:75px"/>
</div>

I added the width:75px to see if it would work but all it does is move the number select arrows - it doesn't actually make the text box smaller.

So the text boxes are as wide as their container but only by a limited amount. It looks fine on the computer but on a mobile you end up with the label text on top of the textbox if you constrain it too much.

Is there any way around this?

Upvotes: 0

Views: 2708

Answers (2)

Shawn Sim
Shawn Sim

Reputation: 555

To make the answer more complete. I had a hard time controlling the size of the textbox beside the label the image below is what I was trying to achieve. Setting all textbox to a particular size is sometimes not relevant. A situation like Address and Zip will make the UI look too long on a desktop but only ok on mobile.

enter image description here

The code below is how I achieve it. It may look easy for someone who is good at CSS by for me a beginner, it is very helpful.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<style>

#id1 .ui-input-text { width: 150px !important }
</style>
<div data-role="page">
  <div data-role="main" class="ui-content">
    <form method="post" action="demoform.asp">
      <div class="ui-field-contain">
        <label for="address">Address:</label>
        <input type="text" name="address" id="address" >
      </div>
      <div class="ui-field-contain" id="id1">
        <label for="zip">Zip Code:</label>
        <input type="text" name="zip" id="zip" >
      </div>
      
      <input type="submit" data-inline="true" value="Submit">
    </form>

    
  </div>
</div>

</body>
</html>

Upvotes: 0

ezanker
ezanker

Reputation: 24738

Try

.ui-input-text{
    width: 75px !important;
}

jQM puts a DIV around the input with the class .ui-input-text, so you need to set its width and the input will then fill it. You may want to make your CSS more specific if you don't want all text inputs set to 75px;

Upvotes: 3

Related Questions