I'm used Blazor to make a modal popup but I've noticed that the scrollbar automatically jumps to the bottom of the popup versus being at the top when the modal is opened. I used the basic overflow:auto in my css class and I tried using transform:rotateX(180deg) which does flip the scrollbar to the top of the modal, but also flips the text upside down. Is there a way to get the scrollbar to the top of the modal using only Css without flipping the text?
Related
I'm using this carousel with indicator buttons from daisyUI in a Nextjs app.
As can be observed in their demo, when clicking on an indicator button, apart from switching slides the page will also scroll such that the top border of the slide is at the top of the screen.
Is there a way of using this component while preventing the scroll?
Let's say we have a horizontally scrolling panel, but the bottom of the panel as off the screen. Thus, the scrollbar is positioned so far down that it is off the screen. Note that I am not talking about the scrolling position ( controlled via the Scrollable interface, for instance ), but the position of the actual scrollbar used to do the scrolling itself. Is there a way to do one or more of the following:
Position the scrollbar at the top AND bottom of the panel instead of
just the bottom of the panel
Move the scrollbar from the bottom of the panel to the top of the panel
Make the scrollbar hover at bottom of browser window ( which will not be the bottom of the panel, as stated above )
Thanks. Can be mildly irritating being forced to scroll to the bottom of a panel just to scroll it horizontally, because then you have to scroll up to see what ever data you wanted to see.
I have a bootstrap popover() being called on a navlink in my fixed header. However, when the user scrolls, the popover is left behind on the page; I would like it to follow the navbar, like dropdown menus do. If you add position:fixed; to the popover's style, it does follow the navbar, but then upon scrolling, closing, and reopening the popover, it now have a default position partway down the page. How do you do this properly?
I had this idea for a website of creating a fixed horizontal navigation bar that simply scrolls through the content when you press the menu items but I wanted to have an "introduction" div on top of it with a background image and a logo, lets say of 300px height that displays when you first load the page.
So the navigation bar would appear attached to the bottom of this "introduction" div and only when you scrolled past it would it become attached to the top of the window and become fixed positioned when you scrolled.
If you clicked a certain menu item or if you simply scrolled up to the start of the page it would attach itself to the bottom of the "introduction" div again.
Is this possible to do simply with CSS or would I have to use javascript to achieve this effect?
Thanks in advance!
I think you'll need JavaScript for this one. It will not be hard however. The only thing you need to do is to switch the positioning of the menu to 'fixed' when the menu would otherwise scroll out of the viewport.
I am using the ASP.NET Ajax toolkit slider extender inside a div which has a fixed height and set to overflow:auto. This is because I have numerous sliders in a table, and if the list gets very long then I want a scrollbar in the div. This renders fine in all browsers, however in Chrome and some versions of Firefox, if I scroll down to a slider and click on it then the outer (main page) scroll bar scrolls very far down the page where there is just white space. It is as if the outer scroll bar moves to where the slider would have been if the whole table was rendered on the page without the overflow:auto. Any ideas why this is happening and how to prevent it?