i am using jquery mobile to build my ui
but the problem is i am not able to adjust the width of my label
can u tell me how to make the width of all my label to 108px
http://jsfiddle.net/GZaqz/
code below
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<label data-role="none" for="basic">Zip</label>
<input style="width: 280px;" data-role="none" type="text"
name="name" id="basic" value="">
</div>
I am trying to achieve some thing similar to this for all labels with constant width
There's some problem in your markup - the for property of the labels is not the same as the name of the input. This prevents jQuery Mobile from properly styling your content. For example, this:
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<label data-role="none" for="basic">Phone</label>
<input style="width: 280px;" data-role="none" type="text" name="name" id="basic" value="" />
</div>
Should be changed to this (note the for and name properties now match):
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<label data-role="none" for="basic">Phone</label>
<input style="width: 280px;" data-role="none" type="text" name="basic" id="basic" value="" />
</div>
Once this is done, jQuery Mobile should make your form work pretty much the way you want.
Related
Problem loading INPUT fields in HTML form in IE.
I upload aspx form,
The form is fully loaded, including the content I submitted to the fields.
At this point everything is fine in chrome,
But in IE and Edge the fields that contain content are unmarkable. It is only after about two minutes that the fields are allowed to select and mark the text.
My client copies information from this form, so the fields should be open for text markup and copying.
Does anyone have an idea why they don't open immediately and how to solve it?
when i debuging the code, everything seems to load properly.
In the Network tab of IE Developer Tools, Everything seems to end up charging pretty quickly.
What else should I check?
The problem was solved when I replaced one field of type "text" to type "textarea".
It seems to have enabled the page to load properly in IE.
Does anyone know how to explain this phenomenon?
Previous Code:
<div>
<div>
<label>first name</label>
<input type="text" value="" tabindex="1" maxlength="50" data-fv-notempty="true" disabled />
</div>
<div>
<label >last name</label>
<input type="text" value="" tabindex="2" maxlength="50" data-fv-notempty="true" disabled />
</div>
</div>
<div>
<div>
<label>Address</label>
<input type="text" value="" tabindex="3" maxlength="50" data-fv-notempty="true" disabled />
</div>
<div>
<label>Locality</label>
<input type="text" value="" tabindex="4" maxlength="50" data-fv-notempty="true" disabled />
</div>
</div>
New Code:
<div>
<div>
<label>first name</label>
<div style="overflow: hidden; background-color:#eee; padding:0;" ><textarea style="width: 120%;border:none;box-shadow:none;" rows="1" tabindex="1" maxlength="50" data-fv-notempty="true" disabled></textarea></div>
</div>
<div>
<label >last name</label>
<input type="text" value="" tabindex="2" maxlength="50" data-fv-notempty="true" disabled />
</div>
</div>
<div>
<div>
<label>Address</label>
<input type="text" value="" tabindex="3" maxlength="50" data-fv-notempty="true" disabled />
</div>
<div>
<label>Locality</label>
<input type="text" value="" tabindex="4" maxlength="50" data-fv-notempty="true" disabled />
</div>
</div>
I'm trying to do some simple HTML and CSS to get a page to layout something like the image below, but I'm way out of my element and not even sure how to get it started. Right now, my biggest problem is I can't get the Client Birth Date, and Spouse First Name to appear on its own line. I feel like I could add divs, but then I'd probably have divs everywhere (I'm assuming that's a bad thing.)
Here's a JSFiddle of what I have started.
<div>
<label for="WebName">Name</label>
<input type="text" id="WebName" />
</div>
<div>
<label for="WebEmail">Email</label>
<input type="text" id="WebEmail" />
</div>
<div>
<label for="WebPhone">Phone</label>
<input type="text" id="WebPhone" />
</div>
<hr />
<div style="border: 1px solid black; overflow: hidden;">
<!-- left -->
<div style="width: 500px; float:left; border: 1px solid red;">
<label for="ClientFirstName">Client First Name*</label>
<input type="text" id="ClientFirstName" />
<label for="ClientBirthDate">Client Birth Date</label>
<input type="text" id="ClientBirthDate" />
</div>
<!-- right -->
<div style="float:left; width: 500px; border: 1px solid green;">
<label for="ClientLastName">Client Last Name*</label>
<input type="text" id="ClientLastName" />
<label for="ClientAge">Client Age</label>
<input type="text" id="ClientAge" />
</div>
</div>
<hr />
<div>
<label for="AppointmentDate">Appointment Date</label>
<input type="text" id="AppointmentDate" />
<label for="Goals">Goals</label>
<textarea id="Goals" rows="4" cols="80">
</textarea>
</div>
I would add divs in those specific cases. Form elements can be messy when it comes to layout. I've found that wrapping a label + input inside a div is the best practice here. And since you've already done that in the first section you might as well follow the pattern.
<div class="inputWraper">
<label for="thisInputName">Some Text</label>
<input type="text" name="thisInputName" value="" placeholder="What displays />
</div>
You could technically also wrap everything in the label instead of a div. This has some pros and cons mostly in that it makes everything clickable and adds focus. It's especially good for checkboxes and radio buttons as the hit area is bigger.
<label for="thisInputName">
<span>Your label text</span>
<input type="text" name="thisInputName" value="" placeholder="What displays />
</label>
I have a checkbox button and a Paragraph side-by-side.
It's inline-block and everything is nice... Look:
When I turn my view into responsive, it just drops down a line. Like this:
How do I overcome this issue elegently in CSS without starting build divs around elements and bootstrap the whole deal here? Thanks!
re code; those are 2 columns and both button and paragraph reside in he left column.
EDITED FOR CODE ADDITION:
<div class="row no-pad">
<div class="col-xs-6 left-hand-input">
<!--FORM BEGIN-->
<form class="form-control-static" action="leadGen.php" method="post">
<p>PERSONAL DETAILS</p>
<hr>
<label for="firstName">FIRST NAME:</label><br>
<input name="firstName" id="firstName" type="text"><br>
<label for="email">EMAIL:</label><br>
<input name="email" id="email" type="email">
<p>SHIPMENT ADDRESS</p>
<hr>
<label for="address">ADDRESS:</label><br>
<input name="address" id="address" type="text"><br>
<label for="country">COUNTRY:</label><br>
<input name="country" id="country" type="text"><br>
<label for="zip">ZIP CODE:</label><br>
<input name="zip" id="zip" type="text"><br>
<input type="submit" id="submit" value="SEND">
<p style="display: inline-block; vertical-align: -10px;"> *Required fields</p><br>
<input checked type="checkbox" id="mailingList"/>
<p style="display: inline-block; font-size: 75%;">
Receive exclusive membership deals and offers.</p>
</form>
</div>
</div>
You need to use labels
<label><input type="checkbox" value=" id="mailingList">Receive exclusive membership deals and offers.</label>
Here is the jsfiddle demo: https://jsfiddle.net/o4qgu4gv/2/
You should also consider using col-sm-6 instead of col-xs-6 because it may look nice on an iPhone 4 screen
if it is for the checkbox or any input type tag in particular then a more suitable choice would be to use a label tag instead of a paragraph.
You could use label with its for attribute and it should work fine.
<div id="wrapper">
<input type="checkbox" id="btn"> check
<label for="btn">
this should not shift
</label>
</div>
I have two examples of a label and a text field that I'm trying to align (You can see it in this fiddle). In the first example I have a label and a text field like this:
<label for="firstname" style="width:100px;display:inline-block;background-color:red;">Firstname: </label>
<input type="text" style="margin:0;padding:0;" id="firstname" name="firstname" value="" />
In the second example, I have a label and a three floated text fields in a div like this:
<div>
<div style="width:100px;float:left;background-color:red;">Date: </div>
<div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="day" name="day" maxlength="2" size="2" value="" /> / <br />
<label for="day">Day</label>
</div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="month" name="month" maxlength="2" size="2" value="" /> / <br />
<label for="month">Month</label>
</div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="year" name="year" maxlength="4" size="4" value="" /><br />
<label for="year">Year</label>
</div>
</div>
</div>
As you can see above, I give each label a width of 100px, but for some reason, in the second example, there is no space between my label and the first text field. Does anybody know why this is happening and why my width of 100px does not seem to have any effect in my second example (view fiddle link above).
Thank you
You can use inline-block instead of float to make it appear as of the previous section to get the margin effect else you need to add a margin with floated element.
<div style="width:100px;display:inline-block;vertical-align:top;background-color:red;">Date: </div>
<div style="display:inline-block;">
<div style="display:inline-block;">
<input type="text" style="margin:0;padding:0;" id="day" name="day" maxlength="2" size="2" value="" /> / <br />
<label for="day">Day</label>
</div>
<div style="display:inline-block;">
<input type="text" style="margin:0;padding:0;" id="month" name="month" maxlength="2" size="2" value="" /> / <br />
<label for="month">Month</label>
</div>
<div style="display:inline-block;">
<input type="text" style="margin:0;padding:0;" id="year" name="year" maxlength="4" size="4" value="" /><br />
<label for="year">Year</label>
</div>
</div>
Demo
or add a margin.
<div style="width:100px;float:left;margin-right:4px;background-color:red;">Date: </div>
Demo
On a side note, consider using css rules instead of inline styles
The space is because the first element is a replaced inline element, which kinda has the same behaviour as inline-block and adds margin.
And for the width, remove size="2" and maxlength="2" to make it the same with as the upper input fields
Well first of all your first example with the "Firstname" label is using a "label" tag which is treated differently then a "div". That brings me to the second example of "Date" which is surrounded by "div" tags. Because of this, the default way for the browser to handle them is different.
You could easily compensate for this difference by adding a right margin to the label using the "div" to surround it.
<div style="width:100px;float:left;background-color:red; margin-right:5px;">Date: </div>
Although it is ok to use inline styles, I would suggest if you are going to be using this in a larger document to put this inside a external CSS file and use a class (or ID) for the div instead.
Is it possible by default make all the fileds in a div class as required fileds. I have a form and inside the form i have a div class.. why i am using the div class is by defalut the div class is hidden and when i clicked on some check box it will be visible. SO i need all the elements in the div class should be required filed. I was trying required="required" on all the elements but it is not working. Any one has idea?
Here is my html
<div class="downtime" id="downtime" style="display: none" >
<label> name </label>
<input required="required" type="text" name="name><br>
<label> age </label>
<input required="required type="text" name="age><br>
</div>
</form>
Any help will be appreciated
Syntax highlighting - probably the greatest tool at any coder's disposal. (It's even on Stack Overflow!)
<div class="downtime" id="downtime" style="display: none" >
<label> name </label>
<input required="required" type="text" name="name><br>
<label> age </label>
<input required="required type="text" name="age><br>
</div>
</form>
Attributes are red and their values are blue. So it should look more like this:
<div class="downtime" id="downtime" style="display: none" >
<label> name </label>
<input required="required" type="text" name="name" /><br>
<label> age </label>
<input required="required" type="text" name="age" /><br>
</div>
</form>
and FYI the required attribute doesn't need a value:
<input type="text" name="age" required />
Change your code as follow:
<input type="text" name="name" required>
and
<input name="age" required>
Just writing "required" make your fields as required. It works only in HTML5. So put it before html tag starts.
if you want to use html5 you can do it with required(this only works on browsers that support html5), if not use a jquery plugin for validation like this:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/