have a page with disabled scrolling. page contains in it's content two sap.m.Table. one table for the sake of a fixed header. it contains just columns. other table inside a sap.m.ScrollContainer's content. it contains the items. use case is that the items do not fit the screen's height. without a scroll container the items would fall over the screen's bottom. page scrolling is still disabled. now i'd like that the scroll container jumps in. and it should exactly fill out the remaining page space between the first table in the page and the end of the page. until the bottom of the page. the end of the browser window. is there any work around to achieve that the sap.m.ScrollContainer goes automatically over the remaining space? without a scroll container's set to a specific height.
work around: wrap the site's content with a sap.ui.layout.FixFlex: set a pixel value to the sap.ui.layout.FixFlex property minFlexSize. the sap.m.ScrollContainer with the sap.m.Table goes into the sap.ui.layout.FixFlex aggregation flexContent. now the parent of the sap.m.ScrollContainer has a fixed height. therefore the sap.m.ScrollContainer can resize itself based on this.
Related
I am using the Material UI Text Field component as a search bar in my app. On one of the pages, I have it in 2 spots, one on the outside of the page, and another inside my DevExtreme Data Grid.
See here
For whatever reason, this shrinks the search bar, despite it being the exact same component being used in 2 spots.
My question is, what causes MUI to shrink the height of their text input field so that I can fix it accordingly inside of my data grid?
I've tried adjusting line-height, padding, margin's, etc all inside the data grid, unfortunately to no avail. The only thing I've noticed is that deep in the inspector tool, the shrunken search bar has a height of 1.435em, and checking that off will cause the search bar to correct itself to the standard height.
I'm using a JSSOR slider that scrolls content horizontally. My issue is that the slide content is dynamic. An admin has the ability to add and remove images & text from the slider, however not all the divs are the same width. This creates gaps and/or overlapping.
I can create a code to get the width of each slide prior to the initialization of jssor, however I'm wondering if there's a way to apply $SlideWidth to individual slides by index?
Thanks.
We have many screens where different types of GWT panels are used.
One common problem across many screens is that, content size is derived at runtime. So, if I define a height for a panel(Vertical/Horizontal/DockPanel) and when any new components are getting added within panel or content is more, panel height remains the same. So we are not able to see the contents. UI look and feel becomes worst.
How do we handle the height problems? Do we have to manually code to adjust every panel/widget height when something gets changed in screen. Is it not a very bad way of coding?
Also, now we have datagrids at some places, if no of records are very less, we see a huge space left out below datagrid, not sure how do we handle these cases?
Updated below with few examples as per the comment:
Do you mean to say that whenever we know that content grows vertically, we can always choose FlowPanel. Because, some of the screens we have used Vertical panel/Horizontal Panel and inside that when user clicks something a new fields getting added and shown. So Vertical Panel/Horizontal Panel height automatically not getting adjusted. One more example is that we have main Vertical Panel within a Dock Layout Panel content area and inside that there are some widgets whose content may vary. So now if I use a FlowPanel to the content which varies in size, what about outer panels? Will get it adjusted? Again to say the kind of panels we have used - Dock Layout Panel is used with fixed header, footer, left menu and Content area. A scroll panel is used within Content area. All our different widgets go inside this which is mix and match of horizontal/vertical/datagrids..etc.
In GWT (and HTML) you can either set the height of a panel or let it expand naturally. In general, once you set the height of something, you lose the ability to let it expand naturally.
Some Panels in GWT implicitly set their own height (or require that you set their height) and so are never good choices for dynamically sized content. LayoutPanels and ScrollPanels, for example, can never adjust dynamically, and expect you to provide size information programmatically. FlowPanels and HTMLPanels, on the other hand, are great for dynamic heights and would rather you not set their height explicitly.
If you want a scrolling panel, of course you have to define how high it should be - how else could it know when to scroll and when to just get bigger? But, you can put a FlowPanel (which expands automatically) inside a ScrollPanel (which you have set at 800px or whatever). Then, as you add content to the FlowPanel, it will expand inside the ScrollPanel. Users can then scroll to see different parts of the FlowPanel.
Trouble-shooting tips:
Make sure you aren't setting the height on panels that you want to expand naturally
Make sure you ARE setting the height on panels that should always be the same size
Try using FlowPanels instead of Horizontal/VerticalPanels
*LayoutPanels and AbsolutePanels always need explicit sizes and can never grow dynamically as you add more content. Anything you want to grow with content should probably be a FlowPanel or HTMLPanel.
I want see the items of list box on scroll, On ZK site I found only way to do it is set height in Pixels or set the rows property to specific number of rows. but I want to set it according to the screen size is there any way to do so.
Try to use the BorderLayout to lay your components. Add your list to the center and it will display a scroll bar. Read about layouts (size, vflex etc.) first because they can be really tricky.
And read this also
I'm using a simple javascript toggle function to expand a div to show its contents. If the div is near the bottom of the screen, it expands and some of the div disappears off the screen.
How can I get the page to automatically scroll down to make sure the div is in view?
Each element on your page, including your DIV, will have a set of offset values relative to the document. You can get these via the $.offset() method. This will give you the x and y coordinates to the element on the page.
There are many plugins that exist in the wild (such as $.scrollTo() by Ariel Flesler) which will animate scrolling of your page for you, and even do so via a set of provided coordinates. You would join these two items together to automate a scrolling to the offset coordinates of your DIV.
Just make sure your DIV isn't taller than your viewport, or else you'll need to scroll even more to see all of it.