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.
Related
I have a kendo grid which gets data and also font settings from the server.
The user has the option of either using scrolling or paging, but not both.
The problem is that when I set the font for the appropriate cells, that makes these rows bigger, so the rows no longer all fit inside the grid content area.
What I'm doing at the moment is all in the dataBound event:
Set the styling.
Given this styling, calculate how many rows can fit
in the content.
If the calculated row count doesn't match the
dataSource.pageSize, set the dataSource.pageSize as this value.
The problem is that the pageSize method resets the grid (thereby calling dataBound (only sometimes?!)), removing the styling and also the dataBound becomes unbound somehow.
I have a jsfiddle which fails in a different manner but I think for the same reasons as my program, but if someone could tell me how to get it working I could apply the logic to my program.
http://jsfiddle.net/y6vMx/5/
Why did you load the style when dataBound fires? Does the user have the option to change the style?
If I'll have to do something similar, I'll put styles to another event, like on page load or something similar.(the best way is to call it after you populate the grid)
I am also using kendo grid right now and I experience a lot of troubles..
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
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 IE6, and possibly 7, if you set the width of an to any value other then auto, if the options inside of that select are wider then the select's width, they get cut off. this is bad. Firefox is smart enough to not do this.
Question:
How can i tell if the options are being cut off with javascript?
How have you dealt with this issue other then setting width to auto?
Good question. A bit of a rant here but IE's implementation of <select> controls is abysmal. It has the following problems (among others I'm sure):
(As you've noticed) setting the width on the <select> cuts off <option> elements, regardless of overflow instructions
they have this magic ability to sit overtop of all other controls on the page, regardless of position and layering (z-index) instructions. This was a huge PITA for early developers of "dialog" widgets; any dropdowns behind the dialog would bleed through overtop of the dialog itself.
you cannot disable individual <option> elements
you cannot hide/show individual <option> elements
the <select> does not reflect css styles set on the selected <option>
can't set the innerHTML property to a string of new option items
if you do not set a value attribute on each <option>, mySelectBox.value silently fails
when using the keyboard arrows to navigate throught the list of <option> elements, the change event fires on every keystroke (Opera has this problem too)
css styles on <option>s and <optgroup>s are generally completely ignored (only backgound-color and color work)
programmatically changing the options list hides the dropdown (this sucks for "type ahead" implementation attempts who want the dropdown to stay visible)
IE7 tries to fit all the options on the screen when shown. For large lists this means the dropdown content will sit overtop of the dropdow when shown (this in and of itself is not wrong, but it is inconsistent with other IE versions)
As for your problem, one solution is to toggle the width to "auto" when the options are shown, and set if back to a set width when the options are closed, as outlined here: http://css-tricks.com/select-cuts-off-options-in-ie-fix/
The obvious drawback of this is that the screws up the flow of the document as neighboring elements all shift around to account for width:auto setting.
Take a look at this post by Chris Coyier.
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.