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
Related
Background: Ive done a few small websites using W3CSS, & get my knowledge from this website: https://www.w3schools.com/w3css/w3css_input.asp
Right now, I am starting on a brand new website & having a bit of difficulty centering an input field. (the form doesnt work as yet, i'm just trying to get it to look right).
http://clubs.kwister.com/login
Basically, you can see TWO forms asking for an email address. The first one, is CENTERED, with the input field at 50% width. However the actual input field where a person enters their email address is flushed to the left.
The second form, I have taken out the width:50% but now i see an input field taking the whole width of the screen.
Is there something i am missing, to make it look somewhat presentable & have the actual input field centered, but only 40-50% of the width ?
I see from the W3 website that theres no 'width' examples and all the input fields take up 100% of the available width.
i do want white-space on both sides (I may or may not add anything later on to fill the whitespace)
PS I could do the w3-third class (responsive section), and divide the screen into thirds, however i want the form to take up more than a third of the width of the screen.
Ive found a working solution - using INLINE BLOCK.
width: 50%; text-align: center; display: inline-block;
Number 1 of my example is working, i'll edit out the others out.
Well, There's an easy way to center an input field. There's a way you could center it by setting its position: relative; and left: 25%;, or you could set text-align: center; on the parent form. Depends on what you're after. Personally, I'd go with the relative position and left.
Hope that helps
ps. I wouldn't try to use display: inline-block; use display: block; float: left;
If You are still using w3css stylings- inside the input feild add class w3-center
This will center the input feild content.
Just add this class on div and should be centered
<div class="w3-display-container w3-col s4 w3-display-middle">
your contents here.....
</div>
I'm trying to make a button span the width of a column.
e.g. here: http://davidnhutch.com. Notice how the light grey buttons are only as large as the text they contain? I'd like each button to span the width of that column, but can't for the life of me figure out how to do it. I've done quite a bit of looking around but am still kinda new to this.
Any ideas?
You will have to make them block elements to be able to set a width:
.button {
display: block;
width: 100%;
}
Generally, these buttons are so-called "inline element". The browser renderer has very complex algorithms of layouting these elements. It's like Typesetting but with objects on your screen instead.
CSS and HTML together influence how the algorithm works: determining the width and height, color, etc. of objects. Also their position and how text flows, or how long buttons are.
There is a limitation, however. You cannot use anything that's like a variable width for inline elements.
Adding width: 100%; display: block as others suggested makes some buttons perfect: but only when they start at the left or right of the containing box. If it's after a sentence, then it (should) display as:
<---width of container--->
Text
<----------button-------->
However, the button is not after "Text" anymore, but is put below it. This is because it's now a so-called "block element". It is like a full paragraph, instead of elements in a text line.
If this is what you want; fine and problem solved. If this is not what you want, and instead want:
<---width of container--->
Text <-------button------>
This is not possible. CCS4 would be cool if it adds inline-width: 100% or inline-height, and solve a lot of problems. However CSS4 does not exists yet.
Adding width:100% to .button seems to work for the center and right buttons at the bottom of the page.
I found a way to change the background color of a menu option upon hover. However, when you hover an option, it takes up some wide space that moves all the other options to the right, its sort of annoying, i want to maintain a consistent space, so if i hover, only the color should change, not the option moving to the right. Sort of the way facebook has its menu options.
Below is the code:
<div id="menu">
home
profile
account
settings
extra
logout
</div>
CSS:
div#menu {
margin-left: 630px;
margin-top:-20px;
}
option {
margin-left: 20px;
}
#option:hover{
background: #3F2327;
padding: 10px;
}
Remove padding: 10px;
Space around an element takes up space, so if you don't want space, don't add it. If you want it all the time, add it all the time and not just for :hover
Also, unrelated to your problem, but just good practises:
If you use a browser that doesn't support CSS, has it turned off, or isn't graphical you end up with home profile account settings extra logout — you have a list of links, use list markup. There is plenty of guidance on making it pretty.
An id must be unique in a document, only use it to identify a specific element. Use the class attribute if you want to state that a bunch of elements are all members of the same class.
Avoid using class and id names that are the same as HTML elements, it just makes code confusing
1) You are missing a # on "option"
2) Why are you padding on hover? That will cause a movement when you hover above it.
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
I've been trying to develop a way to make rows of an ASP.NET GridView (or table in general) clickable, whilst still maintaining all the usual actions you'd associate with links - correct right-click context menu, middle-clickability to open in a new tab, etc.
My solution uses jQuery to find <a> tags within each row and expand that <a> tag to the size of the row, thus making it appear that the row is clickable. It all works fine in Firefox and Chrome, but IE gives priority to the the text in the table rather than the <a> tag, so you get a text selector cursor and can't click the link when you hover over the text. This simple example shows what i mean:
<style type="text/css">
.link {position: absolute; z-index: 100; top: 200px; border: 1px solid pink; width: 150px; height: 150px;}
.content {position: absolute; z-index: 0; top: 200px; border: 1px solid red; width: 150px; height: 150px;}
</style>
link here
<div class="content">
You can't click the link when you hover over this text in IE
</div>
This could be by design for accessibility, but if that was the case I'd expect other browsers to follow suit. Can anyone offer any suggestions as to how to avoid the issue?
Have you tried setting the padding of the a to fill the table row?
The tricky part with that is you'd have to do the math so that it didn't exceed the row. So something like:
$("a").css("padding-top", function() {
$(this).closest("tr").height - $(this).height;
});
and so forth, based on the position of the a to the table row.
My thinking is that maybe IE sees overlapping elements (as in positioned on top of one another) as a possible conflict and thus makes a decision to try to accommodate both ("well, the link is yay big, but the text outside of it really isn't a link, so let's treat it like normal text") etc, but that elements that overlap purely for style (which I think padding is considered) would not raise any alarms because, hey, it's just a visual thing!
Just thinking out loud, let me know if it works out.
Probably one of the issues where IE creates a new z-index stacking context where it shouldn't. Either you've got a positioned parent without a z-index (known IE bug), or maybe IE just does that for table cells anyway, since that introduces a new offsetParent.
The normal approach would be to put a link in every cell (containing only a nbsp if it's empty) and use ‘display: block’ to make the link fill the width of the cell.
why not just make the <a> display:block and add the other div inside of it?
Alternative approach: instead of making the link the size of the row, why not make the entire row clickable?
$('tr').click(function(){
$(this).find('a.link').click();
});
You may want to use the css cursor property to make the row appear clickable as well.
The text wont show-through if the element has a background-color or -image set.
try...
$("a", this).css("background-image", "url(/images/spacer.gif)");