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.
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.
My intention is to have 4 main Nav-bars at a site. If the user hovers one, it expands and should show content. But how should I do the content part?
#bottom-menu:hover #contact{
visibility: visible ;
}
If I make it visible when the box is fully expanded, it works but there is an issue: The content, while not visible, is still there and needs room which causes the layout to collapse.
I would like to do that with pure CSS, allthough i'm aware of jQuery.
http://jsfiddle.net/RbZwx/1/
visibility: hidden causes the element to continue to consume layout space.
display:none causes it to take up no layout space.
Think "spoilers" vs "hidden".
https://developer.mozilla.org/en/CSS/visibility
The visibility CSS property is used for two things:
The hidden value hides an element but leaves space where it would have been.
The collapse value hides rows or columns of a table. It also collapses XUL elements.
https://developer.mozilla.org/en/CSS/display
The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline.
In addition to the many different display box types, the value none lets you turn off the display of an element; when you use none, all child elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.
I would still encourage you to read both of these, and to learn how they affect the page more than just for this particular case.
Use display: none. See CSS 2.1: 11.2 Visibility: the 'visibility' property:
The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether). Values have the following meanings: [...]
hidden The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.
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'm trying to create css buttons by using the following html markup:
Forgot password
But it ends up being not bigger than the text in the middle. Even though I've set the class's height and width.
You can preview the problem here btw, www.matkalenderen.no
Notice the first button, that's a form button and it's using it's own class. At first I tried to use the same class on the css button as well and the same problem appeared, so I tried to separate them into their own classes. In case there was some kind of crash. But it didn't matter anyway.
What am I missing here?
As the others have said, by default <a> is an inline element, and inline elements can't specify a width or height. You can change it to be a block element like this:
a {
display: block;
}
Though it will then display (unsurprisingly) as a block, sitting on its own, outside the flow of the surrounding text. A better solution is to use display: inline-block which might be a best-of-both-worlds solution depending on your situation.
See PPK's writeup about it.
The real use of this value is when you want to give an inline element a width. In some circumstances some browsers don't allow a width on a real inline element, but if you switch to display: inline-block you are allowed to set a width.
Because <a>'s are inline elements by default. In CSS define a { display:block; } and height and width settings will be applied.
Of course, you may not want to declare all anchor tags as block level elements, so filter by class or id as needed.
I think the most proper solution is display: inline-block; which will allow you to set height for the element that still will be treated as inline element.