I have got a long label next to my input and it is not vertically aligned.
Is there some option to solve it like it was in Bootstrap 2, please?
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="input1" class="col-lg-2 control-label">Labdas kjas kljas dlkjasd lksjd el1</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="input1" placeholder="Input1">
</div>
</div>
<div class="form-group">
<label for="input2" class="col-lg-2 control-label">Label2</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="input2" placeholder="Input2">
</div>
</div>
</form>
not very cleanly... you would need to add an override class to the long label, such as multiline and then add a definition for that class like so
.control-label.multiline
{
padding-top:0;
}
Here's another option, that may or may not work based on your implementation.
I've used it to handle some cases where I needed the 'col' classes to take up full height of their rows. Essentially it's telling the browser to interpret it as a table. That should allow you to vertically align the label to the middle.
I put it in a media query because smaller than that it stacks for me.
/* addition for displaying bits as tables to gain cell features */
#media (min-width: 769px) {
.table-display{display:table; margin:0 -15px; width:100%; }
.table-display .row, .table-display .form-group{display:table-row;}
.table-display [class*="col"]{float:none; display:table-cell; vertical-align:middle; padding-left:15px; padding-right:15px;}
}
You would add the table-display class to your form:
<form class="form-horizontal table-display" role="form">
HTH,
-Ted
Edited to add: heres a fiddle- http://jsfiddle.net/eAaa3/
Of course you will need to stretch the frame to unstack it
I had the same problem, and i used a table instead.
and if you implement it with a table, you can also use .table and .table-responsive classes of bootstrap.
This is what I do with mine. I'm actually working with Bootstrap today
.control-label{
float:left;
vertical-align:middle;
}
Related
I am using Bootstrap 4. My HTML code is like below.
<div class="font-weight-bold col-12">
<span>Filter :</span>
<input type="text" class="form-control" />
</div>
Before decrease the browser size my output is like below
After decrease the browser size my output is like below
How can I keep both elements in the same line after I decrease the browser size?
Try like that:
<div class="font-weight-bold col-lg-12 col-md-12 col-sm-12"> // use fullwidth for large, medium and small devices
<span>Filter :</span>
<input type="text" class="form-control" />
</div>
You can read more about bootstrap grid system here.
You can do a few things here:
1) get rid of the "form-control", add a class of your own and set its width using CSS
HTML
<input type="text" class="my-input" />
CSS
.my-input {
width: 100px; // or the width you desire
}
2) Overwrite the CSS of the element inside the media query.
Somewhere in bootstrap CSS you have a selector (of "form-control") inside a media query which gives the input a smaller width. You can create your own media query and selector and overwrite it.
3) Sort of a combination of both. You can just add a class to the input
<input type="text" class="form-control my-input" />
and then add CSS according to the screen width.
It might not be that elegant - but you can also use !important on the width and then it won't be overwritten when the screen size changes.
Like:
.my-input {
width: 100px !important; //again - not elegant, but will do the work
}
Write the CSS for input as:
input {
width: calc(100% - 55px)
}
HTML
<div class="font-weight-bold">
<span>Filter :</span>
<input type="text" class="form-control" />
</div>
55px is the width allotted for the label. The input will adjust itself as per the screen and the label width without using any bootstrap also.
I'm beginner on CSS.
I want to add a label on the top of the two textarea. When I tried Label tag (as shown below) , the second textarea ends up beeing under the first textarea( basically I want them side by side ).
Here is my JSFIDDLE
<label for="Coords">Past Coordinates here: </label>
<textarea id="Coords" cols="35" rows="20"></textarea>
<label for="Time">Time: </label>
<textarea id="Time" cols="25" rows="20"></textarea>
My two textarea are wrapped to put them on the right.
Can anyone help me ?
Thanks!
use this. http://fiddle.jshell.net/sherali/agr3a07m/209/show/
UPDATED:
Tip: remove your cols and rows from textarea. you should define from css(thorugh width, height)
in HTML:
<div class="box">
<label for="Coords">Title of Coords: </label>
<textarea id="Coords"></textarea>
</div>
<div class="box">
<label for="Time">Title of Time: </label>
<textarea id="Time"></textarea>
</div>
in CSS:
textarea#Coords{
width:270px;
height:300px;
}
textarea#Time{
width:215px;
height:300px;
}
label {display:block;}
.box{
display:inline-block;
}
Probably the simplest way is to wrap each label/textarea pair in a div and set display: inline-block; on each div. Though I'd recommend checking out some frameworks with grid systems, like Bootstrap, that abstract and simplify this.
In my fiddle i show a form devided into two parts (horizontally). The left part is the problematic one. There are a select element in line with two textfields sharing the available width percentally. What i'd like to have is to give the select and the middle textfield a defined percentual width and have the right textfield to take rest to always span up to the right container border. This layout must remain behaving like this upon scaling the container. Also, the select element must remain readable. At the moment its content is getting partially hidden upon scaling.
I cannot figure the proper formatting to achive this.
Here's my code:
<style>
.unseen {
display: none
}
form {
background: maroon;
margin: 0;
display: flex;
}
[class*="span5"] {
background: olive
}
[class*="span7"] {
background: pink
}
#salutation {
width: 12%;
min-width: 50px
}
#firstname {
width: 30%
}
#lastname {
width: 40%
}
</style>
<div class="container" id="page">
<div class="row-fluid" id="page_content">
<section class="form row-fluid" id="page_content">
<div class="row-fluid">
<form class="form-horizontal form-validate">
<div class="span7">
<fieldset class="well-small">
<legend></legend>
<div class="control-group">
<div class="control-label">
<label id="salutation-lbl" for="salutation">Full Name</label>
<label id="firstname-lbl" for="firstname" class="unseen">First Name</label>
<label id="lastname-lbl" for="lastname" class="unseen">Last Name</label>
</div>
<div class="controls">
<select id="salutation" name="salutation" class="fullname salutation">
<option value="Mr." selected>Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
<input type="text" name="firstname" id="firstname" value="Max" placeholder="forename" />
<input type="text" name="lastname" id="lastname" value="Mustermann" placeholder="surname" />
</div>
</div>
</fieldset>
</div>
<div class="span5">
<h2>Other content</h2>
</div>
</form>
</div>
</section>
</div>
</div>
I have tried to solve your question in the best possible way but not exactly as you wanted for the first part of the question as percentage widths won't always work properly since bootstrap is constantly changing the parent container's width. So, I have written a jquery function that will calculate the desired width of these input text boxes and dynamically add them as their respective css widths. This function along with some other minor html/css tweaks will fix your problem.
HTML - Changed the bootstrap form class from form-horizontal to form-inline which better suits the requirements.
<form class="form-inline form-validate">
CSS
Added a fixed width of 65px that keeps the select element readable even with the longest possible option. (mrs.)
Removed percentage widths from #firstname and #lastname selectors as we'll be adding those via jquery.
And finally added a !important to the display property of the unseen class (required when switching to bootstrap form-inline class)
.unseen {
display: none !important;
}
form {
background: maroon;
margin: 0;
display: flex;
}
[class*="span5"] {
background: olive;
}
[class*="span7"] {
background: pink;
}
#salutation {
width: 65px;
}
JQUERY - Here's the jquery function that does all the trick. This function calculates the available width for the textboxes to fit in with default padding
function resizeFormElements() {
/*
Calculating the available width for the two text boxes by subtracting the
=> main control container width
- the width of the selector element
- 4 * default_bootstrap_margin_of_3px between input elements (two input elements so both left and right margins)
- 4 * default_padding_of_6px of input text elements as per bootstrap.min.css line 238 (two input elements so both left and right padding)
- 1 (to not get affected by truncated values)
*/
var avail = parseFloat($(".controls").width()) - parseInt($("#salutation").css("width")) - 4 * 3 - 4 * 6 - 1;
$("#firstname").css("width", avail / 2);
$("#lastname").css("width", avail / 2);
}
$(window).on("resize load", function () {
resizeFormElements();
});
Here's a working fiddle of the above solution.
Currently I have the following HTML code.
<div class="field">
<label>E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip"></div>
</div>
However, I want the text in the div element (class = 'tip') to be aligned with the start of the form's text field.
How should I do this using HTML and CSS?
Here's what is looks like now:
http://jsfiddle.net/pEJMD/embedded/result/
This would be a quick workaround. You should put both the .tip div and the input into a wrapping div.
You can set a fixed size to the label. Than push the div to the right with the size of the label:
<div class="field">
<label style="width:100px;">E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip" style="margin-left:100px;">
The quick brown fox jumps over the lazy dog
</div>
</div>
And the result.
Well, either you use a <table>, putting in one cell the <label> and in the other the <input>, or you use fixed widths/margins or paddings.
Solution 1: Table
Table solution
In this solution you use a table to hold the form. On column is for labels, the other column is for inputs. In this case you will have the tip in the input column, and it will align automatically with the input.
This has the pro to be working for flexible dimensions of your label/inputs. And tables are not always evil. Just remember that, if you want to keep your label aligned with the input, add a vertical-align:top to your CSS.
Solution 2: Fixed width
Fixed-width solution
In this solution you give a fixed width to your label, and move the .tip div using either margin, padding or left.
This will hold your layout in place, so be careful of extremely long labels!
You don't need an explicit width at all, nor tables; just use CSS tables (see my answer to this related question):
CSS
form { display: table; }
p { display: table-row; }
label { display: table-cell; }
input { display: table-cell; }
HTML
<form>
<p>
<label for="a">Short label:</label>
<input id="a" type="text">
</p>
<p>
<label for="b">Very very very long label:</label>
<input id="b" type="text">
</p>
</form>
Here's a JSFiddle: http://jsfiddle.net/DaS39/1/
And if you need the labels right-aligned, just add text-align: right to the labels: http://jsfiddle.net/DaS39/
Use margin-left:
Change:
<div class="tip" id="emailTip">
To:
<div class="tip" id="emailTip" style="margin-left:95px;">
DEMO
Learn more about the CSS margin property here.
You can give a height to the label, give a width to the parent div and float your tip. See the demo: http://jsfiddle.net/pEJMD/4/
Here you go: http://jsfiddle.net/4sJ2t/
You just need to give your label a fixed width, and then your tip a left margin
label {width:100px; text-align:right; margin-right:5px;}
.tip {margin-left:105px; padding: 5px 0;}
The Problem
I've got a problem where I'm trying to create rows of form inputs. This works OK, however, once the width of the total inputs gets too large, everything starts to wrap. What I would like is for a horizontal scroll-bar to appear inside the field-set and for all form elements for a single service-item div to remain on a single line.
<div style="display: inline-block;" class="horizontal-fields service-item">
<button class="horizontal-fields remove-service-item" style="float: left; margin-right: 5px;">-</button>
<label for="service_name">Name:</label>
<input name="service_name[]" id="service_name" value="" type="text">
<label for="service_description">Description:</label>
<input id="service_description" name="service_description[]" value="" type="text">
<!-- Additional form fields are dynamically inserted here. -->
<div class="service-additional-fields">
<!-- Additional fields for DSL Tails -->
<label for="service_dsl_fnn[]">FNN:</label>
<input id="service_dsl_fnn" name="service_dsl_fnn[]" size="10" value="" type="text">
<button class="horizontal-fields new-service-item" style="display: inline-block;">+</button>
</div>
<br>
</div>
Current Results
Here is a JSFiddle showing the form in it's current state, I've included all the bare-bones CSS/HTML that I think are relevant: http://jsfiddle.net/FjxqG/3/
You will see that I've managed to get what I want by specifying width: 300% in the horizontal-fields class. However, this is of course not optimal because the width is essentially fixed and not automatically fitting the width of the service-item div.
Of course, this leaves the width much larger than it needs to be, but also always showing a horizontal-scroll, even when it isn't needed.
What I've tried
I've tried using display: inline-block; and whitespace: no-wrap;. However, the former did not seem to do much for me, and the latter only worked for the first few form items, not those inside the service-additional-fields div.
Unfortunately, I've got those latter items in the service-additional-fields div as they are dynamically inserted using jQuery, so although it's possible to take them out, I'd rather leave them in there, as it keeps the JavaScript simpler.
I've tried adapting the solution found here, with little success: http://www.css-lab.com/demos/image-display/side-scroll-gallery.html
Ended up with a similar situation in which the latter form elements were still wrapping.
I've also considered doing something like the jQuery solution found here: Horizontal scroll in DIV with many small DIV's inside (no text)
I guess this would work for me, because I already know that setting the width on horizontal-fields works OK, so using jQuery to find out what that width should be would probably work. However, it feels like I shouldn't need jQuery and it would be kind of a hack. So I'd like to avoid it if reasonably possible.
Thanks!
For some reason the other answer has been deleted and I can't get it back so having to answer again.
Previous answer was -
How about removing the floats and having inline-blocks with auto widths, And then for the .service-additional-fields as inline-block too?
Edited for a fuller answer.
HTML
<fieldset>
<legend>Fourth: Add Services</legend>
<div id="slide-wrap">
<div id="inner-wrap">
<div class="horizontal-fields service-item">
<button class="addField">+</button>
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
<!-- Additional form fields are dynamically inserted here. -->
<div class="service-additional-fields">
<!-- Additional fields for DSL Tails -->
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
</div>
</div>
<div class="horizontal-fields service-item">
<button class="addField">+</button>
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
<!-- Additional form fields are dynamically inserted here. -->
<div class="service-additional-fields">
<!-- Additional fields for DSL Tails -->
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
</div>
</div>
</div>
</div>
</fieldset>
CSS
#slide-wrap {
margin:0 auto;
overflow: auto;
background:#BCC5E1;
border:1px solid #000;
}
#inner-wrap {
float:left;
margin-right:-30000px;/*Be safe with Opera's limited negative margin of 32695px (-999em could cause problems with large font sizes)*/
padding-left:20px;
width: auto;
}
div.horizontal-fields input,
div.horizontal-fields textarea,
div.horizontal-fields select,
div.horizontal-fields label {
width: auto;
}
/* Horizontal fields is the class which is not re-sizing it's with correctly */
.horizontal-fields {
display: block;
}
.service-additional-fields {
display:inline-block;
}
DEMO
http://jsfiddle.net/aLKHJ/1/
Try this approach:
HTML:
<div id="slide-wrap">
<!-- + First row -->
<div class="row">
<!-- All elements here -->
</div>
<!-- - First row -->
<!-- + Second row -->
<div class="row">
<!-- All elements here -->
</div>
<!-- - Second row -->
</div>
CSS:
#slide-wrap {
margin:0 auto;
overflow: auto;
background:#BCC5E1;
border:1px solid #000;
width: 400px; /* for example */
padding-left:20px;
}
div.row {
float:left;
white-space: nowrap;
}
Take it easy, I was really getting confused of inner styles, so I removed them.
JsBin demo