The text in select box elements are being truncated on inital load, until a user clicks on the select box it looks like this:
Once the user clicks, the text will expand to say "Female". This only happens in IE.
Also, it seems like if there is sufficient text in the select box, then thee truncations will not happen. I just noticed this behavior:
I assume there is no style hook for a select's text? Based on this info, I think that appending a bunch of white space to an option that's length is less than 6 chars (or somethign) would be an acceptable if not annoying solution.
Here is what the select looks like once it gets focus:
I tried every solution in this post:
Select dropdown with fixed width cutting off content in IE
Which seems to be to "go to" post for this issue. Neither JavaScript or css techniques seem to solve this bug.
It seems like this would be a common problem; can someone suggest a pure css fix that addresses this bug in IE that is not mentioned in the post above?
Thank you.
Related
I use a Hide/Show .js script that hides some checkboxes and on the right side there is the search field when I click to hide it I want to expand.
Ex.
Before hidding:
Before hidding Image
After hidding I want the search field to be expanded 100%
After hidding Image
I searched for 2 days something and can't find a way to make it expand I use the bTemplate engine to store the HTML code.
Did you try changing the CSS properties through the "setAttribute" method of the elements in question through Javascript? Basically, the code you used to "hide some of the checkboxes" in the first place is pretty much like how you'd write the code to do the other things you're looking to do.
In other words, When you want the checkboxes out of view and the text entry box centered, as in your second reference pic, you could have the Javascript code written through the "setAttribute" method so that when a particular event happens, the css "display" parameter for the check boxes could be set to "hidden", the size of the text entry box can be increased, and the css "position" parameter for the text entry box can be set to have it centered, etc.
That is, of course if I understand your issue correctly. Can you provide the code you are using? I'm sure me or someone else could clarify things more if we could see what you have written.
Hope that helps at least a little! :)
I am facing an issue with email generated from our application.
In the received email, I do the following
Ctrl-R (reply)
Ctrl-A (select-all)
delete
And I expect to then see an empty outlook email with the correct To: and Subject: lines. The problem is that these actions now lead to an empty box in my email rather than an empty email.
When I debugged the issue, found out that this is because of the following
Border is given to a div which is hidden.
In reply mode, this div becomes visible.
When I do select all and then delete, the box (which is due to
border to div), doesn't go
Figured that when I change div to span, this problem won't occur. But it is leading to lot of other problems.
Can somebody suggest a solution here. Basically, what I want to achieve is:
Delete all the hidden elements that are not disappearing when I select all and delete
Not exactly sure what you are trying to achieve.
Do you want to delete all the hidden elements that are not disappearing when you select all and delete?
You could try clicking the "Format text" tab, then change from "As HTML" to "As Plain Text" before you choose "Select All".
The problem was caused by a div at the end. Fixed the issue by adding a line break after that div
In Internet Explorer 10 the behavior of drop-down boxes (<select> element) has changed: when expanding the box, instead of placing the list of options below the field, the list overlays the field, with the list positioned so that the currently-selected element is centered over the input field.
This is a little hard to describe, so here's a jsFiddle that shows it.
Our users are finding this behavior very confusing. Is there anything I can do in CSS to make the box behave like it did in IE9, and like every other major browser? (Perhaps something like the -ms-clear pseudo-element that hides the clear button in IE10 text input fields.)
Here's a sort of time-lapse screenshot:
One option is dynamically change size property of the select to the number of options (or a fixed number - if you have too many options). You would do it on mouse-down, and change it back on-change.
Style, Position of select as well as additional events will have to be tweaked - but here is the proof of concept: http://jsfiddle.net/KnAXL/1/
I'm new on this particular project, and I've been tasked with resolving an issue that's appearing in IE8.
If you check http://funds.ft.com/ETFHomepage.aspx, There's a section called "News". In that section, there's a column called "Most Popular ETFs". This should be the same width as the "Recently Viewed ETFs" column.
For reference, this page is appearing correctly in Firefox. Can somebody please point out what I can do with CSS or (some other means)* to resolve this?
*I know the best way to resolve this issue is to scrap the terrible design and implement it correctly!! :-) -- we're actually doing that right now. It's a big job, so it's taking a long time. In the mean time however, we have to fix the bugs as they appear. Thanks
Update: just to note what I've said to Hristo, "I think the problem is with the table (rather, nested tables) on the left. The table in the center has its width defined by the image, and the table on the right doesn't have an image so it gets crushed"
Well the reason this is happening is because of the url you have under the "Alphaville: Overcoming the Volcker rule, with ETFs" header. Since the url has no whitespace in it, the table tries to give it space. So there are a couple of ways to fix this problem:
Plain text urls aren't very becoming on a webpage (especially when they're not in anchor tags so you can click on them.) Could you update the content so that you don't have a raw url in your content?
If you must be able to handle long lines of text with no whitespace then you need to figure out how to change the layout of the page so it forces the text to either wrap or clip to fit the container. Try playing around with putting "table-layout: fixed" on your tables to force the column widths to be sized based on the table's specifications only (instead of content). Firefox seems to be wrapping on dashes and slashes in the url whereas IE only wants to wrap on the dashes in the url.
I would say your layout is fine, and you just need to fix the content generation so it doesn't include any long plain text urls (option 1 above)
EDIT: If you do decide to go with option 2 above, then look into the css rule "word-break: break-all". It is IE only and it forces the text to break as soon as it reaches the end of the container. Not good for words, but it works for url's. So you couldn't apply this to the whole news table, but you could to just the cell that contains the url.
I would like to know if there is anyway I can divide an item on two line inside a select box.
One of the values of my select box is two long to fit in my div.
No, this is impossible.
You can consider using a javascript widget, like this jQuery plug-in.
May I also say that what you are trying to do is uncommon - even in desktop applications users don't expect to find wrapped text in a drop-down box and may get confused if they do see one. It would be better to try a different control or try to limit the text.
It is impossible, but if it's simply a matter of avoiding that the element gets too wide you could just define a width (eg. <select style="width:100px;">). This will cause text to be cut off when the box is "closed", but as soon as you "open" it the entire text will be shown.
As far as I know, it's impossible. However, I'd look at jQuery for options. Specifically, there are jQuery plugins that allow for select box customization.
Select Box Factory 2.0 is one option. I believe it extends the functionality of the select box to allow text wrapping among other features.
You could simple add an option disabled in blank
<option disabled selected value> </option>
Divide an item that's on two lines in a select box.
Why would you want to do that? If you're using a JQuery plugin to make HTML display inside an option tag, then there would be no reason to ask this question, I don't think, as you would be already able to add a tag.
What you can do to make spacing in select elements, is to create a blank option tag, that has an empty value and name. You would then have to validate the submission to detect if a blank value was submitted.
If you are really in need, a hacky solution would be to take a screenshot of the text on two lines, and use images in your select box.
http://www.jquerybyexample.net/2012/05/how-to-add-images-in-dropdown-list.html
Just be sure to set the alt tag on the images for accessibility.