I have designed a Dashboard. This dashboard, I used mat-expansion-panel. When expanded the content are showing below as expected.
what I want to achieve is
When I click on the panel should come in focus and when we expand expansion panel it should display at the top of the page.
Also when we click on any div as if it is scrolled below that content should come on top of the page.
Please suggest how to achieve the following.
Related
I'm using Bootstrap 5 grid layout (row, col-md4, etc.). When I go to print a page, the content is being cut off at the top and bottom of each page, like so:
What causes this? Do I need to add some kind of special markup to prevent this from happening?
My application is using a com.vaadin.flow.component.applayout.AppLayout with a header and a drawer (a standard layout inspired by misc. example programs). The lower right content part is populated with VerticalLayouts that have a #Route(value="foobar", layout = MainLayout.class) annotation, so when clicking on one of the "anchors" in the drawer the corresponding view is added.
That works all nice except for one thing that annoys me:
One of my views has four Accordion components (2 containing a couple of labels and a TextArea each, one containing some textfields and a chart. The forth contains some text fields and a button).
When I unfold these accordions then typically when expanding the third or fourth there is suddenly a second vertical scrollbar appearing just inside the outer, normal scrollbar. Already two opened accordions are higher than what fits a typical browser window, but here the size and the scrollbar is adjusted correctly. Sometimes, but strange enough not always, the scrollbar also adjusts properly with three opened accordions. Sometimes already with the 3rd, but definitely always with the 4th accordion that second scrollbar appears. The combination of opened accordions does not seem to play a role, i.e. there is no accordion that ALWAYS triggers that scrollbar appearing.
I find this second scrollbar most irritating and annoying when navigating the page. Any idea what could cause this? And how to force a single scrollbar only?
BTW: I experimented with wrapping the entire content inside a Div but that didn't change anything - the second scrollbar still appears as described above.
I have a button in bottom part of my website. On ios devices in safari browser, when i try to click it, it first opens footer section of browser and then i have to tap again to click the button. How can i click button in one tap?
Refer this GIF: https://i.stack.imgur.com/HyciL.gif
height: 100vh (this will set your content to have maximum possible height)
overflow-y: scroll (this will make that div/element scrollable and hence browser won't notice that you are scrolling when actually you are scrolling.)
Due to ios safari's default behaviour when you scroll on page it automatically hides header and footer of browser. Now if you have a button on bottom part of your website, you will have to tap twice to make it work. The first tap will trigger safari footer section (assuming you wanted to open footer section) and second tap will actually trigger click event on button.
One of main reason of this thing causing an issue is, whenever you scroll, safari notices that you have scrolled and you will keep scrolling. To show you maximum content on website it hides footer and addressbar. and that's why using overflow-y: scroll is mandatory.
P.S.
Because you are now scrolling within the div/element window.addEventListener('scroll', function()) won't work anymore. To fix that, you can use document.getElementById('your-div-id').addEventListener('scroll', function())
Apart from this window.pageYoffset will always be 0. To get pageYOffset, you can use getBoundingRect property of the div on which overflow-y:scroll was added.
For example:scrollPosition = document.getElementById('your-div-id').getBoundingClientRect().top
This will give you height from top of the div till you have scrolled.
Happy debugging
When you enter a large amount of content in the the RTE in umbraco, the RTE extends to accomodate the quantity of content. This can result in a lot of scrolling of the whole screen, such that the RTE toolbar scrolls out of the viewport. This can make it painful to apply styles to content towards the bottom of the RTE as you have to scroll down, highlight the content and then scroll back up to the toolbar before selecting the required style.
Is it possible to limit the size of the RTE in Umbraco such that the RTE scrolls instead of the whole screen, so that the toolbar remains visible?
Yes, go to "Settings" -> "Data Types" and select your rich text editor (or if you are using the default one then select "Richtext editor").
Scroll down to "Dimensions".
Here you can set the height (and leave the width empty)
Click "Save"
But keep in mind, if you change the default one then it will change it for all "Document Types" that are using it. So maybe it is better to create a new "Data Type".
I came across this question. I see that both stickyHeader and scroller works kind of the same in the way that they both keep the header row visible and there's a scroller bar on the side. Could someone please kindly explain the difference between them?
The stickyHeader widget makes the table head "stick" to the top of the browser, or table container (if options are set), window as the user scrolls down the table; this is similar to the sticky menu some sites use for site navigation. Check out this demo especially the last one on that page which is an example of nested tables stacking the sticky headers while you scroll down the document. There is also a css3 version of this widget which uses css3 transforms to position the table head at the top of the browser window.
The scroller widget, on the other hand, has to make a copy of the table header placed above the table, hides the original table header, then makes the tbody of the table scrollable, within a fixed height. So, the browser window position doesn't change which the user is scrolling through the table content, just a scrollable window of content is seen. If you look at this demo, you'll see that the table body is scrollable, but the head does not "stick" to the browser window (unless you set the scroller_jumpToHeader which forces the table head to become visible while scrolling up the document.