I have a table and a form one next to the other with Bootstrap. I have applied the well class to the form, to make it stand out. However, the well and the contained form are not aligned?
Please see my fiddle here.
How can I align the well and the form? (Notice that when both the table and form have the class span6, then all is good. However, I want span7 and span5 respectively.)
The form element's width is greater than the width defined by Bootstrap for span5, and thus some rendering engines will force the element to break out of the well.
If you absolutely have to use span5, try reducing the width of the labels, and margins of the input elements within the form.
Related
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...
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.
I am building a web page that displays user information. It looks like this:
As shown in the colored legend, the form contains a label and an ordered list. CSS has been used to give both display: inline and make the list appear as a comma-separated list of group names. Here's the relevant HTML fragment:
<label>Group membership</label>
<ol>
<li>domain users</li>
<li>denied rodc password replication group</li>
</ol>
The problem
The form's width as a whole is unknown (it's fluid). The label has a fixed width in order to support right-aligned text, but the ordered list is free to consume the rest of the available space horizontally.
However, this is what happens when the list of groups becomes large:
The list needs more space than is available horizontally, so it moves down and appears detached from the label and the label/display element alignment goes out the window. This looks really bad.
What I want to achieve
The list should expand downwards as necessary, but it should remain anchored next to the label (as would happen in a table-based layout where the two cells would have vertical-align: top).
Is there a CSS technique that will allow this easily? What would be the least invasive method to achieve the goal? There are tons of forms styled in the same manner throughout the app, so radically changing the CSS could easily impact some other form and for this reason would be impractical.
Surgically targeting the HTML for the list is possible, so feel free to recommend an alternative if that would help.
Here is a fiddle of a mockup with all the relevant styles that you can use as reference.
Instead of using inline-block, float that particular label to the left, and make the list block with a margin-left – see http://jsfiddle.net/8tx24/1/
(I made the LI inline as well, because as inline-block the long value in the second LI might make it break into a new line, which looks kinda weird. But if you want that behavior, you can keep your inline-block.)
I've got a FORM which contains a 32*50 TEXTAREA and a Submit button.
Now I'd like to align horizontally two text areas that contains additional information. Ideally the three text areas (the one in which the user can type/paste and the two others) should have the same width and appear in three aligned columns.
If I wanted to do that, should I use only HTML? If so, how? A table with one row and three td? (Sample code would be most welcome).
Or would you rather suggest CSS?
textarea is inline element and they would be horizontally aligned if the container is larger enough in width. So, see http://jsfiddle.net/FATfJ/ I don't know if this is the exact one you need.
code:
<form id="a-form">
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
</form>
#a-form textarea {width: 100px;}
Since textarea is an inline element, you can just put such elements after another. They will then appear in one line if they fit it but wrap to two or three lines if needed.
If you would rather force horizontal scrolling when there is not enough horizontal space, you can use a one-row table. There would be nothing special with the markup:
<table><tr><td><textarea ...></textarea>
<td><textarea ...></textarea>
<td><textarea ...></textarea>
</table>
But if you wish to fine-tune the rendering, then that’s best done with CSS.
If the textarea elements need labels, as they usually do, you can place them in another row of the table (at its start).
Ideally you need a nice combination on CSS and HTML. You could perhaps use fieldsets to put your fields in and then float them next to each other using CSS. You can set widths and margins etc using CSS and you should be able to line everything up this way.
You could use tables to do this but I find that they can add more code than is really required.
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.