Home/ Questions/Q 6630373
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T22:23:40+00:00

I have a mobile page including a form. I need to align the select

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0