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.
Related
Can some one give me any advice, how can i solve problem with navigation in the scollable area from react drei (https://www.npmjs.com/package/#react-three/drei) tools in front of Canvas 3D background. When i am trying use common navigation between sections with section id="hero" and Banner area. It is working, but scroll area working is scrolling my content with css property translate: translate3d(...). So if i use my tag with section id. It scrolls to the given id but than i am not able to scroll back to the upper sections.
Here is my code:
I was expectig regular behavior of tag navigation
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
I am looking for a split view in react js , i am using chakra ui for my layouts and i am not able to achive it .
Left Pane is Menu which has a fixed height (no scrolling needed)
Right Pane is the page which gets loaded every-time user selects an option in left menu.
Right pane should be scrollable.
You should give a try on the Choc-UI Layouts for achieving this:
https://choc-ui.com/docs/application-shells/sidebar-layouts
Or here too:
https://chakra-templates.dev/navigation/sidebar
On the links you will get previews of components that have a side bar on left side getting th full height of the viewport, also a sidebar and a container for your app content or other components.
This section is independent of the sidebar and navbar showed on the previews. You can access the code with the show code option on each previo (top-right location)
Try removing the navbar and modifying the width of sidebar, and you will get a split version of the layouts as you are reaching for.
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.
I am using a BorderLayout and trying to resize the center region when the left side panel is collapsed. My center region is a tab panel. One of my tabs contains a grid panel. I want to resize any panel that is in the center region tab panel on collapse.
App.centerTabPanel is a reference to the tab panel in the center region.
App.mainPanel is just one of the tabs I am testing the resize with.
Nothing gets resized, I have my tabs with layout "fit". The tabs with a gridpanel do get resized only when I reload the store.
Here is my code:
Ext.override(Ext.layout.BorderLayout.Region, {
onCollapse : Ext.layout.BorderLayout.Region.prototype.onCollapse.createSequence(function() {
//App.centerTabPanel.doLayout(); //doesn't work
//App.centerTabPanel.getActiveTab().doLayout() // doesn't work
//App.centerTabPanel.syncSize(); // doesn't work
App.mainPanel.getStore().reload(); // this works, when the store reloads it resizes the grid
})
});
Try to add config option split : true to all items(regions) within border layout