I use in a gwt application a LayoutPanel with two Buttons inside it. The LayoutPanle has height of 35px; while the Buttons have height of 25px; I want to align vertically the Buttons in the middle of Panel. Much as I have tried, no common styling approach seems to work on it. Either setting vertical-align: middle on the Panel styling or or on the Buttons styling, the Buttons remain top-aligned. What is the proper approach in this case to bring eventually the Buttons in the middle, other than wrapping a HorizontalPanel for each Button inside the LayoutPanel and applying the verticalAlignment on the HorizontalPanel? Here is my code in Uibinder:
<g:LayoutPanel styleName="{style.buttonsBar}">
<g:layer left="30px" width="70px">
<g:Button ui:field="createButton" styleName="{style.crdelButton}">Create</g:Button>
</g:layer>
<g:layer right="30px" width="70px">
<g:Button ui:field="deleteButton" styleName="{style.crdelButton}">Delete</g:Button>
</g:layer>
</g:LayoutPanel>
If you panel is always 35px high, you have two options:
(1) Set margin on buttons to
margin: 5px 0;
(2) Set the following style to your LayoutPanel:
line-height: 35px;
Related
I am unsure on how to add "spacing" between my slides in pure react carousel.
Is there any easy option how to add gaps between slides ? I've tried several approaches. I need correct padding when sliding one by one. When using margin, applying on slide or inner element, slider get broken, pushing last slide on new line block.
Pure React Carousel components behave like a suite of HTML tags. A good analogy for the suite of Pure React Carousel components are the Table tags in HTML: table, thead, tbody, tr, th, tr, tfoot, colgroup, etc. The table tags are bare-bones, and only use default styles. You must apply css to them in order to customize your carousel.
Pure React Carousel is responsive by default. Meaning, it will stretch to the full width of its parent container unless the parent container uses CSS to restrict the width of Pure React Carousel.
The slides in Pure React Carousel have an intrinsic height by default. Meaning, just like an image tag, the height of each slide gets taller the wider each slide becomes. Just like the height of an image with no height attribute set gets taller the wider the image becomes in a browser.
The <Slide /> component has a child div with the class .carousel__inner-slide. To give your carousel the "illusion" of spacing between cells, create a css rule for .carousel__inner-slide in your project. That or pass the <Slide /> component a class name via the innerClassName prop.
Example:
.carousel__inner-slide {
width: calc(100% - 20px);
height: calc(100% - 20px);
left: 10px;
top: 10px;
background-color: burlywood;
}
View a demo:
https://codesandbox.io/s/withered-wood-4bx36?fontsize=14&hidenavigation=1&theme=dark
This worked for me:
.carousel__inner-slide {
margin-right: 20px;
}
I just wondered if there's a way to centralize the sap.m.IconTabBar. So that the icons don't start straight on the left but they are all central. The icons should take the whole length of the sap.m.IconTabBar.
Is there any possibility or no way to adapt the orientation?
Thanks
There is no property in the IconTabBar control which would allow you to center align the selection Icons. But it is achievable with some CSS trickery.
If you assign a text-align: center property to the container of the selections they will align to the center, as each of the child div's being inline-block elements.
XML:
<IconTabBar
class="tabbedBar"
...
...
CSS:
.tabbedBar .sapMITBHead{
text-align:center;
}
want to draw shadow on bottom of tabs
<Tabs
onChange={this.handleTabChange}
value={this.state.slideIndex}
style={?}
>
<Tab label="Label" value={0} style={or here?} ></Tab>
</Tabs>
how to write the styles
thanks
If you're referring to Material UI, I believe Tabs do not have a zDepth property as the AppBar does. Best to fold the Tab component into the AppBar.
You can add it manually, however, with:
style={{boxShadow: '0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.12)'}}
I have a complicated GWT question. Wish someone can give me some tips.
I want to create a panel that looks like in the following( content on the left, and some texts in the middle of the right side(tab), OR on the top of right side. (see the first picture)
Firstly, I considered the tab panel. but tap panel only has the horizontal tab on top. So this will not work unless I use third party libraries.
Then I tired the docklayoutpanel. but there is some problem as well. I put the content in mid, and put a label with some text in east. The height of the tab will be the same as the height of content. (see the 2nd picture). I dont like this. I dont want the white space shown up.
So does anyone have good idea about how to implement this kind of panel?
Thanks a lot.
Regards!
1st picture
|-------------------------|
|------- content ---------|---------|
|-------------------------|---tab---|
|-------------------------|---------|
| ------------------------|
2nd picture
|-------------------------|white space|
|------- content ---------|-----------|
|-------------------------|----tab----|
|-------------------------|-----------|
| ------------------------|white space|
Also, for the 2nd method, I tried to set the east area of docklayoutpanel to be transparent. But I did not know how to do this. and i am not sure if it will clean out the white space area.
Put the tabs in an "east" panel with height: 100%, and give it the background color you want. Put the main content in a "center" panel. Do not use "north" or "south".
If you want vertical centering for the tabs, then the easiest method is to use VerticalPanel with verticalAlignment="MIDDLE".
<ui:style>
.centerPanel { background-color: royalblue; }
.eastPanel { background-color: lightblue; width: 100%; height: 100%; }
</ui:style>
<g:DockLayoutPanel unit="EM">
<g:center>
<g:FlowPanel addStyleNames="{style.centerPanel}">
<g:Label>Content</g:Label>
</g:FlowPanel>
</g:center>
<g:east size="8">
<g:VerticalPanel addStyleNames="{style.eastPanel}"
verticalAlignment="MIDDLE">
<g:FlowPanel>
<g:Label>Tab1</g:Label>
<g:Label>Tab2</g:Label>
</g:FlowPanel>
</g:VerticalPanel>
</g:east>
</g:DockLayoutPanel>
The result looks like this:
Perhaps I haven't been searching the right way but I cannot figure out for the life of me how to center an element using GWT Layout Panels.
I'm using UiBinder and I've tried all panels that implement HasVerticalAlignment (DockPanel, HorizontalPanel, VerticalPanel). None of them seem to have any impact from setting vertical alignment (or even horizontal). I've made sure they're taking 100% width and height, inspected the resulting DOM layout from my browser and nothing seems to be changed from those properties.
Pertinent UiBinder extract (with extra docklayout elements omitted):
<g:DockLayoutPanel>
<g:center>
<g:HorizontalPanel width="100%" height="100%" >
<g:FlexTable ui:field="homeData" />
</g:HorizontalPanel>
</g:center>
</g:DockLayoutPanel>
The quick and dirty fix I've figured out is to create my own "CenterPanel" widget which basically is a wrapper around a HTMLPanel with a HTML table with a valign="middle" cell. However, this basically feels like a throwback to the classical css-layout middle centering problems. Surely GWT has something to do this that I've completely overlooked?
Centering an item can be done with a cell element like this:
<g:HorizontalPanel width="100%" height="100%">
<g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
<g:Label>Hello Center</g:Label>
</g:cell>
</g:HorizontalPanel>
Have you tried setting width less than 100% ... i feel the width of HorizontalPanel becomes 100% ... so it occupies whole DockLayoutPanel and thus the FlexTable might be getting left aligned.
You can use styleName attribute in your component. For Example:
<g:DockLayoutPanel>
<g:center>
<g:HorizontalPanel width="100%" height="100%" >
<g:FlexTable ui:field="homeData" styleName="verticalAlign"/>
</g:HorizontalPanel>
</g:center>
</g:DockLayoutPanel>
and have
.verticalAlign{
vertical-align: middle;
}
in your style.css