I am trying to access the scrollbar styling in the antD Select component. I have found where to style the scrollbar but it is not functional. Meaning, it shows up when I remove the diplay: none from the style and change the color, but it doesn't scroll. Am I doing something wrong. In order to change the style I am doing something like this...
Also, I found a way to add a functional scrollbar using this code...
.ant-select-dropdown{
overflow: auto;
}
But this does not allow me to style the dropdown scrollbar. Instead I have to style it using the webkit which styles this everywhere and I cannot get it to fit exactly in the dropwdown. I was hoping to use the antD one, as it looks nicer, but it doesn't function for some reason. Any idea how to get this to work?
I found the solution here by setting this on the select element.
Related
Our application shows some select displaced in chrome
Options are displaced to left.
This happen when using multiple screen. Resizing screen fixe this issue.
We don't have custom css on options
Any idea how we can fix it.
UPDATED 1:
CSS select
When you want to use the padding property, your elements can go outside the div.
Force them to stay inside by using box-sizing: border-box;
This will maybe help you.
I have a filter bar for a table above the table set to become sticky at a certain height, this works great until you open the md-select options and it triggers the md-backdrop and applies inline positioning to the body and moves everything but the fixed positioned filter bar.
Is there anyway to disable the inline positioning that gets applied to <body> when the select options dropdown opens?
Thanks.
Just prevent body from ever getting set to anything other than what you want it to be with display:block !important or display:flex !important. Whatever you want really, it will override the inline css that angular material's javascript applies.
At the moment I've been using the css line-height property in the parent div to increase the line spacing, and this works fine for the text, and even <input> elements. The only problem is any custom controls like the JQuery spinner or Chosen will try to fill up this entire line height (as they're set to display:inline-block)
Currently it appears like this:
How do I get these widgets to appear the same height as the text? I mean the default <input> elements can, so surely it's possible?
Find the element class/id and on your own style.css you can customize it's property with !important But use of !important is not considered as a good practice. (But if there's issue on one-or-two places, i think that is Ok)
Another way can be, why not making changes on jquery ui css that you are linked to.
I am trying to use the Twitter Bootstrap Carousel
is there any way not display the vertical grey bars at both the sides of the carousel?
You can do it with CSS
.carousel-control.left,
.carousel-control.right {
background-image: none
}
jsFiddle
How to do it yourself:
Go to a site that has the bootstrap carousel. I went to the documentation page
In Chrome (or whatever browser you like) use Inspect Element to see a list of all the matched CSS rules. Something is giving it that styling, and it's going to have to live here.
Find one that looks like the culrprit and uncheck the box to see if removing that style makes a difference
Note: You shouldn't change bootstrap.css, but you can override it by placing your changed css later. If it doesn't work, try !important
Best of luck!
you can change "boostrap.css" file..(2.3.2/assets/css/bootstrap.css)
you can find and "#999" (color code) replace anything you want or delete.
I am rewriting CSS (don't ask why) in a way that I'm changing the style attributes via HTMLElement.setAttribute method. The problem sometimes occurs when I have computed styles that make no sense. For example (which happens most frequently), div parent has height value smaller than his child div element, in the computed styles. This makes some problems with the desired layout of the page. It is not easy, actually it is very hard, for me to change the algorithm that rewrites CSS, so does anybody know what is the cause of the problem and what would be the most appropriate way to solve it.
My assumption is that somehow some of the changes are not applied, thus I should force the css parser to recompute the values. Did anybody encounter such problem?
Assuming you are still trying to display your container at the height that you specify, even if it is smaller than the content that is inside it, you should use the overflow property.
overflow: hidden will cause the extra content to disappear.
overflow: auto will add a scrollbar to the container to allow you to scroll in the container.