So I'm using Twitter's bootstrap 3.0 and have a div immediately following a <legend> inside of a <form>.
The weird thing is that when I change the margin top of this div, it actually moves the legend up and down (with reference to the enclosing <form> tag in Chrome.
Here's a jsFiddle that demonstrates the effect:
http://jsfiddle.net/aq5T7/2/
You'll notice the second item the legend is moved down 50 pixels instead of the div below it.
And in the third item the legend is moved up 50 pixels instead of the div above it.
Is there anyway to change the margin of the item immediately following the legend without having it affect the location of the legend?
Looks like this is a known issue with legend and webkit and not really related to bootstrap. Add this to your css:
legend, fieldset {
-webkit-margin-collapse: separate;
}
You can see this other question for more info.
Related
Problem
If I keep my label element (and from what I've read, every input element should have a label element, even if you're not using it, for disabled users), my search box corners on the left-hand side aren't being rounded.
Also, you can tell (if you look close enough) that my search button on the right side isn't aligning perfectly with the rest of the search bar.
Delete the entire label element, and it looks perfectly fine. However, I want to make sure I am practicing good coding manners/behaviors.
How can I make my search bar look the way it looks when you delete the label element, while still using the label element?
Troubleshooting
I have tried using CSS to style the entire bar, to no avail.
I have tried placing the input element, the button element, and the
span element inside of the label element to no avail.
My Code
JSFiddle
I see bootstrap targeting class names based on first or last child.
.input-group .form-control:not(:first-child):not(:last-child), .input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child)
and
.input-group .form-control:not(:first-child):not(:last-child), .input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child)
which appear to be in the _border-radius.scss. Im not totally sure why they are doing this but I did see that is was what was needed to add the border. So basically, the element you needed to have a border-radius, only receives those styles if its the first element.
Just switch:
<input class="form-control" id="search-bar" placeholder="This bar has rounded corners only on the right side.">
<label for="search-bar" class="sr-only"></label>
Kindly use below css to apply left rounded corner.
#search-bar{
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
I have a html file, which has sections those can be expanded or collapsed. Following image has what I am trying to achieve (when collapsed, when expanded). I have also attached code (jsfiddle.net/MpPE8/).
Question:
I wanted to place the checkbox (which was shown while expanded) between (+) and heading text (Heading One) when collapsed. See following image for more information. I want this to be achieved using CSS ONLY due to environment restriction.
Place the div as a hidden element (eq. display: none) and then show it when the block expands (eq. Display: inline)
Sorry for my late answer but I didn't had time until now. Here is what I understand you need:
jsfiddle.net/MpPE8/2/
Please apply the styling you need. I only worked on the functionality.
BR
Please have a look at the following JSFiddle: http://jsfiddle.net/33wRk/1
I know that this is not strict HTML, since I have a block <div> inside of an <a>.
As you can see, the <div> inside the <a> gets red if the <a> becomes the active link.
However, it stays red, even after another <a> gets active.
How can multiple <a>'s be :active at the same time?
If the problem comes from the fact that I have invalid HTML, how can I change it to become correct?
It looks like a Chrome bug to me. I can't reproduce it in Firefox.
You can fix it by setting a { display: block; }
since I have a block <div> inside of an <a>.
That's fine in HTML 5, the content model was changed to transparent instead of inline.
I have a form build with <ul> but I have a problem when I add checkbox somewhere.
It breaks whole layout.
Problem is somewhere in label styling but can't figure what?
Here is the fiddle.
Your next row is stacking on top of the label floated to its left since the checkbox is not as high as the input field. One simple solution is to add another rule to your CSS to clear it:
ul li { clear: left }
See the jsFiddle.
It looks like a button, but it is not an input element. How can such an element be created?
Maybe it is a button element? Or img element with a image of a button?
it can be a <button>
It can be anything with the right border
it can be an image.
You could use an image, or you could style a div (or other block level element) around some text. You could then make it behave a bit more "buttony" with javascript effects. Quite why you'd want to do that is beyond me though.
They're normally created by adding CSS styling to a standard hyperlink, sometimes in combination with javascript. Check out Top 10 CSS buttons tutorials.