I am using select in angularJS and want to have the dropdown from options scrollable as I have a large number of options and it doesn't look nice.
<select autofocus class="form-control" ng-model="operationName" ng-options="operation for operation in operationNameList" style="width: 440px">
I tried adding a css class but that doesn't seem to work as well.
.dropdown-menu { max-height: 40px; overflow-y: auto; }
Related
I use PrimeNG AutoComplete inside PrimeNG Dialog and I list elements below the AutoComplete in this dialog.
I want to do:
The max-height of the modal dialog is 300, if the added elements' total height is bigger than it then modal's scrollbar should be visible.
When there is no element in the list, the AutoComplete's suggestion list should be visible over the dialog.
But when I set the overflow property of the modal or not, the AutoComplete suggestion list is displayed inside the modal. Is it possible to make 2 elements as shown below? I also display scrollbar when the total elements in the modal are 10. Any idea?
Here is CSS style:
body .ui-dialog {
overflow-y: auto !important;
max-height: 300px;
}
body.ui-autocomplete-panel{
position: relative;
z-index: 9998!important;
}
add appendTo="body" worked to me
I'm having a bit of trouble moving the bootstrap-select selectpicker plugin. The docs at http://silviomoreto.github.io/bootstrap-select/ don't seem to indicate that this is ever an issue. Modifying the select that the custom select is based on does not seem to move the custom select, and using js to alter the css of .select, the css class for the element visible on the screen when using the selectpicker plugin, results in a flash from one position to another. It's not pretty.
Does anyone with experience using bootstrap-select.js think they could lend a hand?
Things I've tried:
select {
display: block;
margin-left: "insert offset here"
}
.select {
display: block;
margin-left: "insert offset here"
}
select {
display: block;
margin-right: "insert negative offset here"
}
.select {
display: block;
margin-right: "insert negative offset here"
}
Css seems to be overwritten when .selectpicker() is called.
$(document).ready(function() {$('.select').css('margin-left', '50px'););})
// Nothing happens because selectpicker is still being initialized.
setTimeout(function() {$('.select').css('margin-left', '50px');}, 10);
// Results in a visible flicker and is not guaranteed to work because of race conditions.
var ddlViews = $('#ddlViews').data("kendoDropDownList");
ddlViews.list.width("auto");
I have added width to be auto but its not working, also the width of the dropdown box gets the max width of the item selected and overflows out of the box. I want the dropdown box to have a fixed width, but the dropdown list items should show contents in single line. As the normal dropdown would work.
.k-list-container{
min-width:126px !important;//give a min width of your choice
width: auto!important;
}
.k-list
{
width:auto !important;
}
link to js fiddle
We can set width in 2 ways for Kendo UI combobox list width.
Answer-1
*For static way*
// get reference to the DropDownList
var dropdownlist = $("#size").data("kendoDropDownList");
// set width of the DropDownList
dropdownlist.list.width(500);
Answer -2 Dynamic way using css
.k-list-container
{
white-space: nowrap !important;
width: auto!important;
overflow-x: hidden !important;
min-width:243px !important;
}
.k-list
{
overflow-x: hidden !important;
/*overflow-style: marquee;*/
overflow-y: auto !important;
width:auto !important;
}
This above css code will work for in dynamic data load.
.k-dropdown {
max-width:10em !important;
}
Add these to your CSS and it works, the width would be the max-width you want to specify so that the dropdown box is of this max-width, whereas the contents/items would be in a single line.
The !important property forcefully adds the style you would like to have. Also it does override the width calculated by kendo.
Thanks for answering.
Hope this helps !
Raza
Follow this answer to set width on your Dropdownlist : Kendo dropdown width
.k-dropdown {
width: 250px;
}
kendo has now full support for that, with the autoWidth option
<input id="dropdownlist" style="width: 100px;" />
<script>
$("#dropdownlist").kendoDropDownList({
autoWidth: true,
dataSource: {
data: ["Short item", "An item with really, really long text"]
}
});
</script>
To set dropdown box fixed width(for list only), use
ddlViews.list.width(200);
To set fixed width for dropdown whether list is active or not, define width in css as
<select id="ddlViews" style="width:200px;" >
<option></option>
</select>
I was able to show option content in a single line through css as
ddlViews.list.css("white-space","nowrap");
So despite my attempts to find something online to answer this issue, I have had no luck.
I have been trying to create a "mostly" css approach to adding horizontal scrolling to a select list.
However, if I have a select inside of a scrollable container where the container height is shorter than the select's height (to trigger a vertical scroll on the outer container), then the scrolling behavior is either wonky (in the case of a normal select) or none at all (in the case of adding a multiple="multiple" attribute to the select) in IE or Chrome. But, it does seem to function properly in FireFox
Question: Is there any css/html strucuture work around? Any alternative jQuery/js workaround?
http://jsfiddle.net/Qn6TH/3/
div.ScrollableSelect { overflow: auto; }
#availableCodes { width: 600px; height: 1715px; }
<div class="ScrollableSelect" style="width: 300px; height: 300px">
<select id="availableCodes" multiple="multiple">
</select>
</div>
I'm using the jqTransform plugin to style my form elements, which has led to a slight problem with my select boxes. It appears the select box is hidden and replaced by a custom DIV containing a list, etc.
I've managed to get the plugin firing the select's click event when something is selected from the list, but I'm having a little trouble updating the visual list - it appears the plugin doesn't support ajax update out of the box.
Does anyone have experience of performing ajax updates on selects transformed by jqTransform?
Transformed select looks something like:
<div class="jqTransformSelectWrapper" style="z-index: 8; width: 63px; ">
<div>
<span style="width: 62px; ">Petrol</span> </div>
<ul style="width: 63px; height: 24px; overflow-x: hidden; overflow-y: hidden; display: none; visibility: visible; ">
<li>Petrol</li></ul>
<select id="fuel_type_id" name="fuel_type[id]" class="jqTransformHidden" style=""><option value="1">Petrol</option></select>
</div>
The plugin won't transform an already transformed select (you can force it to by removing the jqTransformHidden class, but that just duplicates the visible select).
I wonder if there's some clever jquery I could use to return the select to it's former state and then perform the transform again?
Thanks,
Paul
following did it for me:
function fix_select(selector) {
var i=$(selector).parent().find('div,ul').remove().css('zIndex');
$(selector).unwrap().removeClass('jqTransformHidden').jqTransSelect();
$(selector).parent().css('zIndex', i);
}
fix_select('select#my_updated_select_box');
The firing of the on change event can be easily triggered by applying this fix:
http://www.polemus.net/2011/06/jqtransform-option-change-not-firing.html
For the updating I had the same problem. I fixed this with a extra function that I call after the original select gets updated.
It looks something like below:
function fix_select(selector) {
selectedVal = $(selector).children(':selected').val();
$(selector).children('option').removeAttr('selected');
$(selector).children('option[value="'+selectedVal+'"]').attr('selected','selected');
$(selector).removeClass('jqTransformHidden');
$(selector).css('display','block');
$(selector).prev('ul').remove();
$(selector).prev('div.selectWrapper').remove();
var selectElm = $(selector).closest('.jqTransformSelectWrapper').html();
$(selector).closest('.jqTransformSelectWrapper').after(selectElm);
$(selector).closest('.jqTransformSelectWrapper').remove();
$(selector).closest('form').removeClass('jqtransformdone');
$(selector).closest('form').jqTransform();
}
After you updated your select options, just trigger the following code:
fix_select('select#my_updated_select_box');
It maybe isn't the prettiest solution, but it works just wonderful for me.