Is there a way to make the fluent ui panel smaller in height? https://developer.microsoft.com/en-us/fluentui#/controls/web/panel
My page has two divs. One header div and one content div. I would like the panel to occupy/open only the same height as the content div. Thank you
enter image description here
I couldn't find any examples
Related
I want to achieve this in Onsen UI:
Notice taller toolbar than standard, white overlay burger menu icon (for the standard element) and no bottom border between the image and the first item.
I think the burger icon is easy (assuming it stays in the right place with a taller toolbar).
The background image I tried manually setting the CSS property background-image in the browser DOM (using Chrome devtools) on the element and adding the transparent modifier, so <ons-toolbar modifier="transparent"> - unfortunately this got overridden so background image didn't show at all. I also tried doing the same thing on the within the toolbar and that didn't go full width and not sure the burger icon would have been on top anyway
Not sure how to override the toolbar CSS to make a tall/fat toolbar that shows the full height of the image and has no border - I've looked at the CSS for the toolbar in the browser DOM in Chrome Devtools but can't see how to modify it correctly
Ideally need this to be able to cope with different device widths or portrait/landscape orientation.
Any suggestions much appreciated. Thanks.
I incorporated an accordion in my sidemenu as seen in the image. The Home and Logout are not in the accordion, so their height differs. I request for help on how to reduce the height of the accordion header.
I also request for help on how I can remove the border of an accordion. I tried setting the border to empty in the accordion's UIID but it didn't work.
You can reduce the padding and font of the elements in the accordion to reduce the height of the accordion. This also lets you control the border.
You can find the applicable UIIDs in the component inspector tool. Specifically UIIDs to look at would be AccordionArrow and AccordionItem.
fiddle here.
If there are many panels in the accordion they vertically just start bumping up against each other and can't be expanded. I would like to make the total height of the accordion the height of the headers plus the height of one panel body (expanded). And then the parent panel should just have a scrollbar to show that amount of height. This way there is always an open accordion and you can scroll down to any header and instead open that one.
Is this not possible?
If I turn the layout of GroupListView to vbox intead of accordion I then get what I want but unfortunately when you expand/collapse the panels, the animations are all messed up (doesn't work like the accordion)
In ExtJS 5.1.1, setting fill: false on the layout declaration seems to produce the desired result.
How to nest border layout panel inside the Ext.container.Container and container.Container is rendered to a div ?
The main reason for this type of rendering is that, to show a logo at the top of the page.
NOTE: viewport renders in whole browser. so, it cannot be used to display the logo at the top of the page.
Please help.
Do not confuse border layout with Viewport container. Viewport can't be rendered to a div but an ordinary container can be, and you can use border layout with any kind of container, including Panels. Just try it out.
Hi i have a viewport with two region west and center west holds panel for tree and center is a tabpanel iam usin the applyTo:div to render the panels but the problem is the jsp page im rendering to already has a header and footer when i render the viewport it goes out of the browser view and also iam not able scroll down to see all the contents..is some one has any idea about this please help...
As the ExtJS docs state:
The Viewport renders itself to the
document body, and automatically sizes
itself to the size of the browser
viewport and manages window resizing
So you don't need a viewport in this case: just render a panel with a border layout into the same div as you were rendering the viewport. Size the div with CSS so it takes up the area between the header and footer.