I have 2 selection boxes states and cities, On state selection change I am writing a java script to display cities of that respective state by hiding rest of the cities. The problem is, height of the selection box dropdown is getting effected in chrome where as its appearing fine in firefox.
Is there a quick and proper solution for this?
i found a solution to this problem in this post myself
Height of an HTML select box (dropdown)
maybe you can check that one out. it helped me out a lot and i hope it helps with your problem aswell.
As i just saw there is a kind of dublicate Question right here
<select> HTML element with height
It got some good Ideas too. But i didnt check them all so far. Maybe you can find something in that post too
Related
I am using bootstrap select plugin to generate custom dropdowns in one of my projects but I am stuck in a very critical issue. The dropdown list is big and when dropdown is opened the screen moves/scrolls toward bottom a bit so that first few options can't be seen.
Issue can be seen here in this video:
https://drive.google.com/file/d/1SWQVvfOgO0-iLy0KjIf3sPEANKu8Nkpv/view
And if you want to play around please check here the color filter:
https://www.stylorita.com/new1/outfit-ideas.php
Important: I can not use the max-height or add a scrollbar to it for fixing, I must display it without scrollbar. Please anyone can help?
If I understand you correctly, the solution is for whatever reasons NOT a scrollbar, but you want the first entries of your dropdown list to stay in view, right?
Maybe JS scrollIntoView() may help: If you have the chance to apply a class to your first list entry, you could use scrollIntoView when the list opens (which is normally the case at getting the focus or on click).
You can find a short description of scrollIntoView on this page: https://www.w3schools.com/jsref/met_element_scrollintoview.asp
We have an online courses platform. We use Wordpress 5 with Eduma theme and Learnpress plugin.
I am trying to make a netflix effect on the thumbnails of my courses.
I successfully did it but on the first row of courses, the image is truncated.
I tried to make a minimum code to reproduce the issue and paste it here, but there are too many css coming from the theme and different plugins. Impossible to leave some minimum code.
You can see the issue on the homepage of https://formatine.com/ in the rows of courses. Pass the cursor hover a course and you will see the zoom effect.
The second row is fine, but the first row has the issue.
I tried to change the css of parent container because I thought something nested is cutting the effect.
I tried some z-index on different divs, but it didn't work.
After days of investigation, I came here to see if anyone has an idea of what I am doing wrong.
Please help.
After the research, what I was able to find was:
There is one overflow: hidden applied to one of the parent div with class name as thim-course-grid.
Removing it will solve the issue.
Can you check and update?
I have a strange behavior with drop down lists and button in my layout.
I have just made a fiddle here to illustrate how this looks like.
As you can see in the example, if you resize the browser the you can still open the lists or click on the Filter button which is ok.
When I do the same on my desktop, the first list will work properly, but the second and third list will not open as well the button in not clickable anymore.
I have spent the all day trying to fix this issue, unfortunately with no success at all.
Maybe someone of you guys have had the same issue or knows what is going on here?
Any help will be much appreciated.
I've encountered issue like that before when wrapper elements were stretching over other elements via zindex and couldn't track it down until i gave each element a background color and could see how they were transforming in size as i adjusted the window size.
Heyall,
For a few days I have been getting the following problem:
screencap
The image shows two bars. It only is shown like this in a built version of Cordova on iOS or Android. Not in if ran in the browser, so I can't inspect the attribute.
The second bar (with no caps) is the select attribute. What the first bar is, God may know. But God hasn't yet been so kind to tell me. Does anyone know why it is there and is styled as is? Even without any css it still shows. I only want to show the second bar, obviously. But the first one won't disappear. It always shows the selected option of the select below.
I have tried 'cleaning' the css of the select (Reset/remove CSS styles for element only) but this hasn't worked. Also assigning select:before other properties won't work.
Thanks in advance!
Okay I have been able to solve this by removing jquery-mobile v1.4.5. How exactly jquery-mobile caused this problem to occur, I don't know. But by exchanging jquery-mobile by fastclick.js I do get the functionality I want, but without the bugs/unintended features.
I am having an extremely odd issue creating a template for my zencart ecommerce website.
I find that many times I load the website my menu will break up and split over two lines as shown below.
The reason I find this behavior odd is that if I refresh the page it correctly displays.
Now I could understand how to fix this if it was consistently one way or the other but it seems to vary between the two with no obvious difference in the code... I am not sure if this is some sort of technical bug with chrome as I haven't been able to replicate it in other browsers however even if it is I really need a way of working around it. So I am curious as to whether anyone has had this issue before and if so how they got around it.
Link to live site: http://digitalmatrixonline.com.au/
Thanks Jason
If you add
white-space:nowrap;
To the div that contains the list it should prevent this, not sure why it's happening though.
Edit: here is a jsfiddle showing the technique http://jsfiddle.net/RM4S2/
Edit: No floats http://jsfiddle.net/BsGfu/2/
This is a really strange problem, and I was able to recreate the quirkiness in Chrome. While I don't know the direct cause of the issue, I think I found one way that works.
If you set the width of the second div within 'navEZpagesTop' that you are floating right that is wrapping,to 'width:485px;'. This seems to give the section room and does not wrap. If you want to leave more room for this expand without modifying the css you could set it to a much larger size, and float all the links inside of this to the right(instead of the left).