Here are some part of my codings inside index.zul :
<grid>
<columns>
<column/>
<column/>
</columns>
<rows>
<row>
<label value="${labels.personal.name}"/>
<label value="#load(vm.personal.name)"/>
</row>
<row>
<label value="${labels.personal.id}"/>
<label value="#load(vm.personal.id)"/>
</row>
<rows>
<grid>
I tried to use the CSS below but somehow it bold every label inside row element.
.z-label:FIRST-CHILD{
font-weight: bold;
}
So, how can I apply font-weight only to the first label tag for each row element ?
You can use the sclass attribute so your css is applied with the default css.
<style>
.bold{
font-weight: bold;
}
</style>
<grid>
<columns>
<column/>
<column/>
</columns>
<rows>
<row>
<label value="${labels.personal.name}" sclass="bold"/>
<label value="#load(vm.personal.name)"/>
</row>
<row>
<label value="${labels.personal.id}" sclass="bold"/>
<label value="#load(vm.personal.id)"/>
</row>
</rows>
</grid>
You can test it in this fiddle.
Update:
I looked around in the DOM and played a little further with the css selectors so I came to this solution
.z-row-inner:first-child .z-label {
font-weight:bold;
}
Related
Hi guys so I'm trying to create an web application using react-bootstrap and I wanted to change the width of my row and center it. I already make the css and js file but I cannot center the row. I tried moving my code to codesandbox and it work just fine. anyone know why ?
My code:
<Container fluid>
<Row className="roomfac fontReg">
<Col lg={3} className="text-center">
<img src="./Images/logofridge.png" alt="Logo 1"/>
<h3 className="fontSB">Fridge</h3>
</Col>
<Col lg={3} className="text-center">
<img src="./Images/logoAC.png" alt="Logo 2"/>
<h3 className="fontSB">AC</h3>
</Col>
<Col lg={3} className="text-center">
<img src="./Images/logowifi2.png" alt="Logo 3"/>
<h3 className="fontSB">Wifi</h3>
</Col>
<Col lg={3} className="text-center">
<img src="./Images/logotv.png" alt="Logo 4"/>
<h3 className="fontSB">TV</h3>
</Col>
</Row>
</Container>
My CSS Code:
.roomfac {
display: flex;
width: 60%;
justify-content: center;
margin: auto;
}
It is working for me too in chrome as well as edge, make sure whether your css files are included correctly or else try using inline css in jsx.
<Row style={{display:"flex",width: "60%",margin: "auto",justifyContent: "center"}} className="fontReg">
I want to set the position of the dropdown element such that when I click on that it should remain in the same position and it should not move. As of now when I am clicking on the dropdown icon it is moving down. How can I fix this? I want that icon to stick to the input element and should not move up or down on clicking the icon.
Here's the code :
<Grid item md={6} lg={6} xs={12}>
<div className="milestone-due-date">
DUE DATE
</div>
<label>
<DatePicker
dateFormat="MM/dd/yyyy"
margin="normal"
selected={due_date}
placeholderText="Due Date"
onChange={date=>this.handleChangeDate(date,'due_date')}
maxDate={new Date()}
className={`milestone-input-due-date`}
/>
<img src={DROP_D} alt="drop down" style={{cursor:'pointer'}} className='dropdown-milestone'/>
</label>
{due_date_error && (
<div className="input-error-style">{due_date_error}</div>
)}
</Grid>
<div className="milestone-due-date">
DUE DATE
<label>
<DatePicker
dateFormat="MM/dd/yyyy"
margin="normal"
selected={due_date}
placeholderText="Due Date"
onChange={date=>this.handleChangeDate(date,'due_date')}
maxDate={new Date()}
className={`milestone-input-due-date`}
/>
<img src={DROP_D} alt="drop down" style={{cursor:'pointer'}} className='dropdown-milestone'/>
</label>
</div>
{due_date_error && (
<div className="input-error-style">{due_date_error}</div>
)}
css
.milestone-due-date {position:relative;}label{position: absolute;bottom: -10px;left: 0px;}
I am using react-grid-system with an image and two columns for text as follows:
<Row>
<Col md={1}>
<img src=".." />
</Col>
<Col md={4}>
.....
</Col>
<Col md={7}>
....
</Col>
</Row>
In this, I want the image and all the text to be vertically in the middle of the row. I read the documentation here but wasn't able to find anything related to vertical alignment.
There is vertical alignment in the docs it states for vertical alignment to use the align prop
<Row align="center" style={{ height: '75px' }} debug>
<Col debug>1 of 3</Col>
<Col debug>2 of 3</Col>
<Col debug>3 of 3</Col>
</Row>
I think you should add justify attribute to Row Element with "center" value like this:-
<Row justify="center">
<Col xs={3} debug>1 of 3</Col>
<Col xs={3} debug>2 of 3</Col>
<Col xs={3} debug>3 of 3</Col>
</Row>
try
<div class="i-am-centered">
<Row>
<Col md={1}>
<img src=".." />
</Col>
<Col md={4}>
.....
</Col>
<Col md={7}>
....
</Col>
</Row>
</div>
and for styling :
<style>
.i-am-centered { margin: auto; max-width: 300px;}
</style>
It helps in responsive design
<div style={{display:'grid',placeContent:"center"}}>
<Row>
<Col md={1}>
<img src=".." />
</Col>
<Col md={4}>
.....
</Col>
<Col md={7}>
....
</Col>
</Row>
</div>
I'm using reactstrap in my project I have a simple card and I want to place a text area inside it using the following code:
<Card>
<CardBody>
<Form>
<FormGroup>
<Input
type="textarea"
defaultValue="Hello world"
/>
</FormGroup>
</Form>
</CardBody>
</Card>
If I then try to set the height it just doesn't work. I have tried using style:
<Card>
<CardBody>
<Form>
<FormGroup>
<Input
type="textarea"
defaultValue={tweet.full_text}
style={{ height: 220 }}
/>
</FormGroup>
</Form>
</CardBody>
</Card>
And also tried using a custom css class:
.text-area-custom {
height: 220px;
}
<Card>
<CardBody>
<Form>
<FormGroup>
<Input
className="text-area-custom"
type="textarea"
defaultValue={tweet.full_text}
/>
</FormGroup>
</Form>
</CardBody>
</Card>
Neither of these methods work. Any idea what I am doing wrong here?
Try and set the rows attribute
<Card>
<CardBody>
<Form>
<FormGroup>
<Input
type="textarea"
defaultValue={tweet.full_text}
rows="5"
/>
</FormGroup>
</Form>
</CardBody>
</Card>
The image enclosed shows the current state of the Segment. Is there a way to make them the same height?
import React, { Component } from 'react';
import { Grid, Segment, Header, Image, Card, Icon, Button, Divider, Radio, Form } from 'semantic-ui-react';
import './UserAccountProfilePage.css';
export default function UserAccountProfilePage() {
return (
<Grid columns={2} stackable className="fill-content">
<Grid.Column width={1} />
<Grid.Column width={7}>
<Segment>
<Header as="h1">Profile</Header>
<Image className="centered" src="/images/daniel.jpg" size="medium" circular />
<Card fluid>
<Card.Content>
<Card.Header>Daniel</Card.Header>
<Card.Meta>Joined in 2016</Card.Meta>
<Card.Description>Daniel is a comedian living in Nashville.</Card.Description>
</Card.Content>
<Card.Content extra>
<a>
<Icon name="user" />
10 Friends
</a>
</Card.Content>
</Card>
</Segment>
</Grid.Column>
<Grid.Column width={7}>
<Segment>
<Header as="h2">Settings</Header>
<Button positive fluid>
Sync Google Calendar
</Button>
<Divider />
<Header as="h4">Text notifications</Header>
<Radio toggle />
<Divider />
<Header as="h4">Customize text notifications</Header>
<RadioExampleRadioGroup />
</Segment>
</Grid.Column>
<Grid.Column width={1} />
</Grid>
);
}
Thanks in advance!
There are two things to look at here. First, you need to add a Grid.Row component in between your Grid component and Grid.Column components. Then you need to add a stretched prop to it.
Add this: <Grid.Row stretched>
Luckily, the styles for this are already part of Semantic UI CSS.
import React, { Component } from 'react';
import { Grid, Segment, Header, Image, Card, Icon, Button, Divider, Radio, Form } from 'semantic-ui-react';
import './UserAccountProfilePage.css';
export default function UserAccountProfilePage() {
return (
<Grid columns={2} stackable className="fill-content">
<Grid.Row stretched>
<Grid.Column width={1} />
<Grid.Column width={7}>
<Segment>
<Header as="h1">Profile</Header>
<Image className="centered" src="/images/daniel.jpg" size="medium" circular />
<Card fluid>
<Card.Content>
<Card.Header>Daniel</Card.Header>
<Card.Meta>Joined in 2016</Card.Meta>
<Card.Description>Daniel is a comedian living in Nashville.</Card.Description>
</Card.Content>
<Card.Content extra>
<a>
<Icon name="user" />
10 Friends
</a>
</Card.Content>
</Card>
</Segment>
</Grid.Column>
<Grid.Column width={7}>
<Segment>
<Header as="h2">Settings</Header>
<Button positive fluid>
Sync Google Calendar
</Button>
<Divider />
<Header as="h4">Text notifications</Header>
<Radio toggle />
<Divider />
<Header as="h4">Customize text notifications</Header>
<RadioExampleRadioGroup />
</Segment>
</Grid.Column>
<Grid.Column width={1} />
</Grid.Row>
</Grid>
);
}