Dynamically sized select element IE not scrolling - javascript

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 :)

Related

Select list item partially cut off in Firefox

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.

Select2 resizing box during load

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.

What are the options for having a masonry like layout with flexbox with resizable and sortable elements

In my angular app, I'm using ui-sortable to sort an <ul>.
The elements itself are resizable.
This is similar to the setup I have:
And I would like that "4" and "5" use the space on top of them:
Here is a fiddle. Please note that this is an oversimplified example, and that the elements are actually resizable by the user and sortable.
Libraries like masonry won't do because they use absolutely positioned elements, that will undo the way the ui-sortable works, the resize won't push the element's either.
So how can I achieve this?
Have I understood correctly that this is not possible with a css only solution? That flexbox will get the height of the highest element and put that height to the "row".
Is there any js solution that won't rely on position: abolute, or rather, that it will still let me sort?
What are my options without getting rid of the libraries I already have?
What are my options getting rid of the libraries I already have?
I believe I have had a similar issue. I ended up going with http://isotope.metafizzy.co . Then once the user changes the size of the box (or order), you can run a method on the UI callback to re-layout the boxes: http://isotope.metafizzy.co/methods.html#layout

Chosen drop list outside parent div

I've been using the Chosen plugin for my app, but I've run into several major issues. They all come down to the same thing - the drop list is created as a sibling div to the select element, so it is forced to render inside the parent div. Which, in my case, is set to overflow: auto, which creates undesired behavior if the select is near the bottom of the visible area.
Obviously the solution would be to append the drop-down element to body and use dynamic positioning. I could probably fix it by spending some time with the Chosen code, but I was wondering if there's an existing workaround/branch (the only ones I could find are dated several years ago and are probably missing lots of newer features from the main version). I would imagine this is a pretty common use case (using it inside a dialog comes to mind, too).
Also, it should probably be able to drop up, too, in case it is near the bottom of the page.
Update: I expected this to be a known issue so I thought an example wasn't needed. In any case, here it is: http://jsfiddle.net/ooonqtox/

JavaScript Scrollbar Plugin recognizing manipulation on orginal element

I'm searching for a jQuery plugin which adds custom scrollbars to a div. I know, there are tons of plugins like this out there and i tried about 10 of them now with no success because i need a plugin with some very special features and i was wondering if anyone knows one which comes near.
Its very important that the plugin does not poll for changes of its content (setInterval) or that it can at least be disabled.
It must be possible to tell the plugin to update itsself manually when i know that its contents has been changed
The most important thing (which seems to be the thing that is missing on most plugins): the original element reference must be kept.
So if i do:
$("#myElement").coolScrollbarPlugin();
$("#myElement").append("<h1>New Content</h1>");
$("#myElement").coolScrollbarPlugin("update");
the plugin needs to recognize this. In the best case, the plugin takes the jquery element i applied the plugin on as its content pane to recognize any manipulation done on the element.
What i can't do:
$("#myElement").coolScrollbarPlugin();
$("#myElement").coolScrollbarPlugin("getConentElement").append("<h1>New Content</h1>");
$("#myElement").coolScrollbarPlugin("update");
This limitation is due to the surrounding application framework which will do manipulations on the scrollable elements that i'm not able to affect.
Are there any plugins that you know matching all this criteria?
Are there other ideas on how to achieve this?
If you get scrollable element by id or assign element to variable before applying scrollbar, you can try jQuery Scrollbar. The only change that is made - element is wrapped into another element with the same classes (to apply CSS styles of source element's height/width & design for scrollbar).
You can disable content/container size cheking using option autoUpdate:false and call init function to recalculate scrollbar sizes after update.

Categories