The centers of the text for the labels and status are not aligning with the centers of the text for the buttons. I am using react-bootstrap. A picture shows the issue better than text:
How can I align the centers, I tried a style sheet, as suggested in: vertical-align with Bootstrap 3 but that did not work for react-bootstrap
Also, striped rows might be nice to make the content hold together visually. Tables could do that, but most design folks say tables are for data, not for this stuff.
Style Sheet:
.fieldLabel {
display: flex;
align-items: center;
}
JSX:
<Grid>
<Row className="propRow">
<Col sm={2} className="fieldLabel">Watson Installed:</Col>
<Col sm={1} className="fieldLabel">{(WatsonInstalled) ? 'true' : 'false'}</Col>
<Col sm={3}>
<Button bsStyle={(WatsonInstalled) ? 'warning' : 'primary'}
block onClick={(e) => buttonAction(e)}>
{(WatsonInstalled) ? 'UnInstall' : 'Install'}
</Button>
</Col>
</Row>
<Row className="propRow">
<Col sm={2} className="fieldLabel">Watson Running:</Col>
<Col sm={1} className="fieldLabel">{(WatsonRunning) ? 'true' : 'false'}</Col>
<Col sm={3}>
<Button bsStyle={(WatsonRunning) ? 'warning' : 'primary'}
block onClick={(e) => buttonAction(e)}>
{(WatsonRunning) ? 'Stop' : 'Run'}
</Button>
</Col>
</Row>
<Row className="propRow">
<Col sm={2} className="fieldLabel">FME Running:</Col>
<Col sm={1} className="fieldLabel">{(FMERunning) ? 'true' : 'false'}</Col>
<Col sm={3}>
<Button bsStyle={(FMERunning) ? 'warning' : 'primary'}
block onClick={(e) => buttonAction(e)}>
{(FMERunning) ? 'Stop' : 'Version Info'}
</Button>
</Col>
</Row>
</Grid>
Related
I am using react-bootstrap to displaying grid layout. However both row and col displaying grids and borders. No one of css functions work. What is the reason of that?
Here it is my react page.
return (
<Container fluid>
<Row>
<div className="image-container">
<img src={gameDetails.background_image} class="img-fluid" />
</div>
</Row>
<Row>
<Col>
<ListGroup>
<ListGroup.Item>
<span
style={{
fontFamily: "Staatliches",
fontSize: "20px",
}}
>
Name:
</span>{" "}
{gameDetails.name}
</ListGroup.Item>
</ListGroup>
</Col>
<ListGroup>
<ListGroup.Item>
<span
style={{
fontFamily: "Staatliches",
fontSize: "20px",
}}
>
Release Date:
</span>{" "}
{gameDetails.released}
</ListGroup.Item>
</ListGroup>
<Col></Col>
</Row>
</Container>
);
}
export default GameDesc;
I have tried to use CSS functions such as border: no but it did not work.
The border styling applies to the <ListGroup.Item> element. Add border: "none" to that.
hope this is ok to post here.
I have multiple drawers in my web app containing drop-down boxes, calendars and text inputs. Since I updated to 0.14.2, the dropdowns and calendars no longer work. However, the text fields are all ok. The data populates each of these components as expected (they pull data from the DB and make the items appear correctly.) However, when I try to click on a drop-down item, the drop-down menu does not respond to the change, neither does the calendar etc.
I have looked at all of the docs, and I appear to be doing everything correctly, but this problem persists. As a test, I rendered these components within the row, and everything works as expected; it is only once it is inside of a drawer that it stops working. Everything works as expected in "AntDesign" Version="0.12.7".
Any suggestions?
<Drawer Closable="true" Width="720" Visible="drawerVisible" Title=#Pagetitle OnClose="_=>Close(Data)">
<Row Gutter="16">
<AntDesign.Col Span="24">
<Text><b>Title</b></Text>
<Input #bind-Value="Data.Title" Placeholder=" Please enter a Data Title" TValue="string"></Input>
</AntDesign.Col>
</Row>
<br />
<Row Gutter="16">
<AntDesign.Col Span="12">
<Text><b>Engineer</b></Text>
<Select Placeholder="Select Engineer" PopupContainerMaxHeight="500px" #bind-Value=Data.UploadedBy ValueName="#nameof(DataUser.UserId)" LabelName="#nameof(DataUser.UserName)" DefaultActiveFirstOption Loading=!Users.Any() DataSource=#Users.Where(u => u.Is_Active == true).OrderBy(u => u.UserName) />
</AntDesign.Col>
</Row>
<Row>
<AntDesign.Col Span="12">
<Text><b>Customer</b></Text>
<Select Style="width: 240px;" PopupContainerMaxHeight="500px" #bind-Value=#Data.CustomerId ValueName="#nameof(DataCustomer.CustomerId)" LabelName="#nameof(DataCustomer.CustomerName)" Placeholder="Select Customer" DefaultActiveFirstOption Loading=!Customers.Any() DataSource=#Customers />
</AntDesign.Col>
<AntDesign.Col Span="12">
<Text><b>Priority</b></Text>
<Select Style="width: 240px;" PopupContainerMaxHeight="500px" #bind-Value=#Data.Priority ValueName="#nameof(DataPriority.Priority)" LabelName="#nameof(DataPriority.PriorityName)" Placeholder="Select Prioirity" DefaultActiveFirstOption Loading=!Priorities.Any() DataSource=#Priorities />
</AntDesign.Col>
</Row>
<br />
<br />
<Row>
<AntDesign.Col Span="12">
<Text><b>Select Date</b></Text>
<div class="site-calendar-demo-card">
<DatePicker TValue="DateTime?" Picker="#DatePickerType.Date" #bind-Value=Data.ExpiryUtc />
</div>
</AntDesign.Col>
<AntDesign.Col Span="12">
<Text><b>Select Item</b></Text>
<Select Mode="multiple"
Placeholder="Please select"
#bind-Values="SelectedItems"
TItemValue="int"
TItem="string"
OnSelectedItemsChanged="OnSelectedItemsChangedHandler"
Style="width: 100%; margin-bottom: 8px;"
EnableSearch>
<SelectOptions>
#foreach (var item in Items) {
<SelectOption TItemValue="int" TItem="string" Value=#item.ItemId Label=#item.ItemName />
}
</SelectOptions>
</Select>
</AntDesign.Col>
</Row>
<br />
<AntDesign.Col Span="24">
<Button Type="default" Style="float: right" #onclick="_=>Close(Data)">Cancel</Button>
#if (Pagetitle == "New Data Item") {
<Button Type="primary" Style="float: right" #onclick="_=>OnSubmit(Data)">Submit</Button>
} else {
<Button Type="primary" Style="float: right" #onclick="_=>UpdateDataItem(Data)">Update</Button>
}
</AntDesign.Col>
</Drawer>
It's a bug it seems. Oh well...
https://github.com/ant-design-blazor/ant-design-blazor/issues/3102
my code is this
<Container style={{ position: 'absolute', bottom: '0px', width: '100%', left: 0, right: 0}} fluid>
<Row >
<Col className={sizeWidth < 650 ? "d-flex justify-content-center" : "d-flex justify-content-end"}>
<ButtonAnterior tabIndex={-1} onClick={() => setCurrentTab('Produto')} text={"anterior"} />
</Col>
<Col className={sizeWidth < 650 ? "d-flex justify-content-center" : "d-flex justify-content-end"}>
<ButtonProximo onClick={() => setCurrentTab('Pontos')} text={"proximo"} />
</Col>
</Row>
</Container>
the result looks like this
I need to put both with flex-end, the styles that were added in the container are necessary because the buttons are centered for smartphone
Everyone is overusing Grid. It's not needed. What happening here is, that by using Row/Col the width is divided by half and every button is positioned at the end of it.
Instead just use the Stack component (=flexbox):
https://react-bootstrap.github.io/layout/stack/
<Stack direction="horizontal" gap={2} className="justify-content-end">...
function AlignFeature(){
const [allMessages, setAllMessages] = useState([]);
useEffect(()=>{
MessageService.getAllMessages().then(res=>{
setAllMessages(res.data);
});
}, []);
return (
<Container>
<Row>
<Col md={{ span: 6, offset: 0}}>
<div>
<div><Button color='warning'
onclick={MessageService.deleteChat}>
delete chat</Button></div>
<div className='chat'>
<div className='sentMes'>{
allMessages.map(message =>
<div key = {message.id}
className='sentMessages'>
<p
> {message.message} </p>
</div>
)}
</div>
</div>
<div style={{position:'static'}}>
<MessageForm />
</div>
</div>
</Col>
<Col md={{ span: 3, offset: 0}}> <UploadFiles /></Col>
</Row>
</Container>
);
}
export default AlignFeature;
properties of message are(id, message, receiverEmail, senderEmail)
after the map function i want to render message.message either left or right by checking if message.receiverEmail compares to an email stored in localStorage. if message.receiverEmail == localStorage.getItem('email') display right else display left
There are two ways of going about this problem my sources are Composition vs Inheritance and this question about updating parent state in react. This is also a good resource for learning about state.
From your question you are wanting to compare against data gained later and update the UI of a previously generated component based on that data. With react everything is based upon updating the state which updates the presented information hooks just provide a different way of doing this.
An example that fits into your current way of doing things (hooks) would be to pass an update function that will update the parent state to a lower level component.
function AlignFeature() {
const [allMessages, setAllMessages, localMessages, setLocalMessages] = useState([]);
useEffect(() => {
MessageService.getAllMessages().then(res => {
setAllMessages(res.data);
});
}, []);
return (
<Container>
<Row>
<Col md={{ span: 6, offset: 0 }}>
<div>
<div><Button color='warning'
onclick={MessageService.deleteChat}>
delete chat</Button></div>
<div className='chat'>
<div className='sentMes'>{
allMessages.map(message => {
if (localMessages.some(m => message.receiverEmail == m.receiverEmail)) {
// when email matches local
<div key={message.id} className='sentMessages'>
<p style={{ float: 'right' }}> {message.message} </p>
</div>;
} else {
// when email does not match local
<div key={message.id} className='sentMessages'>
<p> {message.message} </p>
</div>
}
}
)}
</div>
</div>
<div style={{ position: 'static' }}>
<MessageForm />
</div>
</div>
</Col>
<Col md={{ span: 3, offset: 0 }}> <UploadFiles updateLocalMessages={(lMessages) => setLocalMessages(lMessages)} /></Col>
</Row>
</Container>
);
}
export default AlignFeature;
<UploadFiles/> will need to assign the local emails or a list of email addresses using the passed in method which needs to be defined.
Note: It may be a good idea to consider case comparisons when comparing email addresses by converting them to both lower or upper case to ensure they match if that fits your use case.
I'm using VUE 2.5.1 & iView 4.0.0. There are 2 forms in a page of my project, and I use v-if property to switch them. The problem is after I re-assign the value of form_data (the new one does not have property 'usage') and set this.met_type to 3, the 'Item' input showes, but a line of red text 'usage is required' also showes under it. The 'Usage' input is already hidden, why does its validation tips still show? Is there a way to avoid this wrong message?
<template>
<div v-if="met_type==2">
<Form :rules="ruleCustom" :model="form_data">
<Row>
<Col span="12">
<FormItem label="Usage" prop="usage" required>
<Input :value="form_data.usage" readonly />
</FormItem>
</Col>
</Row>
<!-- other code omitted -->
</Form>
</div>
<div v-if="met_type==3">
<Form :rules="ruleCustom" :model="form_data">
<Row>
<Col span="12">
<FormItem label="Item" prop="item" required>
<Input :value="form_data.item" readonly />
</FormItem>
</Col>
</Row>
<!-- other code omitted -->
</Form>
</div>
<!-- other code omitted -->
</template>
<script>
export default {
methods: {
loadData: function(met_type) {
dataUtils.fetch(this.met_id, met_type, (retVal) => {
// Fetch data
// whe met_type == 3, form_data does not have property 'usage'
this.form_data = retVal.data;
this.met_type = met_type;
});
}
}
}
</script>
After I put these two forms into seperate template files, the problem is solved. But I still don't understand why this takes effective.
// ComponentA.vue
<template>
<Form :rules="ruleCustom" :model="form_data">
<Row>
<Col span="12">
<FormItem label="Usage" prop="usage" required>
<Input :value="form_data.usage" readonly />
</FormItem>
</Col>
</Row>
<!-- other code omitted -->
</Form>
</template>
// ComponentB.vue
<template>
<Form :rules="ruleCustom" :model="form_data">
<Row>
<Col span="12">
<FormItem label="Item" prop="item" required>
<Input :value="form_data.item" readonly />
</FormItem>
</Col>
</Row>
<!-- other code omitted -->
</Form>
</template>
// The main component file
<template>
<div v-if="met_type==2">
<ComponentA>
</ComponentA>
</div>
<div v-if="met_type==3">
<ComponentB>
</ComponentB>
</div>
<!-- other code omitted -->
</template>
<script>
export default {
methods: {
loadData: function(met_type) {
dataUtils.fetch(this.met_id, met_type, (retVal) => {
// Fetch data
// whe met_type == 3, form_data does not have property 'usage'
this.form_data = retVal.data;
this.met_type = met_type;
});
}
}
}
</script>