The <select> has a width of 60px,
but the content of <option> is longer than that.
Which is hidden in IE6.
How to fix that?
I've tried to figure this out before and all I could find were javascript hacks. I found one once upon a time that worked well but I don't know where.
You could try this:
http://brandonbuttars.com/2009/09/css-select-options-internet-explorer-cut-off/
Or plenty of other options on Google:
http://www.google.ca/search?hl=en&safe=off&q=ie6+cutoff+select+options&btnG=Search&meta=&aq=f&oq=
We added a button next to select which change select's width to default value, so it becomes non-limited in width.
Short and easy answer: it´s not possible without JavaScript. And with the JavaScript-solution your layout will jump when the select gets wider.
See my comment on duplicate threads for more info.
Unfortunately this is not possible. You could use custom scripts like this one: http://www.icant.co.uk/forreview/tamingselect/, but still - it is JavaScript based solution.
I know this is years later but it may help someone searching for a solution.
You can do it in CSS by setting the select's width when it is in focus, e.g.
select {
width: 100px; /* normal state */
}
and
select:focus {
width: 200px; /* wider when in focus */
}
Full article at http://dinowebs.net/?p=114
Related
I'm using Bootstrap input groups and applying the negative margin margin-bottom: -1px similar to this example:
http://getbootstrap.com/examples/signin/
However, if you look at the screenshot below, when I focus on an input, the negative margin causes the bottom highlight of the input to be hidden.
Can anybody suggest how to resolve this?
I was hoping for an obvious answer perhaps explaining why this doesn't happen on the Bootstap signin example.
Fiddle
This should solve the issue.
Fiddle
.form-control:focus {
z-index: 2;
}
When dealing with focus events\stylings, you can use the Developer Tools to force the focus state on an input and see whats going on (at least in Chrome you can...). Just right-click on an element's HTML and select "Force element state"->":focus"
My problem is basically described here. I need to float a FB Like button to the right, considering that the width of the button will vary according to the language (and number of likes).
Though it's impossible to manipulate elements in an iframe belonging to a different domain, I still wonder if there is some exotic method to do something about it. I can't believe there is NO way whatsoever to float a damn Like button to the right.
give the button a wrapper.
<div id="likeWrapper">
</div>
<style>
#likeWrapper{
float:right;
}
</style>
I believe that you can't do that just by html and css, because of the fixed width of the button, you will always need to have some extra space on the right, even if you float the button to the right.
There is one quick dirty hack, but it will work only for one particular language -
.like{
position: absolute;
float:right;
right: -20px; /*change this to fit your layout */
}
But you see the problem with this: if the like button is longer in another language, it will go beyond your layout.
So we can do it by javascript (jQuery), something like getWidth of the like button first, then move it to the right by required amount of pixels. I can't help you with the exact code, i am little rusty with jQuery, but that is the basic idea: get width of the button displayed, then change the right: css property with jQuery in order to match your layout.
Just float the actual iframe to the right.
this problem made me scratch my head
how to use CSS to make a DIV display only the first line of a multiline content?
How can I set a DIV height like one line, but actually holding multiple lines?
Can this be done without any javascript? I have to display the full content after click the DIV and edit the DIV by setting its attribute to contenteditable, it's best if I just use CSS selector to select non-first-line of the content and hide it.
Its easy:
.magic {
height: 1em;
overflow-y: hidden;
}
.magic:active {
height: auto;
}
Make sure that instead of :active you're using suitable selector.
Height have to be equal to line-height. Which is not always equal to 1em.
Question 1: you may be able to use the :first-line pseudo-element in your CSS.
div#mydiv {display:none}
div#mydiv :first-line {display:inline}
However, the spec does not list "display" as one of the properties which may be assigned to this pseudo-element, so this may or may not work, or may depend on the browser.
there was a related bug and it's already fixed
http://code.google.com/p/chromium/issues/detail?id=81783
Unfortunately Colin's answer above using the :first-line pseudo element doesn't work.. would have been nice as it's very elegant :)
There are some alternatives here:
Show first line of a paragraph
I have a select list, where some clients have entered insanely long options for them, which breaks the design. I'm wondering if there is a way to set a fixed width on the select widget, but still have the drop down menu it produces still be wide enough to display all of the option.
Since you don't specify what browser support you need, this may or may not be a solution. This works in most browsers IE9+
select {
width: 100%;
max-width: 150px;
}
Short and sweet. When expanded, the select will display the whole text (unless it exceeds the viewport!).
See the working example here.
You just need to apply width to your select box either inline or CSS. It will be as wide as you have specified but when clicked, it will show all options with whatever width.
I don't know if you can do it with css (browser independent), but here are 2 other solutions:
1. Instead of displaying "veeeeery looooooooooong teeeeeeeeext" you can display something like "veeeeery loooo...";
2. Build your select using divs and lists so when it is closed to have a specific width and when you press something like an arrow to display full width. (I am not sure you understand what I'm trying to say with this one....).
If the list you have (the entries in <select>) are user entered, and the user can enter, say 500 characters, they they definiteky will.
In this case, I would not go for a <select> list, but a custom list built with, say a <div>.
This is not difficult, all you need is
a div that contains the default
option,
a hidden div with all the options
When the user clicks the default option show the hidden div
On click of the items in the hidden div (that is now visible) make that the selected item in the first div
Perhaps there already jquery plugin for this. but i am not sure whether you are open to jquery, I am not a jquery expert anyway.
I know this comparitively more effort than having a select, but i think it is worth the effort. All the hacks - expand the div onmouseover, onclick etc do not look great, might still break your design, and depending on the amount of data the user can enter, would still not be effective.
In the custom list approach, you can wrap the elements, so that you are in complete control.
Add to the CSS something like this:
select {
border: 1px solid #838383;
border-style: outset;
font-weight: bold;
color: #3F3F3F;
max-width: 150px !important;
overflow: hidden;
}
option {
max-width: 120px !important;
overflow: hidden;
}
This works for me. Note there are no dots in front of the anchors.
Not sure if you're open to using jQuery at all but I usually use this method:
http://css-tricks.com/select-cuts-off-options-in-ie-fix/
Is a bit choppy but looks better than cutting off the content
Webkit decided there weren't enough browser incompatibilities and added 2px of padding to my textarea. However, if I set padding:0 then it looks awful when typed in. Is there a way I can make it the same size without destroying the display? (It seems like -webkit-padding-start:2px and -webkit-padding-start:2px will fix the left and right, but there are not corresponding properties for the top and bottom)
Also, there's some type of little handle in the bottom right corner to allow resizing of the textarea. Any idea what CSS property might turn this off?
For the second part of your question try this:
textarea
{
resize:none;
}
Just had this problem myself. Try:
<textarea style="margin-left:0;">