I am creating a form that has a number of inputs of different types. When I put them in a form, I get less than desirable results. Here are the issues I am seeing:
- Dropdown items are not aligning (look at Company Color). How do I align them all to the right?
- Date items do not align vertically to the label.
- Label sizing is rather small (see Pay Deduction %). How do I increase label width or, better yet, make the input right-align?
Here is the screenshot of my demo app:
Here is my HTML:
<div class="list">
<div class="item item-input item-select">
<div class="input-label">
Company Color
</div>
<select>
<option>Blue</option>
<option>Yellow</option>
</select>
</div>
<div class="item item-input item-select">
<div class="input-label">
Week Start
</div>
<select>
<option selected>Sunday</option>
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
</select>
</div>
<div class="item item-input item-select">
<div class="input-label">
Round Times To Nearest
</div>
<select>
<option selected>15 minutes</option>
<option>30 minutes</option>
</select>
</div>
<div class="item item-input item-select">
<div class="input-label">
Pay Period
</div>
<select>
<option selected>Weekly</option>
<option>Monthly</option>
</select>
</div>
<label class="item item-input">
<span class="input-label">Last Payday</span>
<input type="date" placeholder="Nov 16, 2014">
</label>
</div>
<h3>Pay Modifiers</h3>
<div class="list">
<div class="item item-input item-select">
<div class="input-label">
Lunch
</div>
<select>
<option selected>Lunch is Paid Time</option>
<option>30 minutes unpaid</option>
</select>
</div>
<div class="item item-input item-toggle">
<div class="input-label">
Add lunch by default
</div>
<label class="toggle toggle-positive">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</div>
<label class="item item-input">
<span class="input-label">Pay Deduction %</span>
<input type="number" placeholder="34.25">
</label>
</div>