i am trying to make my general layout in primefaces, with 5 different regions (top, left, center, right, bottom).
I already had try a full layout page but in the center container i need a tabview with scroll bar only in the child element and not at center container. If my implement this image layout with full layout page, the scoll bar will be present on the center container. How i can do this?
I dont want to do this with divs. I only want use primefaces components.
thanks for all your help!
Related
In the image below, I have two Divs, each one is inside an ion-slide, they move horizontally because they are in the ion-slide component (DivA and DivB)
Inside the DivA (blue), as shown in the image below, I have a Div (DIV-SCROLL) (red) that should have a horizontal scroll as well. However, when trying to scroll on the DIV-SCROLL, the ion-slides moves the entire DivA (blue) to the left.
What do I do so that the Div DIV-SCROLL has its own horizontal scroll?
Just add css class "swiper-no-swiping" for div with horizontal scroll.
Refer to SwiperJS api
I'm trying to center a 940px widget in my page.
In the layout panel it's not possible to set Left and Right to auto at the same time.
So far I can only attach a block to left or right. Is it possible to center it to have all the element to stay in the center on large display like stackoverflow.com ?
It is possible to do that. An approach that you can take is to change the page layout to vertical.
Then change the widget's Layout align attribute value to center.
I hope this information helps!
On my site, I've created a flex box which fills the whole window. It has a width of 100% and a height of 100vh. I've placed a text and a button in the center of it. Now I want to add a footer to the page. If I place the footer under the div (flexbox) It'll only show up if I scroll down a little bit. So can I create another div inside the flexbox which will place it's items in the lower right corner of the page?
Without code it is hard to help but maybe try in the css float:right
Image I have a Layout with a fixed width column that is centered on the screen. This Layout has a header bar that for simplicity's sake has a fixed height.
Is it possible to have that header bar stay in place but make it seem like it extends all the way to the edge of the window on one side?
Let's say the header bar has a blue background and is 50px high. So the area to the right of column should also show a bar that has a blue background and a 50px height.
The only working solution I found was to use JS.
Get the window width, the header width and absolute position a super wide div so that it matches the end of the header. Then add a resize event handler (preferrably debounced) to adjust the position if needed.
This is not the solution I was hoping for. Any alternative (CSS) solutions are very welcome.
iam currently trying to create a "split view" site with a scrollable navigation bar on the left side and a content area on the right.
The navigation area on the left contains a search field (with a submit button) and below there is a scrollable tree view similar to windows explorer.
I looked around and found solutions for scrollable divs and divs that fill the rest of the height in a window but combining those gives me some headache
Iam looking for a solution without absolute positioning because the created page will be embedded somewhere else where this would break things.
Here is a demo of what i tried so far: http://codepen.io/anon/pen/Aesgk/
As you can see, instead of 2 scrollbars as intended, i get a third one on the right because the navigation area's height.
Thanks in advance!
Try this CSS
height: 100%
overflow: scroll