Hi I have some troubles while creating a navbar with a dropdown menu, I need all my informations in just one line, but my menu name and the arrow are not on the same.
A CSS element is created : .dropdown-toggle::after{display: inline-block;}
And my navbar looks like this :
I tried the most examples of dropdown/navbars I found on Bootstrap website but every time I have a result displayed in two lines. How can I fix that to have my label and my arrow in the same line?
Important Points:
If you need all your content in a single line then use white-space: nowrap; or reduce the font size.
as you mentioned you need the arrow in same line but its not due to less space in there, so use position absolute for the arrow.
After making it single line by white-space property you will need to create the ellipsis there so that your content will not look odd.
to make ellipsis: use overflow:hidden; on its parent and text-overflow:ellipsis on your text
Related
I have a couple of problems with my nav bar. Basically I have 5 options on my nav bar, the first 3 are in text format, then last two are images that you can click on (a phone number and a live chat). Both are png files, and all items are within tags.
The problem I have though is that the images appear slightly above the nav bar. Basically if you ran a horizontal line along the text on the nav bar options then the text in the logo's is slightly above where it should be.
So how can I make the image navbar options appear slightly higher?
My 2nd Question is that one of the logo's also needs to have text appear over it (the phone number) and I have no idea how to do this. How do I put text over an image within a nav bar?
you can play around with css for your first problem, add something like the following to your css file:
.navbar img { padding-top:10px }
For the second question, have a look at tooltips
without jsfiddle, can't give exact answer..but you can try margin-left, margin-top and give minus values to it
I don't know how to formulate my question perfectly, so I made a (quick) example so will illustrate my problem exactly : http://jsfiddle.net/kn5GT/1/
If the last item is near the bottom and you hover it, the submenu will be displayed like the other, but this will extend the height of the page, thus showing the vertical scrollbar of the browser.
I'd like to avoid that by making all dropdown that would extend the height of the page by showing not from the up, but from the bottom (the bottom of the submenu would be near the end).
Is this possible only in CSS or do I have to put some js in it?
this might not be the best solution, but you could fix this with a little help of the css-pseudoclass nth-last-of-type().
I have modified your fiddle (the borders are just there for better visual distinction.)
I just added the following rule:
ul>li:nth-last-of-type(-n+2)>div {
top:auto;
bottom: 50px;
}
Don't get confused by the strange selector, essentially (-n+2) makes the last 2 Submenus pop up from the bottom instead from the top.
I'm trying to do this:
into html so when I type some text the line gets longer or shorter.
On the end of each line there is a small icon of height of 32px so I would image each line would be line-height:32px.
Shall I use <li> or div's and sort the icon next to the line next to the text with float:left? And how would the line increase it self? I would imagine the line would have a background-color and a height of 1px?
I'm not new to CSS, I'm just trying to think of the simplest way of doing this. Note that each line is a button which expands.
Thanks alot
Edit:
It will actually look something like this:
Each div is a toggle button and I would like the grey line to be in the middle of the entire div if that makes sense.
Thanks alot again
Simplest way I can think of is to use border-bottom on the text container, then push the text out with negative bottom.
Quite simple really, here you go: http://jsfiddle.net/pixelfreak/DCZSa/
If your background is solid, I would probably implement this like so:
http://jsfiddle.net/JLwwP/
First, use an all-white background (or whatever color). Then, on your list items, tile your horizontal line. Then, float the image (with a white background) to the right. Finally, wrap your left-hand text in a span and make it's background the same solid.
It's not perfect (it requires some fiddling with node heights to make everything work), but you can see the effect.
I have a minor problem with my css in that I have a drop down menu which works fine, however the problem comes when scrolling on items in the drop down the text is not centered in the highlight, it is horizontally but not vertically. I have tried to achieve it by applying a small margin (which isn't a problem), however the margin is applied to the background also thus the background is moved down and the issue remains. See here: http://www.letsmine.info/Sundalah. The CSS is located here: http://www.letsmine.info/Sundalah/css/drop.css
The margin affects the whole box layout, so it will shift the background. Try padding instead.
If you want to vertically align the text, and you'll only ever have a single line for each menu entry, set the line-height of the (menu entry) box to the same value as the height of the box.
I have a dropdown that I'm looking to enlarge without effecting the text and ensuring the right hand down arrow remains at the full hieght of the element.
I've tried adding padding but this effects the right side:
Dropdown with padding http://hoctordesign.com/dropdown2.png
I've tired adding height but I can't vertically align the text:
Dropdown with height http://hoctordesign.com/dropdown.png
Anyone solved this before?
Thanks,
Denis
This is browser-dependent behaviour. Each browser applies css to form controls differently.
The best breakdown of what you can do (that I've come across) is at http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/. And the most relevant section is http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/
In your case it would be better to use a custom element that acts like a select box.
Here is a nice one using jQuery
Select Box replacement