The drop down box as well as the longest option in drop down gets cut off in IE7. This works fine in Mozilla and chrome. I am new to JSP and javascript.
I am using:
style="width:240%"
Option for the drop down is fetched from db. Even if the option is visible it goes out of the page and hence looks odd.
Is there a way to display the option in 2 lines in JSP?
please help
try style = auto, that means it automatically goes to the width of the longest option.
If you have the option to, remove the width from the style, this usually causes issues with select lists in IE. If not, multi line select list options aren't possible with html select list controls, but you can use a div that can act as a dropdown list using JavaScript and css. http://jquery.sanchezsalvador.com/page/jquerycombobox.aspx
Related
I have a select element with 22 options in five optgroups. On some browsers, if I click on the select, it only displays the top 14 options and the scroll bar won't reveal the rest of the options list. I'm trying to determine what governs the behavior of the select element when it is clicked on, and I'm not having much luck.
In most browsers, everything seems to happen automatically and correctly, but sometimes it's cut off. I'm hoping to determine what's cutting it off in these browsers and fix it. When it doesn't work, it looks like this:
https://www.dropbox.com/s/spi63bkl290zyfd/SelectIssue.jpg?dl=0
Dropdown options on IE8 gets cut down to width of select element but on IE11 it gets expanded to size of longest option value. I want to provide an unique user experience which will make it work like IE8; to cut options list width of select.
I tried css style for select option but it dint work. Any guidance?
I am basically using a dropdownlist control on an asp.net page, where I have set the width to 150px. In mozilla browser, it is showing the list items expanded, whereas in IE, the list item text is restricted to drop down list's width. Any idea, how can I can get the same appearance of this dropdownlist in IE as it is in Mozilla.
I just want the list items container to be expanded to its maximum width, NOT the dropdownlist box.
I'm pretty sure that you can't set the width of the dropdown and the options independently - that's up to the browser. The only option is to replicate the behaviour of the dropdown list yourself in javascript. Basically you would create something that looks like a dropdown list control and attach a click event handler which would display an absolutely positioned div (or ul) displaying the options. You would then attach an event handler to each option that would hide the options and take the action you need - probably display the option in the text of the dropdown control and store the value (a hidden form field would help here if this is a form you wish to submit). This is a fair bit of work but would have the advantage of looking identical in all browsers as long as you're careful with your css. I don't have time to write the code here but it should be fairly straightforward once you accept that there is no quick fix.
I think you are looking for the following solution.
https://jsfiddle.net/avernet/2Gn2c/
$("select.ie8-fallback")
.on('mousedown' , 'select', expand)
.on('blur change' , 'select', contract);
Although i would recommend using this code only with IE using IE8 if condition.
I would have provided a solution specific to your question if you added any code, But i think you can understand from this.
I am developing application using webview in android. i am loading a page into webview and splitting multiple columns dynamically using CSS3 webkit property. once user reach the last page/column i have to show the TOC confirmation dialog. can anyone please advice me how to do that ?
height:600px;
-webkit-column-width:600px;
-webkit-column-count:auto;
How your TOC confirmation dialog is setup?
One possible solution could be to use the :nth-last-of-type(N) selector to select last page/column element http://reference.sitepoint.com/css/pseudoclass-nthlastoftype.
Try putting a small element at the end of the text, and then wait for it to appear on screen. It is easily done using jQuery with jquery-appear.
I forked #visualidiot's jsfiddle to create an example using said techniques. Haven't tested it using jQuery Mobile though.
I put a <span> element at the end of the text. The span is floated right to make sure (most of) the last column is shown. In this example, the <span> is not empty (and highly visible), but it would be better if it was just empty.
The javascript confirm() dialog screws up the scrolling a bit by locking mouse focus on the scroll slider (tested in Chrome 16 on Windows). Showing a confirm dialog in HTML would not.
Since .appear() works for vertical scrolling as well, this degrades nicely when not having -webkit-column-* available (tested using IE9).
Get the total width of your element, and divide it by the width of a single column. Here's an example: http://jsfiddle.net/Ecp9M/
In IE 6 select control(combo box) is displaying on top of menus. I checked some Javascript menus, mmmenu, but all are getting under select control. It's not fixable by assigning Z-Index. Is there any other solution.
This is a well-known bug with IE6 with trying to absolutely position divs on top of select controls.
There are workarounds involving iframe shims, but there is no good answer. The iframe shim answer is to place an iframe underneath whatever div you're trying to place above a select, with the iframe being the same size. Unfortunately, this is a huge pain in the ass.
I suggest using a javascript menu system which already uses iframe shims, such as YUI menus (and I assume jQuery).
Most of the major javascript libraries have easy to implement solutions to this problem. We use jQuery, and the bgiframe plugin is very easy-to-use and solves the problem.
Daniel is definitely right. This is an ugly issue.
However, there may be another solution. If you are using multi-tiered menus that pop open and closed, it is possible to write JavaScript code that literally hides the problematic SELECT elements when the popup is opened (style the element to have a visibility of hidden). Then when the menu closes you can unhide that same SELECT control.
Then you just have to write code that detects which SELECT objects get in the way of a particular menu before it opens. It's not trivial code, but it's definitely possible to write. Then I'd just wrap the entire chunk of code in a conditional that checks to see if the user is on IE as there's no need to run this on Firefox or Safari.
The problem is that SELECT are "windowed" elements in IE6, and their z-index is above all the other non-"windowed" components. If you absolutely must have something above a combox, you might want to put it inside another windowed compnent, such as an IFRAME, and set the component's z-index to be higher than that of the combobox.
I must admit, this isn't a pretty solution.