I am using popover of ngbootstrap on tables items click.
tables css:
{
position: relative;
overflow: scroll;
}
because I need to scroll on Y axis.
but the popover is not showed all ( I tried to put it on top also but same )
Are you trying to override bootstrap CSS? If yes, try overflow: scroll !important; to see if it does take change. It is not the most recommended way but you can have a workaround.
Related
I don't want to disable my horizonal scroll, I want it. Just that I want to remove scroll from certain elements like my NavBar, when I scroll, The Navbar also moves, and that makes it look ugly, I just want to enable horizontal scroll on a certain part of my site, (For Ex: A Table)
For Ref:
Disable scrolling on html/body and add it to your table like below
table {
display: block;
width: 100%; /* Needs to be adjusted accordingly */
overflow-x: auto;
}
Use tag in css
overflow-x: hidden;
I'm trying to make a CSS only sticky menu. This menu is inside another div under the header of the website. But as the user scrolls it should remain visible on the page. Googling and looking for answers here I found a good example of what I want to achieve: http://jsfiddle.net/g7x102s4/ (the red div)
My problem is that I'm doing this inside a React app where I can't install any other plugin, so It has to be done in pure CSS. I made a codesandbox where I'm trying to get it working. The menu class can float inside the menu container, but always visible to the user. It's the same effect from the first link above, just without JavaScript.
Is it possible? If so, how can I achieve it?
Add properties position:sticky and top:0 to your menu.
.menuContainer .menu {
background: red;
height: 300px;
position: sticky;
top: 0;
}
The chosen dropdown list always goes underneath the next available card element on the model.
I have tried
.class-of-dropdown {
position: relative;
z-index: 5000;
}
.modal-body {
overflow-y:visible;
}
Here is the jsfiddle example.
I have tried several fixes and none of them seems working.
Chosen dropdown within Bootstrap modal is hidden behind modal footer
How to Solve Option Select appeared behind modal using bootstrap?
Bootstrap dropdownlist z-index displaying under modal window footer
how to make chosen select go over parent div
There is a CSS that is causing this problem. After the modal opens, there is a div called "Another Heading" which has a class called card. This card class has a default scss which is causing the problem;
.accordion > .card{
overflow: hidden;
}
The solution is just to write the CSS given below to override this CSS;
.accordion > .card{
overflow: inherit;
}
I'm using simplebar library (https://github.com/Grsmto/simplebar) inside of an angular 6 project, when I added the simple bar in my html tag, it showed up an horizontal and a vertical scroll bar, so I want to show the vertical scroll bar only.
I've tried to hide the horizontal scroll bar with this CSS property:
overflow-x: hidden
and with this properties too:
width:100%" and "position:abolute" or "position:relative"
<div data-simplebar style="overflow-x: hidden">
<div *ngFor="let example of examples;">
<div>{{example.title}}</div>
<p>{{example.text}}</p>
</div>
</div>
I expect only to show the horizontal scroll bar, but it doesn't seem to work, I don't know if I'm missing something or some CSS property, or if Angular is causing this problem.
The SimpleBar library creates wrapper around your contents, hence the CSS overflow applied on your div will not hide the scrollbars.
Hide the horizontal scroll bar created by the plugin
.simplebar-track.simplebar-horizontal {
display: none;
}
and disable the scroll on scrollable div created by the library.
.simplebar-content {
overflow-x: hidden;
}
If you are using SimpleBar from simplebar-react, you can set the overflow in the style, as in the example below.
<SimpleBar style={{overflowX: 'hidden' }} autoHide={true}>
...
</SimpleBar>
try using both of these commands at once.
overflow-y: scroll;
overflow-x: hidden;
Old question, but I think there are still no good answer to it.
When I am in need of hiding the horizontal scrollbar that's what I do:
.simplebar-scrollbar::before {
background-color: transparent;
}
I created a horizontal gallery for a client's website, which functions fairly well, not the best way for a gallery, but it's what they wanted:
http://www.lisagleeson.com/galleries/fashion/
It was done using the following code:
#galleryWrapper {
height: 525px;
width: 100%;
background-color: #ffffff;
padding: 10px 0px 10px 0px;
float: left;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
}
They are reporting it's a little difficult to scroll these images left to right, part of this is because there is no scrollbar within the div. I need assistance on how to add that scrollbar without having to change over to using an iFrame..
In your case you can make "progress bar" which will display current scroll position, something like scrollbar. Listen for scroll event on slider and update progress bar position. If you're not planning 2-ways interaction (drag this progress bar and scroll slider), then JS code will be simple.
I can see only one problem here - progress bar design :) There are a lot of progress bar examples - scrollbar with track, simple scrollbar, paging with radiobuttons, etc...
If you want to make scrollbar draggable, you can use jQuery Scrollbar which hides native scrollbar, but still allows scrolling with mouse/touch (not JS emulation!). Scrollbars are fully CSS customizable.