I'm using Zurb Foundation's Grid to lay out a form. When I floated the the first few text and select inputs to lay them out in 2 columns, I lost the ability to click on them to edit them. Note that I could edit them by tabbing through the inputs.
Check out the example demonstrating the problem.
The textarea below the floated inputs could be clicked to focus and edited normally.
When I removed the float: left; from form#Form_Form div.field.text, form#Form_Form div.field.dropdown all the elements could be edited normally.
What's preventing the floated inputs from receiving focus when being clicked?
After some investigation, I discovered why - hope the following answer helps other stuck with the same problem.
All I had to do was to float the textarea as well. See the working sample.
form#Form_Form div.field.textarea {
...
float: left;
// clear: both; // clearing also worked.
}
The textarea's div which wasn't floated was 'covering' the floated inputs, preventing the inputs from receiving focus when clicking with the mouse. Hence another solution is to alter the 'z-index' so that the textarea's div was below the floated inputs.
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;
}
Can some one help me lining Select Drop down, Input and Submit button in one row.
I am getting only Input and Button aligned in row but Select is going upside.
I tried below in CSS but didn't work
display : inline;
Can you please help to modify the CSS to align all in one row.
Demo
Your example is a bit everywhere. Also, "selecter" should be spelled "selector", but that is beside the point. Use more <div> elements to wrap around smaller code segments. For example:
<div>
<div class="item"><p>Hello</p></div>
<div class="item"><p>Stack</p></div>
<div class="item"><p>Overflow!</p></div>
</div>
Normally, these <div>'s would display underneath one another. However, if we add a styling rule similar to the one you're using, we will get the result of these three elements together on one line.
.item {
display: inline-block;
}
Wrap your button elements in a <div> container and style them with the above. Does this answer your question?
I found the solution ,I just need to make
inline-flex =>inline-flex makes the container inline while still retaining the flex layout properties.
display : inline-flex;
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.
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.
I have a form that spans a toggable tab left bootstrap layout. I am using the bootstrap form controls as well. Essentially, I want to have three textareas which can be individually viewed by selecting the associated tab and then on submit, I take all three of the textarea's content to perform an update with.
The code is at http://jsfiddle.net/timburgess/rhNxF/8/
The tabs behave as expected. However, when displaying a textarea in the tab-content, it is spaced quite a bit away from the tab controls. Looking at the html, I can't see anything which would cause this. I could always do a CSS hack but I am wondering if I am missing something here? I have tried setting different span2,span4,etc classes but they make no difference.
Ideally I want to have the textarea next to the tabs and the alert to the right of the textarea.
It's because of:
.form-horizontal .controls {
margin-left: 160px;
}
in bootstrap.css. You would need to overwrite that in your CSS.