How can I setup a container so when the window size is too small shows a scroll in order to see all the elements that doesn't fit in one go, but at the same time, if a child shows a floating elements it is allowed to exit the bounds of the container.
I am currently using a Material UI Card, which has some elements:
As you can see in the image, it works while using overflow: auto for the CardContent.
Unfortunately, the floating element for the Combo1 component is not allowed to be shown outside:
And if I remove the overflow and/or set it to overflow: visible, the floating element shows fine but the contents doesn't scroll anymore:
Is there any way to allow only the floating elements to be shown outside a parent with hidden overflow?
Your core issue is that A) if you have content inside an element, B) that content exceeds the element's width, and C) that element has an overflow style that hides content that content will be hidden. This is just how CSS works.
Similarly, if you don't hide your overflow, there's no way to have the browser add scroll bars to that content. So if you want scrolled content you have to have an appropriate overflow style (auto scroll-y, scroll) to get the scrolling you want.
The solution, which will feel unnatural in a React app (where you're used to keeping all your UI within your component's HTML element) is to keep any UI bits that need to be shown outside the overflow, outside of the element with the overflow style.
They can still be in the same component, they just have to be outside the main element. Then, you can use some onComponentDidMount (useEffect) code to position that UI to appear next to the scrolling UI. In other words, you can't change overflow or your DOM structure, but you can use CSS to make your UI look the way you desire with a different structure.
Something like:
const YourComponent => {
useEffect(positionUiBitsNextToMainUIUsingRefsOrSomething);
return <>
<UIBits/>
<div style={{overflow: 'auto'}}>
<MainUI/>
</div>
</>;
}
As for doing the positioning part, you'll need to use refs (useRef) to access the DOM elements of your UI, so that you can position them. Prior to React I would use jQuery UI's position function to do this sort of thing, but haven't needed to do this in React (or anywhere else) in a long time, so I don't have a better recommendation.
Whether you use a library or not though, essentially you'll want to use position: absolute styling (and some calculations on your main UI's position) to move the UI bits to where you want them.
Related
I am having a one page landing page with elements who enter when the page is scrolled down. This is achieved with vue transitions. Problem is that the elements have variable element heights (f.e. paragraph), which makes the scrollHeight of the document change, whenever an element transitions in. I think for this case v-show was invented but it only seems to work with static element heights. As soon as the element height differs from the static reserved space (element's min-height) of v-show, the scrollHeight changes and the page jumps.
The only workaround I was able to find was by dumping vue transitions and instead use purely CSS and opacity property, basically hiding the elements and fade them in when element scrolls into viewport.
Is there any way to use vue transitions for this without the document scrollHeight changing, leading to an unpleasant "scroll jump"?
I'm trying to make a kind of chat room. When new messages come, previous messages move up and dissappears when they leave the div.
I want to make the div scrollable to see previous messages but overflow: scroll doesn't work.
I tried to set elements to position:relative instead of absolute but then the elements position themselves chaotically.
This is what I have: https://jsfiddle.net/2Lgq1zfa/1/
I checked your code but there was no .ventana class defined for js or html. However to make scrolling work on absolute positioned elements you should define width and height so the browser identifies when the overflow happens.
I hope this is what you needed. ;)
As you know, the horisontal scrolling is required it is placed on the bottom of element that is not easy to find when the bottom or element is outside of the view port. Is there any css solution (even with partial support) to change the place of vertical scrollbar?
(there is a jquery plugin for that available that create a mock element on top of overflowed element and keep its scrolling position with the scrollbar of the targeted element, it's not what I am looking for, as the created element make trouble sometimes for styling).
I'm having some trouble with the current layout of my polymer site, specifically with regards to nested components and their associated scrollbars. I'll preface this by stating that by absolutely no means am I a CSS guru. I wish I was because I probably wouldn't be struggling with this as much as I am. Also feel free to jump straight to the jsbin URL as my issue may become apparent.
The situation:
I currently have a nested core-scaffold element, whose main content often requires vertical scrolling and thus it's vertical scrollbar becomes active as required. However, as it is nested, it's container(s) can also have scrollbars enabled. Ideally, I'd like a single scrollbar on the highest level element which can scroll the scaffold's content to it's full vertical extents, yet also cause the topbar to slide away as it does now when scrolling down. I've also noticed that the height of the scaffold's main content is determined by the first page that is loaded into it. Subsequent page loads with different heights does not cause the scrollbar height extents to change accordingly.
Please note that I've simply inserted an iframe loading external content into the scaffold's content section for the purpose of this jsbin demo. My actual site loads a bunch of data driven collapsible height containers within the content pages, wrapping horizontally as needed. Due to their collapsibility, their containing page therefore has a dynamic height. That height can vary from page to page as container heights within them vary.
Here is the jsbin. Whoever can remove me from this css hell will be considered my hero...
http://jsbin.com/muniqi/1/
In my initial jsbin sample code, you'll notice I have specified core-pages height as '100vh' the top level polymer element (i.e. my-app-element). The second level polymer element (i.e. my-scaffold-page-element), loads within the aforementioned core-pages. Therefore, the nested scaffold element's maximum height is 100vh. Further down the chain, when the scaffold-element's main content area's height flows past its host's height limitation, it caused a secondary 'inner' scrollbar to appear, which has a different vertical extent than the original outer scrollbar...so trying to use the outer scrollbar alone doesn't effectively scroll the inner content to its entire vertical extent, forcing you to use the inner scrollbar as well to get the job done. Ugly to say the least.
Now that I know that is the case, one way to reduce the likelihood of an inner scrollbar appearing for the nested scaffold element's main content area is to change it's parent element's core-pages height to something much greater than 100vh (400vh?). Doing so solves the problem in a roundabout way. The outer scrollbar can now be used to scroll the entire vertical extent of the nested scaffold's contents without an inner scrollbar occurring.
In the new jsbin example (below), you can witness the 'fix', which also happens to remove the reliance on core-scaffold, instead preferring to utilize its individual components in a more configurable fashion.
http://jsbin.com/muniqi/3/
How do you test for a collapsed float, where a container element does not expand to take in floating elements, e.g. Div collapse after float css.
A collapsed float can be fixed by adding a css overflow:auto property to the container. However, if that overflow declaration is accidently deleted in a later edit, then the web page (or many pages if the container is used on many pages) can become unreadable.
Given that a collapsed float is not a CSS error and does not change the text on the page, how do you write a rspec test to detects if such a collapsed has occured?
If you have items that are floated within an element, then you'll need to clear the float at the end.
.clearFloat {
clear:both;
}
Here's a fiddle that shows what I'm talking about: http://jsfiddle.net/fishgraphics/gMr9m/
If you are using capybara then if the collapsed float overlays element that is needed in your tests, then you will not be able to click on the hidden element.
So the good news is that if the collapsed float affects functionality, your tests should pick it up. If it just affects the look of the web site, then you will not. But then again, what good developer cares about aesthetics without function? :).