This form renders ok in Firefox, Chrome and Safari, in Mac and PC, but in IE 11, I have problem with vertical align of two forms. This is a Sharepoint 2013 site.
My code
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label class="control-label">Código*:</label>
<input type="text" maxlength="12" class="form-control" />
<span style="display:none;"></span>
</div>
<div class="col-sm-6">
<label class="control-label">Nome*:</label>
<input type="text" maxlength="150" class="form-control" />
<span style="display:none;"></span>
</div>
</div>
</div>
How can I fix it?
My form with the problem in IE 11
Related
I was looking how a bootstrap form looks like, And I saw something that looks pretty much like this:
<div class="form-group">
<label for="inputA">Some Input:</label>
<input type="text" name="Input" id="inputA" class="form-control">
</div>
And it's really bothers me to do the for attribute every time. so, my question is, Is it possible to do somethig like this?:
<label class="form-group">
<span>Some Input:</span>
<input type="text" name="Input" id="inputA" class="form-control">
</label>
And is there any possible issues working this way?
The for simply toggles the control for the form input. Essentially, when you click the label, the form element is focused upon, or selected, depending on what type of form element it is. You do not have to include the for on each label; however, this is just common practice. I would not swap the label for a span though, I would simply do this...
<div class="form-group">
<label class="col-sm-2 control-label">Your Label</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="foo">
</div>
</div>
How can I perfectly align and space my inline inputs forms in bootstrap
<div class="form-group col-lg-12">
<div class="col-lg-6">
<input type="text" class= "form-control" value="First Name">
</div>
<div class="col-lg-6">
<input type="text" class= "form-control" value="Last Name">
</div>
</div>
Use col-xs instead of col-lg
see this for a try
And keep all your input inside the
`<div class="form-group col-xs-12">`
I don't quite understand our question very well, maybe a picture to illustrate what you want to achieve would be helpful.
I have basically wrapped everything with a column-xs-12 so its perfectly aligned. Also included an example if you want to place two input forms on one line. I have made a plunk to help you out, hope it helps.
<div class="col-xs-12"> </div>
http://plnkr.co/edit/lj866U6QlvbLKhF4jujI?p=preview
I have tried to make the submit button outside with this code it works on normal browser as firefox. Is there somebody who got a good solution for this?
<label for="submit-form" id="upload_yes_cursor" onClick="parent.location='edit_note.php'">Yes</label>
<div id="edit_note_box_wrapper">
<div id="edit_note_box_inner">
<form action="insert.php" method="post" onSubmit="this.color.value = document.form2.color.value; this.color.value = document.form2.color.value;" name="form1">
<input type="text" class="edit_note_title" placeholder="Title" name="title">
<div data-role="fieldcontain">
<label for="textarea"></label>
<textarea name="textarea" id="textarea" placeholder="Description" data-role="none"></textarea>
</div>
<div id="check">
<input type="hidden" name="color">
</div>
<div id="submit_hidden">
<input type="submit" id="submit-form"/>
</div>
</form>
Your using Javascript in your button submition. Many mobile browsers are not able to use javascript. So, yeah xD
I'm trying to draw an horizontal form that should be horizontal even on mobile view.
Currently I have this simple form:
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="username">{{_USERNAME}}:</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control" id="username" value="{{username}}">
</div>
</div>
</form>
It works correctly as expected, so it is horizontal on large screens and classic on small screens.
Current:
Expected:
How can I force this form to be horizontal even on small screens? Do I have to write CSS by myself or there is some standard way using Bootstrap?
Okay I've found the solution.
Use col-xs-* instead of col-ms-*
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label" for="username">{{_USERNAME}}:</label>
<div class="col-xs-10">
<input type="text" readonly class="form-control" id="username" value="{{username}}">
</div>
</div>
</form>
Since non of the above met my needs. I drawed a table and inserted the label inside a td and the input in the next td. All within the same row. Finally adjusted the margins as needed.
Note: This worked for an exclusive mobile UX.
I want to use html input elements in twitter bootstrap. I have a label on the left and an input element on the right. I pretty much used the example given in the bootstrap documentation. But my problem is that I don't have IDs for every input element and so I can't specify the "for"-value of the labels.
My solution in previous projects was wrapping the input element with a label, but this results in a wrong styling when I use bootstrap.
<div class="control-group">
<label class="control-label">MyTitle:
<div class="controls">
<input type="text" value="..." />
</div>
</label>
</div>
Will this work for you?
<div class="control-group">
<div class="controls">
<label class="control-label">MyTitle:
<input type="text" value="..." />
</label>
</div>
</div>