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.
Related
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;
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.
I am trying to understand html/css menu bar and my problem is at the display property,
I do know about this property very well, but if you take a look at this Link,
just a simple menubar, but the problem is that i dont understand why does the li tag and the a tag at the css style include display property inside them when the float do the job and you can delete them and the menu looks the same, i know that there is a resone for thoes display properies to be there at thoes both tags styles but i dont get it, if can some one please help me understand why the display property with the value of inline at the li css style, and with value of block at the li a at the css style, and again its not that i dont know about this property it just i dont understand why its there, thank you all and have a nice day.
display:inline used in li's is to make li aligned Horizontal or side by side.
display:block is used in li a so the a should take the complete with of the li so that if you click anywhere inside li the <a> tag will work & will not only work on clicking on the text.
Here's my jsfiddle example:
http://jsfiddle.net/7PqqT/
Update: This is my work around solution: http://jsfiddle.net/7PqqT/1/
However I would like to achieve this same effect without needing the arrow divs to be in each li element.
Now what I'm going to be doing is having jquery addClass('current') to whichever of the 3 li elements the user clicks on, and it I want the arrow to appear below that li element in the center of the text. I'm not sure the best way to do this, I'm hoping there's a simple method to go about doing this.
Here you go, I updated your JSFiddle.
Basically, I just deleted the arrow div completely and change the arrow-related CSS to :before and :after pseudoelements. Works like a charm.
I've got menu items that look like this
<ul>
<li>Item1<span class="context-trigger"></span></li>
<li>Item2<span class="context-trigger"></span></li>
<li>Item3<span class="context-trigger"></span></li>
</ul>
with CSS that turns the above into a horizontal menu, and JS that turns the [spans] into buttons that bring up contextual menus. Vaguely like this:
Item1^ Item2^ Item3^
If the menu gets too wide for the browser width, it wraps, which is what I want. The problem is that sometimes it's putting in line-breaks before the [spans]. I only want it to break between [li]s. Any ideas?
try using
white-space: nowrap;
in the css definition of your context-trigger class.
Edit: I think patmortech is correct though, putting nowrap on the span does not work, because there is no "white space" content. It might also be that sticking the style on the LI element does not work either, because the browser might breakup the parts because the span is a nested element in li. You might reconsider your code, drop the SPAN element and use css on the LI elements.
You need to put the following to keep your list item from wrapping (putting it in the context-trigger class would just keep the span contents from wrapping):
li { white-space:nowrap; }
If you float the <li> elements, you should get the effect you want.