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.
Related
So I have a website that has a hamburger menu on mobile.
The problem is that whenever the page loads on a small device, the hamburger menu is way outside the view port to the right. This causes side scrolling issues and tons of white space.
I originally assumed I had written some css that was causing this, but after experimenting, I've come to realize that I do not know what is going on at all.
I have Gifs of the problem. I will also provide a URL if needed.
Heres the first gif
https://gfycat.com/GiftedPlaintiveEgret
So heres what is happening. I am inspecting the DOM of the webpage. If you pick any random element on the page, and edit a CSS attribute, then the menu fixes itself. It doesn't matter what element you select or what css attribute you edit; when you make an adjustment the problem is fixed.
Here is the second gif
https://gfycat.com/EasyIllustriousBlackbear
In this gif, the issue is literally fixed just by activating a CSS plugin called pesticide. Pesticide simply adds another external css sheet to the document that outlines everything in blue. Notice that even when I turn off pesiticde, my issue has been fixed.
And finally the third gif
https://gfycat.com/ContentRepentantBeetle
This is the most perplexing issue. It fixes the hamburger icon simply by resizing my browser screen. Obviously mobile users cant do this.
I truly don't understand this issue. I've tried to set a width of 100% on the nav element. I've written some javascript that when the DOM is ready, to add a css attribute to a a DIV in the footer and then remove it after a few seconds. This does not fix my issue. I would happily provide the javascript I wrote if requested.
Has anyone else ever had an issue like this?
EDIT
Here is another example. I use the browser Blisk to test my sites on multiple devices. Look at this
https://gfycat.com/BouncyFlakyGlobefish
When I first load up the site, I have my hamburger menu issue. When I tell the browser to view the site from a different device 'say switching from iphone 5 to iphone 6' it fixes the issue. I am so frustrated with this problem.
The white section's animation is increasing the width of the page (pushing the hamburger which is fixed to the right out of view), I'm not certain why this doesn't update properly after the animation is complete, but it would appear it requires a page re-flow before working correctly.
A possible CSS fix would be to add .bodymargins{overflow:hidden} though this may cause problems to other styling (untested on your site)
If this isn't an option, you could manually trigger a re-flow of the page shortly after loading (this is a slightly nasty option, but is better than it being broken)
Various re-flow options available here
It may be because you are using media queries and your browser width is not yet small enough for them to fire when you test.
If not, make the media queries and don't use the margin-left:auto for the smaller screen size?
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'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/
There was a similar question asked on here (not enough information was given) so no real solution was presented. I am using MixItUp to filter content within a framework (Foundation) based on a button being clicked. I noticed a weird movement that happens when a button is clicked. I have uploaded the files to be viewed here
http://cantaloupecreative.info/filter-code-snippet/
After the animation fires, I see page elements jump to the right a bit. If that's what you're referring to, take a look at the scroll bar. When there aren't enough elements on the page, the scroll bar disappears and everything re-centers, which is likely what you're seeing. You can avoid this by permanently enabling or disabling the scroll bar with CSS
overflow-y: scroll;
or something similar.
Okay here is what I uncovered in my search for a solution. WebKit is overriding the css change I am making to my body class. You cannot use overflow-y in chrome because of this. Now when I was making the change to my sass file it wasn't compiling correctly. After hardcoding the webkit fix into my stylesheet I was able to remove the scrollbar on all toggled divs with the following code.
::-webkit-scrollbar {
display:none
}
Obviously this only fixes half of the problem because now I am without a scrollbar. But it atleasts fixes the hoping issue.
I'm seeking to emulate the on-clickable input forms that pops up when an user clicks on the blue bar as shown above. My experience with front-end development is limited so I don't know what to call these elements exactly, but let's say they are on-clickable input forms contained in a box, which can lead to other on-clickable forms like the date picker as shown.
How do I do this in Javascript? Preferably with AngularJS, since the app I'm working on uses that. I don't mind using JQuery though.
I'm not looking for detailed step-by-step instructions (which I don't mind), but hints to get me started on cloning these features.
Thanks.
The pop-ups you see are going to be HTML elements, probably <div>s. The page will use JavaScript to create event listeners on the bars to hide/show them when the bars are clicked/moused over. The "pop-ups" are really just like any other element in the page, but with a higher Z-index and using CSS positioning (most likely absolute) to make it appear as a pop-up. It also looks like they're using the CSS arrow trick to draw the speech bubble pointer, though it could also be accomplished with images.
If I were to develop this, I'd break it down into stages like this:
Get my pop-up into my HTML page, and make sure it's not appearing anywhere.
Make it show/hide when I wanted it to (either when the blue bar is clicked, or when the user mouses in/mouses out of the blue bar).
Make it show/hide where I want it to (near the blue bar)
Make it look better (work on the CSS and get the pointer to work properly)
Convert that work into a second-level popout. The second level is going to be the exact same technique, but maybe the CSS classes are going to be different so the second bubbles look different and have the pointer at a different position.
Of course, you don't have to develop this functionality yourself. There are also a number of jQuery plugins you could use, as well as Bootstrap's popover component.