I've done a lot of research online, and it seems like a common issue. In the past, I have tackled this problem using a <table>, but I am now looking to resolve it using CSS instead of relying on JQM's data-grid.
The simple problem I am facing involves having n fieldsets, each with a <label> and an <input>, and I want to align all the labels and inputs together in a neat format. For example:
First: [ input ]
Second: [ input ]
Third: [ input ]
...
Loooong-one: [ input ]
Here is an illustration of the issue: Fiddle
HTML Code
<div data-role="content">
<div data-role="fieldcontain">
<label for="first">First:</label>
<input type="text" name="first" value="something" />
</div>
<div data-role="fieldcontain">
<label for="second">Second:</label>
<input type="text" name="second" value="something" />
</div>
</div>
CSS Code
div[data-role='fieldcontain'] label{
background: blue;
width: 200px !important; /* this is not working :( */
}
My goal is to apply a consistent fixed width of 200px to all the <label> elements. The blue background was only added for testing purposes to verify the correctness of the CSS selector being used.