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;
}
Related
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;
}
I need to show (within a div tag) a label and right next to the label an input. I am using bootstrap css and my code is as follows:
<div class="row">
<div class="span3">
<div class="control-group">
<label class="control-label" for="txtInput">Enter Text:</label>
<div class="controls">
<input id="txtId" class="input-medium" name="txtInput" />
</div>
</div>
</div>
</div>
No matter what I do there is a space between the label ("Enter Text:") and the left margin of Input.
How do I change the HTML or CSS to accomplish this? TIA
To adjust the position of only your input field you should be able to just apply the "position" CSS property of that element. Once you set that "position" property as relative you can move the element's position relative to its initial starting location using top,bottom,left, and right.
In the below example I moved your input field 5 pixels to the left of where it normally would be.
<style>
.controls{
position:relative;
left:-5px;
}
</style>
Try removing any whitespace between the elements. For example:
<label class="control-label" for="txtInput">Enter Text:</label><div class="controls"><input id="txtId" class="input-medium" name="txtInput" /></div>
Then, just remove the margin or padding of the div or input, if you want them to be placed right next to each other. The whitespace between them is rendered, so you'll have to remove it. Another approach I've seen is (but never used) is to put an HTML comment between the elements instead, like this:
<label class="control-label" for="txtInput">Enter Text:</label><!--
--><div class="controls"><!--
--><input id="txtId" class="input-medium" name="txtInput" />
</div>
See if either of those help. I recently ran into this problem where I was getting unexpected whitespace between my labels and inputs, and I couldn't remove it without using negative margin, which I didn't like. The solution I found was to remove the whitespace as in the first example. It doesn't look too pretty in the code, but it works.
Good luck!
You could put a negative margin on input-medium to force it to be closer to the label:
div.controls {
display:inline;
}
.input-medium {
margin-left:-4px;
}
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;
}
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');
}
});
}
});
I'm trying to simply align a set of text and <input> elements to the right, so that the left side of the inputs always aligns at the same location (they are the same width, so what's really happening is the right side is aligned to the right side of their container), and the left side of the label text is jagged.
It's not ideal for a large form, but for what I need, it looks better that way.
Here's the HTML and CSS (also at this jsfiddle):
HTML:
<div id="pullthrough-control-panel">
<div class="float-l right-text" id="pullthrough-range-panel">
<h3 class="center-text">Date Range</h3>
Start: <input type="text" name="rangestart" />
<br />
End: <input type="text" name="rangeend" />
</div>
</div>
CSS:
.float-l{
float: left;
}
.right-text{
text-align: right;
}
.center-text{
text-align: center;
}
#pullthrough-control-panel{
height: 6em;
padding: .25em;
}
That's it. Now, the real problem comes into play when I try to go cross-browser with the page. As usual, Firefox works as expected. The problem is with Chrome. The lower input ("End") juts out to the right of the upper one. There's no reason this should be happening.
If you have both browsers, you can check it out at the jsfiddle I posted above.
Is this a bug in Chrome's CSS engine? Is there something happening that I'm not aware of?
you can simply change <br/> to <p> and it will work.
http://jsfiddle.net/Jd7PR/
You're doing it all fine, just move the <br /> in the upper line without spaces after the input:
Start: <input type="text" name="rangestart" /><br />
End: <input type="text" name="rangeend" />
jsFiddle demo
That's it!
Here's my demo for you. Seems like chrome didn't like the </br>
DEMO
Do you need to have both a class and an id on one div? (I don't want to say you shouldn't because I'm not sure about that, but I haven't encountered that before)
You could give each input a class/id and then set the css for that class/id as: float:right; - Alternatively you could use position:absolute; - Personally, I would put both pairs in parent divs and use display:inline; and float:right; on the parent divs.