i am adjusting a parent div to fit clients browser area.
-> in chrome i have used the zoom property which correctly scales all elements inside including combobox
-> And in mozilla, it doesn't scale the 'options of the combobox', it actually lies away.
<div style="transform: scale(0.8);">
<select>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
Fiddle
i found the same issue question here : Here but this only talks about listing issues.
Definitely looks like a bug in firefox. I too was facing similar problem. As a temporary hack I replaced my select boxes with a light weight jQuery plugin called selectric. See - http://jsfiddle.net/19mkxd8g/5/
$(function(){
$('select').selectric();
});
Related
I have a multiple selector in my view which works as expected except when I reset the list using JavaScript.
Before the list is reset there is no vertical scrollbar and after it has been reset lots of empty space is added below the views footer creating a vertical scrollbar and I don't know why this empty space is appearing.
Here is a before screenshot of my view:
And this is the after screenshot when the reset list button has been clicked:
The steps I take when causing this issue are:
Select one or more items in the list
Click reset list button
Chosen multiselect refreshes correctly, but the CSS issue occurs
My code decleration, which works fine minus the unexpected CSS behaviour, is as follows:
<select id="chosenMultiSelect" multiple="multiple" >
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
<option>Item 6</option>
<option>Item 7</option>
<option>Item 8</option>
<option>Item 9</option>
</select>
<button id="btnClear" class="btn btn-default">Reset list</button>
<script type="text/javascript">
$(document).ready(function () {
$('#chosenMultiSelect').chosen({ width: '100%' });
$('#btnClear').click(function () {
$('#chosenMultiSelect').val('').trigger('chosen:updated');
});
});
</script>
Other information:
I have tested this in IE, Chrome, and Firefox, and it only seems to happen in IE's browser (versions 9, 10, and 11).
This issue doesn't occur if I click the reset list button BEFORE items are selected in the multi selector.
Update 02/11/2015
I have experienced this in other situations now. For example using it as a single select inside a Bootstrap Modal which would (not always but sometimes) result in loads of overflow being added to the page.
Has nobody else experienced this and do you know what is causing it? could it be other CSS defined somewhere etc.
Decided to have another look at this and found that somebody had reported a similar issue on the GitHub page.
I tried updating the version I was using from 1.0 to 1.5.1 and this didn't work, however the issue raiser did provide a CSS work around which doesn't completely resolve the problem but provides a much better solution but is dependent on different screen sizes.
Here is the CSS code that needs including...
.chosen-container .chosen-drop {
overflow-y: auto;
max-height: 400px;
}
bharos who raised the issue and provided the work around also provides the following comment
This is a workaround, as I understood that the chosen dropdown, when
in hidden state is having a large size, when it has large number of
options. So when we restrict the max-height this doesn't happen. Make
this max-height to a comfortable value according to your requirements.
But this is an issue which needs to be addressed from chosen, this is
just a workaround.
I have code like this
<div>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<select>
</div>
The div has a background image which should be visible through the select box. The issue I have is with IE7 where I am not able to set the background color of the select element to transparent.
EDIT: the image is only the down pointing arrow. The text is real text.
I have used this CSS but it doesn't work
background-color:transparent
Here is a screenshot to help better understand
Have you tried this?
.transparent {
filter: alpha(opacity=0);
opacity: 0;
}
IE7 is not really your best friend when it comes to web development. There are a lot of things that will not work.
There are however some good javascript plugins that you can use to override the default styling.
I personally use this one at work. when I need to support IE7 with custom dropdowns.
Since you are using an image to display text, try setting the font-size to 0px:
font-size:0px
Raised from the dead but maybe helpful for others coming across this.
Use this meta, which has to be the first thing under the head
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
This should work.
I am trying to create a alternative style to the select list on mobile. What I want is use my own styled button to activate the select list options. On iPhone and Android this gives you a popup with the options. I got this working by applying the button styles to the label for the select element. However, I am unable to properly hide the select element from view without also disabling its functionality. Does anyone know how to do this?
My html looks like this:
<label class="button-sort">
<select>
<option>Option 1</option>
<option>Option 1</option>
</select>
</label>
I need to set a bigger height for the option tags inside my select.
<select name="forms" id="forms">
<option value="1">Row 1</option>
<option value="1">Row 1</option>
<option value="1">Row 1</option>
</select>
I used the CSS code below for this purpose, but it did not work.
option {
padding-top:5px;
padding-bottom:5px;
}
Also I have tested this one, and again, anything happened.
option {
height:20px;
}
What is your suggestions ?
The implementation of select often uses built-in routines that are immune to CSS. This is why both methods fail on many browsers. On Firefox, they both work. The same seems to apply to any indirect methods one might try (line-height, font-size).
I could set a certain height for it using a style for the select tag:
<select name="" style="height:25px">
I added a css class to options in a select dropdown box for indention,
<select id="users" name="users">
<option value="[1,2,3]">Devs team</option>
<option value="1" class="member">user1</option>
<option value="2" class="member">user2</option>
<option value="3" class="member">user3</option>
</select>
It shows correctly on Firefox but not on Chrome. :(
Hope you guys could help me with this little problem.
You cannot reliably style select and option elements. Browsers typically like to stick to the OS defaults for these elements.
If you are looking to pad .member because they are children of the Devs Team, you may want to look at the OPTGROUP tag: http://www.w3schools.com/tags/tag_optgroup.asp
Found the answer. Sadly chrome doesn't support giving styles to option.