In this page:
http://getbootstrap.com/components/#input-groups-buttons
If you change the Go! button to a label (with the Chrome inspector) you'll notice that the Go! button is not longer on top of the input field:
(Instead of the borders to be one on top of the other they are side by side.)
Why is this and how to make the two elements to be one on top of another?
Bootstrap applies max-width:100% to a label. That shrinks its border box (box-sizing:border-box is applied throughout) such that that fits inside its containing block (its parent span element), whose width is reduced by one pixel because that is determined by the fact that it must contain the margin box of the Go! button/label which has margin-right:-1px applied. The span is the button/label's containing block because its input-group-btn class makes it display:table-cell
So to get the same effect with a label, just set label { max-width:none; } In practice, you will probably want a more specific selector.
Putting a label on top of an input isn't the best idea, it would be better to split them up and have them float next to each other. This question answered here may help. This could also be adjusted using the z-index in the style portion of each div. As to answer you title in why this happens, i'm not entirely sure...
Related
I'm trying to write a CSS class that allows me to sit form elements (mixed button and text inputs) in a line so that they abut. I'm using display:table on a parent, and wrapping each element in a container with display:table-cell, and it works fine except for one bug that I can't figure out a way around.
So for example, parent is control-group, the element wrappers are control-group-item, and the elements themselves are control-group-input.
.control-group
.control-group-item
.control-group-input{type: "text"}
.control-group-item
.control-group-input{type: "submit"}
CSS of this (I've normalized font size/line height/padding/browser weirdness and all form elements are inline-blocked etc.):
.control-group {
display: table;
.control-group-item {
display:table-cell;
}
gives this, which is OK:
However, I ideally need it to fill a grid column of undetermined size, rather than the browser deciding how big my elements should be. If apply width:100% on .control-group, this happens:
The orange is a background colour applied to the table cell control-group-item. The issue seems to be with the 'submit' input: the submit stays the size it should be but browsers universally add extra space next to it within the table cell. So if I apply width:100% to each .control-group-input, I get this:
Which is OK, but stretches the ‘submit’ button. I can live with that, but is there any way to get it like the second image (but without the random space) using my current approach, or should I sack that off & try something different?
Edit I do not know the sizes of the inputs in advance: I can't set a width on them, which effectively rules out most inline block/float methods. I ideally need IE 8/9 support, which is why display:table was tried.
Edit 2: here are versions on Codepen: http://codepen.io/DanielCouper/pen/knDmC
After rewriting the code there, I realise my question is: how is the width of the table cells being calculated? It's specifically the cell with the submit button that has the extra space. The extra space seems random.
Here's a working version in codepen: http://codepen.io/mkleene/pen/ldqDH
The summary is that you need to remove the width: 100% on the submit button and then give the second table cell element width: 100%. You also need to make the textbox take up its entire parent with a 100% width.
You also need to make sure that the table element is using an auto table layout.
nm, spoke too soon. Thought I had solved it, hadn't, was getting effects from some other CSS.
What is the default behaviour of a div?
I noticed that even if a put a width for a div let's say 100px,
if i put a 2nd div with the same width will put it on the second line.so by default doesn't matter the width. it puts it on different lines?
in this case i understand the need of float.
I thought that any element i put in a html page,they will be side by side unless i add a break element or paragraph or something with that role.
Or maybe i do not use it correctly the div for this kind of alignment,but i really want to
clarify this for good.
A div element is, by default, display: block.
This value causes an element to generate a block box.
The rendering of them is described here
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.
Block-level boxes are boxes that participate in a block formatting context.
and then here
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.
To stop this kind of rendering, you can use float to cause block level elements to bubble up beside each other. You can also modify the display property of the div.
Divs are block-level elements which mean they stack...like blocks. Although it sounds reasonable that since the width would allow them to fit side-by-side without a float, this is not how they are designed to behave.
If an element is an inline element as opposed to a block, its behavior is to fit side-by-side. You can force this behavior on a div if you would like by tying the two ideas together. You can do something like:
<div style="display:inline-block"></div>
This will allow the div to maintain its other block properties but allow it to fit inline as text and images would and, if this the your desired goal, avoid the use of float.
The DIV by default takes 100% of the screen, even if you set it width the space on the right cannot be occupied by anything.
Try this:
The way to have two div on the same line would be to make them float:
<div style = 'float:left;width:500px;background-color:red;color:white;'>Hey</div>
<div style = 'float:left;width:100px;'> There</div>
I'm want to have a div with class "a" to be invisible. I've tried already to give it the display: none; line in the CSS file but what it does is hide it, yet it doesn't catch any space and so all my other boxes don't stay in place.
Is there a way to do this using CSS?
add .a{visibility: hidden} to your CSS. More about it here:
http://reference.sitepoint.com/css/visibility
visibility:hidden should hide the element, while keeping it's space so as not to move your other elements around.
You can use visibility css property. From sitepoint reference -
This property specifies whether an
element is visible—that is, whether
the box(es) that are generated by an
element are rendered.
Note that even if a box in the normal
flow is hidden, it still affects the
layout of other elements, unlike the
behavior that occurs when we suppress
box generation altogether by setting
display to none. Descendant boxes of a
hidden box will be visible if their
visibility is set to visible, whereas
descendants of an element for which
display is set to none can never
generate boxes of their own.
More information can be found here.
I have an input box, and I want some nice light grey text right below it (1 line instruction).
As of now the text is sitting a lower than I want in relation to the textbox (which is above it).
I am doing a clear:both, and if I remove it the next is all the way to the right of the input box.
What is wrong here?
Your HTML tags (for the text input and for the paragraph of text below it) all have default margin and padding. Probably the issue can be resolved by reducing the margin-bottom attribute on the text input as well as the margin-top on the paragraph. Here's some example code.
CSS:
.text_input_style {margin-bottom:0;}
.help_text_style {margin-top:0;clear:both;}
HTML:
<input type="text" value="default value" name="text_input" class="text_input_style" />
<p class="help_text_style">Help text here.</p>
Obviously, you don't have to use classes (you could just attach to the HTML element and/or IDs), but this is the idea.
Bottom line: adjust margin-bottom on the input and margin-top on the help text.
Well it all depends on what HTML tags your placing the text within.
Each element has a default behaviour.
A DIV element will display as a block. As such it will display on the following line in the natural flow of the HTML in the page. It will also cause all the HTML that comes after it to be displayed below it.
A SPAN element will not be displayed as a block. In fact it provides no visual change by itself with no CSS applied to it. A SPAN element is simply displayed inline and everything just flows around it like normal.
You can use CSS styles to modify the layout behaviour of HTML elements.
For example, you can specify that a DIV element be displayed left or right of the HTML content by using float:left or float:right. You could then use the CSS clear:both to specify that an element should be displayed below all floating content.
So, in your case, if you remove the clear:both style, then the element will no longer be displayed below floating elements and this will cause your elements to be rearranged.
-Frinny
You can make it higher by applying this:
.class { position: relative; top: -5px; }
or you can reduce the line height:
.class { line-height: 10px; }
You have to have the clear: both in order to make it go to the next line, but because it is a new line, the line-height property applies. Reducing the line height should make it higher, and if it isn't close enough, try positioning it relatively.
You probably have padding on the "instruction". Relevant html and css maybe?
I want to hide a form input field. But calling setVisible('inputID', false) causes my liquid layout to collapse. I don't want that.
Is there some easy workaround here? I thought about trying to render the input field's foreground color, background color, and border color to be all white. But that's getting unnecessarily complicated.
There are two ways of hiding elements using css:
Settings the display attribute to none
Setting the visibility attribute to hidden
The first option removes the element from the flow, while the second option hides the element but still lets it take up space in the flow.
You are using the first option and you want to use the second option instead.
Example:
document.getElementById('inputID').style.visiblity = 'hidden';
If you set an element's "visibility" style to "hidden" it will hide the element from view but it will not affect the layout of other elements.
It's hard to give better advice without seeing your code, but there's a few things you can do:
Given that you're using JavaScript, you could get the width and height of the form input you're removing, create a new div with those dimensions, inject it after the form element, then hide the form element. A bit of a hack, but it works.
Surround your input with a div in your HTML and give it an explicit width and/or height in your CSS. Then remove the input with JavaScript as you're doing already.
That's the definition of an element with relative positioning.
Just give it relative positioning and coordinates far off the screen.
e.g.
position:relative
left:-2000px
It should put the element out of the screen, but leave a "hole" where it would have been.