How to remove vertical scrollbar in a dropdown?
.someclass { /* or ID */
overflow: hidden;
}
Check this under Windows XP style menu
Many web-sites does not actually use the dropdown (select-option) natively in the code since it is very hard to style it.
They usually use a simulation of dropdown using other element and position absolute divs to mock-up the drop down and then they have full control on the styling.
Look at http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html
Related
I am using Quasar/VueJS for development. How can I remove the outermost scrollbar (this is for the actual body of the page).
So annoyed that I have already tried putting overflow:hidden everywhere but it is still there.
Since I have a scrollbar for my sidebar, I just dont want another scrollbar to be beside it, as it can be confusing for the user. As you can see, I am working on adding another scrollbar just beside the actual body of the page.
How can I get rid of the outermost scrollbar?
Codepen:
https://codepen.io/kzaiwo/pen/bGVrweM?editable=true&editors=101%3Dhttps%3A%2F%2Fquasar.dev%2Flayout%2Fdrawer
Working with Quasar, checkout the docs, more specific this class: no-scrollbar. apply this on the element of concern.
Adding the following to your main styling will make the scroll bar go away without losing the scroll functionality:
::-webkit-scrollbar {
display: none;
}
Be aware that this will not work for firefox and IE. More info:
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
.scroll {
overflow: hidden;}
Add this class to your css
<q-layout container>
Remove container from q-layout.
<q-layout>
https://quasar.dev/layout/layout#qlayout-api
You can hide the scrollbar without loosing the scroll behavior with css...
/* Hide scrollbar */
::-webkit-scrollbar {
display: none;
}
This works on chrome for sure, probably on Safari aswell, not sure (probably not) if IE and Firefox.
I need to add a horizontal scroll bar for drop-downs having larger option lengths. We are using Chosen jQuery for these drop-downs.
Below the current code for this:
$(".filterDropdown").chosen({allow_single_deselect: true,search_contains: true});
In the resultant code, I see that chzn-results css is applied which has overflow-x: hidden; property. I don't want to directly change this as it may impact UI elsewhere.
Is there a way to provide overflow-x: auto; style for these drop-downs?
I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.
You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.
Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.
The sticky menu on our site (http://462184.hs-sites.com/) is experiencing issues on some pages and not others.
For example the homepage, if you scroll half way down the page and try to use the menu, it hides momentarily. On the other hand we don't get this issue when on another page such as (http://462184.hs-sites.com/bookkeeping-plans).
Therefore I can only imagine it is some type of element on those pages conflicting?
Your support is greatly appreciated :)
Try removing overflow hidden from this element:
.header-container {
/* overflow: hidden; */
}
Just remove the line, or you can replace it with overflow:initial or overflow:auto;
I have a table and I want to assign a css hover to all its cells. But at the same time I have a div tag with a bg image and it has the same width and height as the table and its being positioned right on top of the table with position relative. How can I still assign the css hover to the cells of the table, because when I try it, it doesn't work, and I think it's because when I it's detecting the div tag...
Does anyone know the solution to this?
NOTE: it has to work with IE9 (can't use css3 either)
check this post
It can be done using CSS pointer-events in Firefox >= 3.6 and Safari >= 4.0. Probably some Chrome version too. Unfortunately, I don't have knowledge of a cross-browser workaround.
#overlay {
pointer-events: none;
}
There are 2 solutions:
1-Use the following code:
<td onmouseover="className='tdon'" onmouseout="className='tdoff'"></td>
then write tdon and tdoff classes in css.
2- Use jQuery
$("td").hover(function() {});