CODEWITHSUNDEEP
cssmobilewidth
Tech4Wilco
Tech4Wilco

Reputation: 6808

Mobile Forms Select is not the same size as Input or textarea

I have a mobile page including a form. I need to align the select and input/textarea and make them the same size but it's not working properly. (see image)

enter image description here

As you can see in the screenshot, the dropdown is not the same size as the input or textarea. Here's my code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en' xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
</head>

<style type="text/css">

  select, input, textarea {
    border: solid 0.1em black;
    font: normal 1.5em Arial;
    margin: 0.3em 0;
    padding: 0.2em;
  }

  .em { width: 11em; }
  .px { width: 150px; }
  .percent { width: 50%; }

</style>

<select name="option1" class="em">
  <option value="" selected="">= choose =</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<input name="input" type="text" value="" class="em" />
<textarea class="em"></textarea>

<hr />

<select name="option1" class="px">
  <option value="" selected="">= choose =</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<input name="input" type="text" value="" class="px" />
<textarea class="px"></textarea>

<hr />

<select name="option1" class="percent">
  <option value="" selected="">= choose =</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<input name="input" type="text" value="" class="percent" />
<textarea class="percent"></textarea>

</body>
</html>

What am I doing wrong or what should I do?

Upvotes: 2

Views: 2718

Answers (1)

Book Of Zeus
Book Of Zeus

Reputation: 49867

Here's what you have to do:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<body>

<style type="text/css">
body {
  margin: 0;
  padding: 0.3em;
}
form {
  padding: 0px;
  margin: 0px;
}
select, input,textarea {
  border: solid 1px #888;
  display: block;
  font: normal 1.4em Arial;
  max-width: 100% !important;
  margin: 0.2em 0 !important;
  padding: 0.1em 0 !important;
  text-indent: 0 !important;
  white-space: nowrap;
  text-overflow:ellipsis;
  width: 98% !important;
  outline: none;
  word-wrap: break-word;
  word-wrap: break-all;
  white-space: nowrap;
  ms-box-sizing:content-box;
  -moz-box-sizing:content-box;
  -webkit-box-sizing:content-box;
  box-sizing:content-box; 
}
</style>

<form>
  <select name="option1" class="em">
    <option value="" selected="">= choose =</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <input name="input" type="text" value="" />
  <input name="input" type="email" value="" />
  <input name="input" type="url" value="" />
  <input name="input" type="tel" value="" />
  <textarea class="em"></textarea>
</form>

</body>
</html>

The select box is not 100% aligned but it's pretty close.

Upvotes: 5

Related Questions