Form inputs not lining up using Bootstrap 4 - html

I have created a sample jsFiddle here, with the html copied straight from my web page. I have included the css for bootstrap 4 which i have compiled using sass, along with the rest of my css.
Now from what i can see, this should all line up fine, and on all sizes it does, until you get to a small display. Then for some reason the input boxes and buttons seem to go all the way to the edge, but the rest of the content (labels, headers, p text, tabs etc) seem to stay within the bounds of the tab-content box.
Here is the link to the jsFiddle example
https://jsfiddle.net/Gillardo/y3Lr9sbf/1/
Why is this? Have i laid something out incorrectly, or is it just a bug with bootstrap 4 currently? I am asking here because if i go to the bs4 examples, it lays out correctly, which you can find here, and i cannot tell what i have done differently http://v4-alpha.getbootstrap.com/components/forms/#using-the-grid
An example of how my form is created, using form-group is like so
<div class="row form-group">
<label class="col-sm-3 form-control-label">Label</label>
<div class="col-sm-9 col-md-7">
<input class="form-control form-control-lg ng-pristine ng-untouched ng-valid" disabled="disabled">
</div>
</div>

Class .tab-content is set with 0 padding, if you want some change the following:
.nav-pills+.tab-content {
border: 0;
padding-bottom: 3rem;
padding-left: 0; // <-- change
padding-right: 0; // <-- change
}

Alternative answer, modify .row class to remove negative margins:
.row{
margin-left: 0 !important;
margin-right: 0 !important;
}

Related

How to have select and textfields appear inline and scaling upon scaling the parent container?

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.

Horizontally Align Labels with CSS

I've got an issue that I'd love to solve by using CSS without resorting to statically sizing my labels (but perhaps it isn't possible).
I have two labels per line, one for displaying a "title" and the other for displaying the associated "value". Here's how I'd like it to look:
This is similar to Align labels in form next to input but I'm wanting the second element per line left-aligned instead of the first one to be right-aligned. I tried modifying the accepted answer from that question and set the width of the "title" label, but that has no effect on my output. As I mentioned above, I'd rather not hard-code a width anyways, but I was hoping to get something working before trying to find a good, long-term solution that can account for larger "title" values.
Here's my current CSS (the classes should be self-explanatory):
.propertyTitle {
text-transform: uppercase;
width: 300px;/*Why doesn't this have any effect?*/
}
.propertyValue {
text-align: left;
}
And my current HTML:
<div>
<div>
<label class="propertyTitle">Hello:</label>
<label class="propertyValue">World</label>
</div>
<div>
<label class="propertyTitle">Goodbye:</label>
<label class="propertyValue">To All of the People in the World</label>
</div>
<div>
<label class="propertyTitle">I Want:</label>
<label class="propertyValue">These labels to line up</label>
</div>
</div>
The HTML can be modified as well, if that'd make it easier. To conform with best practices, I'd rather not use tables to make this work.
Here's a jsFiddle showing what I have now, what am I missing? Ideally this solution would work for IE8+ and Firefox, so unfortunately HTML5 and CSS3 elements are discouraged.
EDIT
To reiterate after the first two answers came in (that both solve my issue), is there a way to do this without hard-coding a width for my "title" labels?
grouping your divs and labels like so:
<div>
<div class="titleWrap">
<label class="propertyTitle">Hello:</label>
<label class="propertyTitle">Goodbye:</label>
<label class="propertyTitle">I Want:</label>
</div>
<div class="valueWrap">
<label class="propertyValue">World</label>
<label class="propertyValue">To All of the People in the World</label>
<label class="propertyValue">These labels to line up</label>
</div>
</div>
with the following CSS:
.propertyTitle {
display:block;
text-transform: uppercase;
width: auto;
}
.titleWrap{
display:inline-block;
}
.propertyValue {
display:block;
width:auto;
}
.valueWrap {
display:inline-block;
}
should give you the desired result without having to specify the widths
Check out this jsFiddle
try using display:inline-block on your labels
.propertyTitle {
text-transform: uppercase;
width: 300px;/*Why doesn't this have any effect?*/
display: inline-block;
}
by default label is an inline element. that's why width property doesn't apply to label.
to apply the width you have to convert the label into a block level element by using display:block.
I hope it clarify the answer.
so you have to use this CSS property in your code.
.propertyTitle {
text-transform: uppercase;
display:inline-block; /*this will make the label a block level element*/
width: 300px;/*Why doesn't this have any effect?*/
}
More modern version is display: inline-flex;

Space appears above form (in Chrome only)

I've got a form, which has a legend and a set of fields. I'm using Bootstrap 2.x to style it. For some reason, space appears above the form, but in Chrome only (it renders fine in IE10 and Firefox). I've pared it back to just the basics to demonstrate the issue I'm having:
<form>
<fieldset>
<legend>Legend</legend>
<div class="control-group">
<!-- This div results in the space appearing above the form -->
<label class="control-label">First Name</label>
<div class="controls">
<input type="text" />
</div>
</div>
</fieldset>
</form>
If I remove the class="control-group" from the div wrapping the input field, the space magically disappears, despite seemingly having nothing to do with this issue. I've checked all the margins and padding of everything in Chrome, and there's nothing, so I don't know where this spacing is coming from. I need to use this class on these field divs, as I'm implementing a horizontal form. I'm pulling my hair out trying to work out how to fix this issue - any ideas? Here's a jsfiddle to demonstrate: http://jsfiddle.net/christhecoder/kDrVH/3/
Any help would be much appreciated!
http://jsfiddle.net/kDrVH/10/
#import url("http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css");
legend+.control-group{
margin-top:0px;
}
you get 20 margin from this: legend+.control-group
This is because bootstrap CSS rules for <legend> has margin-bottom:20px
Just add a CSS rule:
legend {
margin-bottom: 0px;
}
Also you can add this only to your legend label:
<legend style="margin-bottom: 0px;">
// Whatever you want
</legend>
JSFIDDLE DEMO
Instead of
legend+.control-group {
margin-top: 20px;
}
Use this.
It will preserve your current layout and remove space above the form.
legend+.control-group {
padding-top: 20px;
}

extra white space between input elements

i am trying to remove the white space between two imput fields for all my form elements.
i decreased the height but after that the next label goes up
can you tell me how to remove it
http://jsfiddle.net/DA9gK/18/
<div class="control-group">
<label class="control-label" for="inputEmail">Company Name</label>
<div class="controls">
<input type="text" id="inputEmail">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Contact Name</label>
<div class="controls">
<input type="text" id="inputEmail">
</div>
</div>
I don't think anyone could help You by now. You have big mess here. Update jsfiddle with HTML and CSS windows. Btw - you're writing about padding or margin styles imo in labels. (margin-bottom:0)
I think this should solve your problem, I have answered it there. Thank you. button alignment in form fields
Damn! I apologize for the uncorrect fast answer, ok I have zeroed in on your problem, and the problem lies in the css file that you are importing viz. "http://twitter.github.com/bootstrap/assets/css/bootstrap.css" and your elements are inheriting the style attribute from it, and your white space problem is exactly on 'line no 1945' where its explicitly defined
.form-horizontal .controls {
*display: inline-block;
*padding-left: 20px;
margin-left: 180px;
*margin-left: 0;
so either you have to manually override those or use the good old "!important" attribute.
PS: you have to edit the 'margin-left' attributes value to maybe 160px or something which you are comfortable with.
It's because of the padding and margin on label.control-label. Remove the top padding or bottom margin. (I think removing the margin looks better.)
label.control-label {
margin-bottom: 0;
}

Styling HTML <li> elements: avoiding an invalid parent <div>

The situation:
I have a site with a long list of questions across multiple pages.
Each question is within a made up of a label and an input. Groups of question divs are within an additional div to provide grouping and bordering styles, etc.
The problem:
I want to number my questions, but want to avoid hard coding the numbering. However, it is invalid html to place the <li> inside the divs or labels.
In addition some question divs are conditionally hidden and revealed depending on user input. The divs therefore provide key functionality, and the number must be hidden and revealed along with these divs, (so positioning each <li> outside a divs would be problematic.
Code:
Here is an example of a pared down structure of my form, showing two question "blocks":
<form id="myform" method="post" action="/destinaion/page.php">
<div class="formfield">
<div class="page1">
<div class="lowerborder">
<div class="question">
<label for="q2">Question 1</label>
<input type="number" id="q1" name="q1"/>
</div>
<div class="question">
<label for="q1">Question 2</label>
<input type="number" id="q2" name="q2"/>
</div>
</div>
</div>
</div>
</form>
The div class form field contains the form page, and page1 various styling particulars for page 1.
I'd like to make an ordered list from my questions, perhaps something like
Attempt at achieving goal:
<form id="myform" method="post" action="/destination/page.php">
<div class="formfield">
<ol>
<div class="page1">
<div class="lowerborder">
<div class="question">
<label for="q2"><li>Question 1</li></label>
<input type="number" id="q1" name="q1"/>
</div>
<div class="question">
<label for="q1"><li>Question 2</li></label>
<input type="number" id="q2" name="q2"/>
</div>
</div>
</div>
</ol>
</div>
</form>
But as you can see I am putting the <li> inside the <label> which a) is not valid html, and b) doesn't play well with all browsers.
How can I avoid putting <li> elements inside invalid parents, when my list items are separated by many nested divs?
jsFiddle:
See a fiddle of my above attempt. Including some styling and functionality I am trying to achieve (styling via nested divs, hidden questions that reveal etc)
Please see this fiddle demonstrating how to do everything you want without interposing any other elements. I found no need for even a single div anywhere.
Note: I initially used float:left for the question to make the answers line up properly. However, this caused IE to render the numbers just left of the answers instead of left of the questions. I switched to using display:inline-block and now everything works in IE as well.
Comments:
I cleaned up the style sheet, which had some sections repeated and conflicting style rules. I removed unnecessary rules.
I created the lines separating groups of questions using a class, and I also made it apply to the top border of a question rather than the bottom, so that you can use it even if there are hidden questions ending a group, since a hidden question would probably never begin a group. There was no need for additional elements to have borders.
In my opinion the label for the "Reveal" checkbox should be the text next to it, so that you can click that text to check and uncheck the box. Thus, I added a "question" class to the items that are the question, rather than using a label. You must apply the style "question" to the questions to make them style properly. You can apply that to a label element (which is for something else or not), or you can use a span or other element to contain the text when it is not a label.
IE 7 stupidly puts the numbers at the bottom of the line, even though the questions are styled with vertical-align:top. I don't know how to fix that at this time, but it could be another question to those more expert than I in CSS quirks.
IE was not handling the "hidden" method very well, taking up extra space and then when revealing not showing the child elements, so I used absolute positioning instead (which, by taking it out of the document flow, has the same effect). See the CSS for how it works.
I modified the way you were applying the reveal script. Instead of manually wiring up each individual item, instead I put a data value on the checkbox itself, then at the ready event I use that to wire up the page appropriately. Now you can have checkboxes that reveal more questions just by adding an id to the revealed question (or use class instead if you need to reveal more than one at a time) and a data expando attribute like data-togglehidden="l4" to specify the id to toggle right in the checkbox element. No script changes required.
It looks a little like you may have "div-itis" which is the tendency to multiply divs all over the place. No need to be embarrassed, I have had div-itis too, when I was new to html development. You'll grow out of it due to experiences like this. In general, you should use normal non-div page elements and style them directly, rather than wrap things in divs and styling those. Divs are useful when you need to style a group of related functionality or provide a box for different elements. One hint that you may be using divs improperly is when they only have a single item in them (especially another div). Sometimes that is necessary, but ask yourself: can I move the style to the parent or child element instead?
I need to know more about how the "pages" work that you mentioned and that were in your original html markup. There are no pages in html, only when html is printed. So I'm not quite sure what that means or how to style your pages for you.
Here is the cleaned-up html, without the need of additional elements between ol and li:
<form id="myform" method="post" action="/destination/page.php">
<ol class="formfield">
<li>
<label class="question" for="q1">What is your first name?</label>
<input type="text" id="q1" name="q1"/>
</li>
<li>
<label class="question" for="q2">A very long question 2 that is sure to run to a second line just to prove that such a thing will work properly and not mess up the layout, described in your own words?</label>
<input type="text" id="q2" name="q2"/>
</li>
<li class="begingroup">
<span class="question">Are you the type of person who likes to needlessly answer extra questions?</span>
<input type="checkbox" id="q3" name="q3" data-togglehidden="l4"/>
<label for="q3">Yes, yes, that's me!!!</label>
</li>
<li id="l4" class="hidden">
<label class="question" for="q4">Why do you like to do extra needless work?</label>
<input type="text" id="q4" name="q4"/>
</li>
<li class="begingroup">
<label class="question" for="q5">What was your first pet's name?</label>
<input type="text" id="q5" name="q5"/>
</li>
</ol>
</form>
Here's what it looks like in Firefox 16.0.2:
And in IE 7.0.5730.13CO:
The CSS:
ol.formfield {
width: 500px;
margin: 10px auto;
padding: 16px 16px 16px 0;
border: 5px groove #005E9B;
list-style: decimal outside;
color: black;
background-color: #6Fc2F7;
font-family: 'Oxygen', sans-serif;
font-size:15px;
}
ol.formfield li {
clear: both;
padding: 2px;
margin-left: 1.7em;
}
ol.formfield li.begingroup {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #005E9B;
}
.question {
display:inline-block;
width:300px;
vertical-align:top;
}
.hidden {
position: absolute;
height: 0;
width: 0;
overflow: hidden;
}
ol.formfield input {
border-radius:5px; /* css 3 */
-moz-border-radius:5px; /* mozilla */
-webkit-border-radius:5px; /* webkit */
}
And the script to wire up your hide/reveal based on data values on elements:
$('ol.formfield input:checkbox')
.each(function() {
var d = $(this).data('togglehidden');
if(d) {
$(this).on('change', function() {
if ($(this).attr('checked')) {
$('#' + d)
.removeClass('hidden')
.find(':input')
.focus();
} else {
$('#' + d).addClass('hidden');
}
});
}
});