Hi I am relatively new to openui5. I am designing a login page. My form is designed with "responsive grid layout". In my form component I have a single "FormContainer". I want that container to be vertically center without any effect to my responsive design.
The following is the current screen shot:-
The code of my xml is as below:-
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core"
xmlns="sap.m" >
<VBox class="sapUiSmallMargin" >
<f:Form id="Form"
editable="true"
ariaLabelledBy="Title1">
<f:layout>
<f:ResponsiveGridLayout />
</f:layout>
<f:formContainers>
<f:FormContainer ariaLabelledBy="Title2" >
<f:formElements>
<f:FormElement >
<f:fields>
<Image
src="icons/user.jpg"
densityAware="false"
width="60px" >
<layoutData>
<l:GridData span="L1 M1 S1" />
</layoutData>
</Image>
<Input value="{SupplierName}" id="name">
<layoutData>
<l:GridData span="L11 M11 S11" />
</layoutData>
</Input>
</f:fields>
</f:FormElement>
<f:FormElement >
<f:fields>
<Image
src="icons/password.jpg"
densityAware="false"
width="60px" >
<layoutData>
<l:GridData span="L1 M1 S1" linebreak="true" />
</layoutData>
</Image>
<Input value="{Street}" >
<layoutData>
<l:GridData span="L11 M11 S11" />
</layoutData>
</Input>
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
</VBox>
So kindly help me achieving this. How to vertically center the white box in the browser without effecting the responsiveness of the form?
You can center align the VBox by providing it height and using the property - justifyContent: center;
<VBox class="sapUiSmallMargin" height='100%' justifyContent ='Center'>
<!-- rest of the code remains same. -->
Related
I'm using Semantic UI to design a button component having animation. How can I change custom font color inside button?
Below is my code for the button:
https://codesandbox.io/s/interesting-yonath-7qvwl?file=/index.js
you can use inline styling
<div>
<Button color="google plus" animated="toggle">
<Button.Content style={{color: '#f1f2f3'}} visible href="#" secondary>
<Icon name="google plus" /> hi
</Button.Content>
<Button.Content style={{color: '#f1f2f3'}} hidden href="#">
Connect <Icon name="google plus" />
</Button.Content>
</Button>
</div>
how can I center align a button in Semantic UI React
I have tried several approaches, using Grid, Grid Row, but no success
import {Segment, Button,Label,Sticky,Grid,Container} from 'semantic-ui-react';
import React, {Component} from 'react';
const GeneralSupportSegment =() => (
<Segment>
<Label ribbon color="blue" size="large">Support</Label>
<Button>contact us</Button>
</Segment>
);
export default GeneralSupportSegment;
Would be nice if you could share what you tried to do.
One solution might be:
<Segment>
<Label ribbon color="blue" size="large">Support</Label>
<Grid>
<Grid.Column textAlign="center">
<Button>contact us</Button>
</Grid.Column>
</Grid>
</Segment>
You can see it working here:
https://codesandbox.io/s/z2pkv0ro43
This one worked for me, without using Grid
<Segment>
<Label ribbon color="blue" size="large">Support</Label>
<Segment basic textAlign={"center"}>
<Button style={{textAlign: "center"}}>contact us</Button>
</Segment>
</Segment>
I found the code below to be a cleaner solution that doesn't require to add Grid from semantic-ui. The only thing was that I used the button within my register/sign up form. May not work for everyone.
What I did was add a
className: 'signUpBtn'
and then within my css file I added the
display:flex;
justify-content:center;
JSX:
<Form.Field className="signUpBtn" color="blue" control={Button}> Register </Form.Field>
CSS:
.signUpBtn {
display: flex;
justify-content: center;
}
Here is the simplest solution I have:
Previous code of icon inside a button(not aligned in the centre):
<Button>
<Icon name="plus"/>
</Button>
Updated code(icon aligned at center):
<Button>
<div>
<Icon name="plus"/>
</div>
</Button>
I'm working on a react-vis chart that will dynamically update the data that is displayed when a user clicks on/off the legend item for that series.
If a user clicks clicks off all of the series the JSX that I render essentially looks like this:
<div>
<XYPlot
xDomain={paretoOrder}
margin={{left: 150, bottom: 150}}
width={450}
height={450}
xType="ordinal"
stackBy="y"
>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis
tickLabelAngle={-45}
/>
<YAxis
tickFormat={ tick => translator.formatTime(tick, {hideZero: true})}
/>
<VerticalBarSeries
data={[]}
/>
</XYPlot>
<DiscreteColorLegend
orientation="horizontal"
width={300}
items={legendItems}
onItemClick={this.onLegendClick}
/>
</div>
I would expect that this would still render the axes, the grid lines, etc, but the entire chart is removed from the DOM instead. How do I render a chart with empty data but keep the axes, grid lines, etc in the DOM?
Add dontCheckIfEmpty prop (as true, default is false) to <XYPlot> tag.
<XYPlot
dontCheckIfEmpty
>
<XAxis/>
<YAxis/>
<VerticalBarSeries
data={data}
/>
<VerticalGridLines />
<HorizontalGridLines />
</XYPlot>
After I've added DatePickers to a simple form, all components got placed vertically, while I would prefer them to be placed horizontally. Is there any parameter that should be set to make this work, or I must play a bit with CSS?
<MuiThemeProvider>
<div>
<TextField hintText="Enter text"/>
<DatePicker hintText="Date from" container="inline" mode="landscape" />
<DatePicker hintText="Date to" container="inline" mode="landscape" />
<IconButton>
<img src="img/ic_search_black_24px.svg"/>
</IconButton>
</div>
</MuiThemeProvider>
Any suggestions are appreciated!
On each DatePicker, set the style to:
style={{ display: 'inline-block' }}
I use the Fluent Ribbon (fluent.codeplex.com). I want to arrange four buttons side by side.
I use the following code:
<Fluent:RibbonGroupBox Header="Some Header">
<Fluent:RibbonToolBar>
<Fluent:RibbonToolBar.LayoutDefinitions>
<Fluent:RibbonToolBarLayoutDefinition Size="Small">
<Fluent:RibbonToolBarRow>
<Fluent:RibbonToolBarControlGroupDefinition>
<Fluent:RibbonToolBarControlDefinition Target="buttonFirst" />
<Fluent:RibbonToolBarControlDefinition Target="buttonPrevious" />
<Fluent:RibbonToolBarControlDefinition Target="buttonNext" />
<Fluent:RibbonToolBarControlDefinition Target="buttonLast" />
</Fluent:RibbonToolBarControlGroupDefinition>
</Fluent:RibbonToolBarRow>
</Fluent:RibbonToolBarLayoutDefinition>
</Fluent:RibbonToolBar.LayoutDefinitions>
<Fluent:Button Size="Small" Icon="/WpfApplication1;component/Resources/First_16.png" x:Name="buttonFirst" />
<Fluent:Button Size="Small" Icon="/WpfApplication1;component/Resources/Previous_16.png" x:Name="buttonPrevious" />
<Fluent:Button Size="Small" Icon="/WpfApplication1;component/Resources/Next_16.png" x:Name="buttonNext" />
<Fluent:Button Size="Small" Icon="/WpfApplication1;component/Resources/Last_16.png" x:Name="buttonLast" />
</Fluent:RibbonToolBar>
</Fluent:RibbonGroupBox>
The buttons are aligned correctly, but the buttons don't have a image. Where is the problem?
(The image files are available)
Sometimes you need to change 'Copy to Output Directory" setting. I usually use 'Always'. Or IfNewer if you have a lot and don't want a rebuild to constantly wipe and recopy.