Can someone tell me what might cause Firefox to render the selected item in a select list off center vertically?
This is happening in CRM using Jquery Steps and Validation. Not sure if that is a potential source of the issue/css conflict or not.
Select list displays normally in Safari and Chrome.
I am setting the width of the select list in jquery
$("#state").css("width", "180px");
No other styling is being intentionally applied to it.
It's probably because there is not enough room. Those drop-down boxesneed a little bit extra room to fit the text in. It's an easy fix really, just add a bit more height to the css.
Related
On IE the input[type="text"] is not editing and also, I am not getting scroll bar for the list by using overflow by setting height in IE. In chrome it is working fine.
Is there any hack code to make text box editable?.
I want make the text box editable.
I also, want to get scroll bar for the vertical list items in IE
I searched in this stackoverflow. Not able to get proper solution
If anyone can come up with the solution it would be great.
I am thanking you people in advance.
I've been struggling massively to understand this issue and how to fix it.
Essentially, using a standard select2() box, when loading the page, the selection box starts at a slightly larger sized box with a small font and then resizes itself to a smaller sized box.
I am experiencing this issue, and if you look at https://select2.github.io/examples.html
You will see this happens on several of the examples (at least using Chrome)
I cannot reasonably reproduce this error and am using a super standard
$('#myselect').select2();
Is there anyone who can give me some sort of idea why and when this resizing would occur?
EDIT:
I've discovered that the issue has to do with the fact that it starts with Bootstrap styling, and then select2 adds classes to it, thereby changing the formatting of the output.
For whatever reason, I've struggled to exactly emulate the css properties of select.form-control without select2 as looking the same as with select2, despite painstakingly looking over the computed css properties.
I would very much so prefer to have the solution above - where the select before and after select2 adds classes is visually identical.
For now however, I have created a makeshift solution which is
In css:
#myselect
{
display:none;
}
Once select2 loads the select completely, it will become visible.
The issue with this solution is that the bar will temporarily not show up immediately upon loading the page, and so it will look like it "pops up" on your page.
When I dynamically add option elements to a select element with a size of say 10 on IE, a scrollbar does not appear once my list of options exceeds the height of my select element, and I am unable to scroll to the rest of the options. This only happens on IE and is an issue when dynamically adding/removing options. Anyone know of workarounds? I've tried creating wrappers and one approach that might work is re-rendering the entire select element each time, but that is wasteful
I don't know the solution to this specific problem,
but you get to ignore a lot of the hassle with cross-browser support on UI elements by using jQuery UI.
If it's possible, you should take a look at https://jqueryui.com/selectmenu/
It's more easily customizable, so if the default select-box' off-by-one pixels annoy you, you can get around that too by using it :)
I am using the scrollview to contain a group of div widgets. So, that many widgets may be contained in a small area yet usable. However, the form dropdown input seems to be buggy/ completely messed up because it wants to scroll with it. In Firefox I have to right click then select for it to pick anything and in chrome it just blacks out the div until I select something and it all comes flying back. Is there a way for me to tell YUI to not scroll when selecting a form?
Thanks.
I have a script that lets you put a link at the bottom of some text so you can reveal more text. It works great in Firefox. When you click the link, the div appears and the other parent divs expand with the growing child div. But the parent divs don't expand in IE. The text actually disappears behind the row (this is in a table created with divs) below. I want it to push the next row down so that the rest of the text appears.
Also, my images seem larger in IE than they are in Firefox. Can I scale the images a little bit with a conditional statement? If so, how?
Have you considered using something like the JQuery Accordion? It's a quick way to accomplish something like you're going for, if I understand correctly.
you have more than one problem, anyway images with fixed sizes should render the same across browsers. For the first problem with the link you should post some code. I suggest you to check if your script throws some errors in IE using the IE developer toolbar (bundled with IE8 or downlodable here from Microsoft)