Responsive Web Design, Label and Input Text width intelligence
I work on an ERP web application. As an application designer I know which fields are tiny Y/N and which fields are long addresses, descriptions, urls, and which are in the middle.
As an extension to Responsive Web Design I would like to impose some fixed width intelligence at the atomic level in the data-fieldcontain divs.
Grouping a number of these data-fieldcontain divs in float panels to act as the floating grid supports that portion of RWD. But screen territory use can be optimized by applying some application specific width intelligence within the float panel.
I currently assign classes to the label and input tags choosing narrow, medium, wide classes as fits my application fields. Column alignment is achieved by assigning all labels within the float panel the same width class based on the longest label. This all works find and I can create breakpoints to adjust between phones, readers, tablets and desktops in my mobile.css that loads after jquerymobile.css.
The issue I run into is jQuery Mobile css width assignments being added and changed in new versions. I am having to find and override these with each new version and am finding this burdensome.
Are others applying their own mobile styling after jquerymobile.css?
Has anyone found a good way to avoid width conflicts with new version of jQueryMobile?
Is there another approach to width intelligence at the atomic level within a RWD framework?