I like DockLayoutPanel cos it's quite solid. However, there's a big problem.
That is how to remove a Block (West, East, North or South block) out of a DockLayoutPanel?
Let say, i got this code
<g:DockLayoutPanel ui:field="centralDockLayoutPanel">
<g:center>
<g:LayoutPanel ui:field="mainPanel"/>
</g:center>
<g:east size="200">
<g:HTMLPanel ui:field="happyHTMLPanel" width="100%" height="100%">
Some more widgets here
</g:HTMLPanel>
</g:east>
</g:DockLayoutPanel>
I want to remove the East block out of the centralDockLayoutPanel. So i tried
getView().getCentralDockLayoutPanel().remove(getView().getHappyHTMLPanel());
But that doesn't work
getView().getHappyHTMLPanel().setVisible(false);
also doesn't work
Can we remove a Block (West, East, North or South block) out of a DockLayoutPanel?
You could try to do :
getView().getCentralDockLayoutPanel().remove(getView().getHappyHTMLPanel());
getView().getCentralDockLayoutPanel().forceLayout();
Or you can hide your panel:
getView().getCentralDockLayoutPanel().setWidgetHidden(getView().getHappyHTMLPanel(), true);
getView().getCentralDockLayoutPanel().forceLayout();
I always make their size between zero and non-zero, representing hidden and display respectively. By that, you can even add some animations when changing the size of the children.
Related
I am using TailwindCSS on my React project and I'm currently creating a custom popover or a tooltip if you will. Everything seems good except I can't seem to center the small triangle outside of the container. It's looking a little bit towards the right even though I set left: 50%.
<span
id='popover-last-seen'
className={classNames(
'absolute opacity-0 inline-block top-full left-1/2 -translate-x-1/2 -translate-y-20 px-3 py-2',
'bg-gray-700 text-xs text-center whitespace-nowrap rounded',
'transition duration-150 ease-in-out',
'after:content-[""] after:absolute after:w-0 after:h-0 after:border-4 after:border-gray-700 after:top-11 after:left-1/2 after:rotate-45'
)}>
<span className='block text-white'>
{standardTime(
timestampToDate(chatee.lastSeen)
)}
</span>
<span className='block text-gray-300 font-thin'>
{standardDateTime(
timestampToDate(chatee.lastSeen),
false
)}
</span>
</span>
I believe the problem here is the after:left-1/2. I tried to do after:right-1/2 and it went slightly towards the left. I'm not sure how to fix this.
According to MDN
When position is set to absolute or fixed, the left property specifies the distance between the element's outer margin of left edge and the inner border of left edge of its containing block. (The containing block is the ancestor to which the element is relatively positioned.)
Which means left: 50% will not center element but his left border will be exactly at the parent's center. You can see it here - as blue element has some width it quite obvious it is not centered
In order to center it your need to move element itself backward on a half of its own width
CSS property for this is transform: translateX(-50%) (where 50% - half of elements width, minus sign stands for moving backward). Tailwind's utility for this is translate-x-1/2
So your triangle should include after:left-1/2 after:-translate-x-1/2 or after:right-1/2 after:translate-x-1/2
I need to fit a Label and a Hbox within block layout.
<l:BlockLayout id="BlockLayout">
<l:BlockLayoutRow>
<l:BlockLayoutCell width="100%">
<Label
class="sapUiTinyMargin"
text="Hello All"
>
<Hbox>
</Hbox>
</l:BlockLayoutCell>
</l:BlockLayoutRow>
</l:BlockLayout>
Every time I press Ctrl++ / - to zoom in or out, the block layout contents change their position. E.g.: Label shifts right on zoom out and in on zoom in.
What should I do to stop this?
The thing is: BlockLayout is a responsive UI5 element. It is like a flexbox, and it will always try to adjust its elements to "optimize" (so it thinks) the space it has.
I am not fully aware of what you really want to do, but my advice will be to not use BlockLayout and try to place manually (css) your elements (since it looks you don't like the responsiveness of the elements...
Some properties like: justifyContent="SpaceBetween" justifyContent="SpaceArround" alignItems="Center".
Might be useful to you, I'm not sure.
How can I give a width in percentage of west element. I have a given size as "60" and also selected unit as PCT but it is not working.
<g:SplitLayoutPanel>
<g:west size="60" unit="PCT">
<g:HorizontalPanel>
.......
</g:HorizontalPanel>
</g:west>
</g:SplitLayoutPanel>
SplitLayoutPanel only supports PX unit sizes (see documentation).
If percentage sizing is a must and you can't use anything but SplitLayoutPanel for your task, you could calculate and set pixel sizes of your sub-panels programmatically, perhaps by extending the panel and overriding the panel's onResize().
Is there a good way to set the max size for a child of a SplitLayoutPanel? Right now I override its onResize method and call a JSNI function to set the right or width style properties of the parent div of the center panel's div, the right panel's div and the splitter panel's div, if the right/east panel is over 400px wide.
I noticed the splitter and the right panel's size don't even follow the mouse cursor and oscillate wildly between about 4/5 and 2/5 as wide as they should be based on where the mouse pointer currently is.
I have debug in eclipse and tried running it without eclipse and it's the same. I am calling super.onResize(), as well.
If I am understanding your problem correctly, you want to have a SplitLayoutPanel to occupy maximum space of the parent element. For this you can use the percentage property of width like,
SplitLayoutPanel slp = new SplitLayoutPanel();
slp.setWidth( "100%" );
And in the next step you want to add child element into the SplitLayoutPanel and it should occupy maximum area. Then set each child width to 100%
Widget child = // Instantiate any type of widget
child.setWidth( "100%" );
slp.add // Use proper add method and add the child to SplitLayoutPanel
I did not understand what did you mean by dragging is very jumpy. Did you mean Splitter size is too small that you cannot find the splitter. If thas the case, you can increase the splitter size by passing it in the constructor like
int splitter_size_in_pixels = 5;
SplitLayoutPanel slp = new SplitLayoutPanel( splitter_size_in_pixels );
I noticed the splitter and the right panel's size don't even follow the mouse cursor and oscillate wildly between about 4/5 and 2/5 as wide as they should be based on where the mouse pointer currently is.
I too saw jerky movement when dragging the splitter. My south pane contained a vertical panel which contained a label and a table. The fix was to set the VerticalPanel height="100%" . I have appended the uibinder code.
HTH
Julian
<g:SplitLayoutPanel styleName="gwt-SplitLayoutPanelTtc" ui:field="splitLayoutPanel">
<g:north size="40">
...
</g:north>
<g:west size="200">
...
</g:west>
<g:south size="500">
<g:VerticalPanel height="100%" width="100%">
<g:Label ui:field="tableTitle" styleName="tableTitle"></g:Label>
<g:Grid ui:field="table" styleName="gwt-Grid"></g:Grid>
</g:VerticalPanel>
</g:south>
<g:center>
...
</g:center>
</g:SplitLayoutPanel>
You can fix the jerky/jumpy movements by adding intermediate ResizeLayoutPanels.
MyComposite.ui.xml :
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:my="urn:import:my.custom.package.client">
<g:SplitLayoutPanel ui:field="splitLayoutPanel">
<g:west size="250">
<g:ResizeLayoutPanel ui:field="leftMenuOuterPanel">
<my:MenuWidget ui:field="menuWidget" />
</g:ResizeLayoutPanel>
</g:west>
<g:center>
<g:ResizeLayoutPanel ui:field="centerOuterPanel">
<my:AwesomeWidget ui:field="centerWidget" />
</g:ResizeLayoutPanel>
</g:center>
</g:SplitLayoutPanel>
</ui:UiBinder>
thanks to OlivierH answer
It looks like you have to specify absolute sizes of all but one subpanel. For example, from the GWT docs:
DockLayoutPanel p = new DockLayoutPanel(Unit.EM);
p.addNorth(new HTML("header"), 2);
p.addSouth(new HTML("footer"), 2);
p.addWest(new HTML("navigation"), 10);
p.add(new HTML(content));
But I want the north panel sized by the browser. I put some text or buttons in it and I don't know exactly what size it will be, I just know it is relatively thin and at the top of the page. And I want the content to take up the rest of the space, but no more, so there are no browser scroll bars. Is there a way to handle this with these newer layout panels?
Right now I'm using the older panels, and I have a handler attached with Window.addResizeHandler, which sets the height of the main content area so that everything fits within Window.getClientHeight
Update:
Thomas suggested a DockLayoutPanel inside a HeaderPanel, but this is not working for me:
<g:HeaderPanel>
<g:Label>Header top</g:Label>
<g:DockLayoutPanel unit='PX'>
<g:west size='300'>
<g:Label>West</g:Label>
</g:west>
<g:center>
<g:Label>Center</g:Label>
</g:center>
</g:DockLayoutPanel>
</g:HeaderPanel>
"Header top" is there, the rest invisible. It looks like inner divs are getting 0 height.
You should put a DockLayoutPanel (for the west and center regions, possibly the south one too if you don't want it to use its natural height) in a HeaderPanel (for the natural sizing of the north region)