I use selectize for the dropdown function,
However, I can only show 5 items at a time,
How could I show more items?
The problem is not on JS side,
Because when I set maxOptions: 2 there are only 2 items.
Here's the demo page http://133.130.101.114:8000/portal/index.html#/pages/scrum_board
any idea?
Have you tried scrolling down the drop-down? There are many more options in there if only you scrolled.
Edit: Now I understand you want to increase the height of the drop-down list. I've not used selectize before, but I guess if it has an even it fires after transforming the select box, you can add the following code to it:
jQuery('.selectize-dropdown-content').css('max-height','50%'); //or any specific height you want in px
or just put it in a timeout event callback on document ready:
jQuery(function(){
setTimeout(function(){
jQuery('.selectize-dropdown-content').css('max-height','50%');
}, 100);
});
Another screenshot to show the taller drop-down content:
Related
Currently on a page I am building I have heremaps as the background page, designs call for two elements on the left and on the right that I'm placing over the map element. Right now, when I'm selecting the options button on here maps to select the map view type and other options, those views get hidden as my right element covers it. I've noticed the here map logo has a z-index of 1. Is there a way to change the zIndex of the options button on the buttom right corner?
This code should work for you:
// assuming ui is instance of H.ui.UI
ui.getElement().style.zIndex = 999;
For more information see https://developer.here.com/documentation/maps/topics_api/h-ui-ui.html#h-ui-ui__getelement
I made a custom dropdown. In the last line of the table, scroll is created when dropdown is open. I need to scroll to see dropdown elements. I do not want this.
I want you to open up the body of the dropdown or enlarge the body. How can I do it?
Document is already enlarged by enlarged content/element, scroll shows that. You need only scroll to view entire enlarged element, f.e.:
elmnt.scrollIntoView(false);
Real problem (using react) is that should be done after change state and rendering enlarged element.
I probably would use setTimeout called from setState callback. It's quite common way to be sure it's called after updating state/view. You'll find examples on SO.
I have problem with bootstrap drop up/down button.
Button Menu doesn't fit well on page.
I am looking for way to dynamically detect position on page of that button.
Base on location button should automatically drop up instead of drop down.
Here is problem:
on "SHOW" and "Action" button. Menu doesn't fit on page (It extends container).
https://jsfiddle.net/yz0ex8c5/
https://jsfiddle.net/3ro502q5/4/
The same happens when the button is on top. It opens Dropping up Instead of drop Down.
This is very important. Couse I use this buttons with drop down and drop up in table that can be sorted. I use Bootstrap-table library to sort rows in table.
You could check the scrollTop position for the page, then switch between .dropup or .dropdown according to what is most suitable.
$(window).scroll(function() {
var scrollTop = $("body").scrollTop();
if (scrollTop<50) {
$("#showBtnGroup").removeClass('dropdown').addClass('dropup');
} else {
$("#showBtnGroup").removeClass('dropup').addClass('dropdown');
}
});
forked fiddle -> https://jsfiddle.net/wenz3v5r/
Have given the btn-group an id for easy access. The evaluation value of 50 is completely arbitrary, have just added a lot of <br>'s to the bottom and the top of the page - that must depend on how your site looks like IRL. You should do the same (or rather the opposit) with the Action dropdown at the bottom.
I am using asp.net in VS 2013.
I want to display a pop up window when a user hovers over a div. I have 3 divs on the page and they are each a square of approx. 50x50. When the user brings their mouse over each one I want a different pop up box to appear.
I have been playing about with the hovermenuextender to achieve this but Im not getting anywhere as it needs a control as its target. IS there anyway to achieve this with an Ajax control?
thanks
You can try this:
step 1: Keep the three pop ups with different ids in your html with style = "display:none;position:absolute;top:50%;left:50%;". and a classname popup.
e.g.
<div class="popup" id="1" style = "display:none;position:absolute;top:50%;left:50%;"></div>
step 2: Give classname (respective ids of hidden divs) to your divs on which user will hover and a parent attribute to your divs.
e.g.
<div class="showdiv" parent="1"></div>
step 3: now write following code:
$(document).ready(function() {
$('.showdiv').mouseover(function() {
$(".popup").hide();
$("'#"+$(this).attr('parent')+"'").show();
});
});
try prop if attr doen't work.
I was just wondering if anyone out there knows of a way to have a dropdown/select box set to a fixed width i.e. 125px, but when you open it, the dropdown portion will automatically expand to the largest item in the list, and when you select the item, have the dropdown resize back to the 125px size?
It does it in FF but no currently in IE.
Thanks in advance,
B
you can set the width with css using width: 125px.
Not sure if you can control the width of the popup part, but this will normally automatically resize, up to some arbitary limit.
To achieve the effect you are after, I think you'd need to use either some CSS 3 properties (which won't work in all browsers) or more likely some Javascript.
You could use the onFocus and onBlur events of the select box, and then update the style.width property accordingly. Let me know if you'd like some code samples!
Here's a quick jQuery solution that will resize the select box for you on mousedown - then change it back once something is selected or you click away.
var example = $('#some-id');
$(example).mousedown(function() {
$(this).css('width','400px');
});
$(example).blur(function({
$(this).css('width','200px');
});
$(example).change(function() {
$(this).css('width','200px');
});