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">...
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.
I've juste created a card group on my homepage but I can't center my component CardGroup (see enclosure).
This is the sm-mode. But in lg mode I want my cards to be next to each other. In both cases, it should be centered. I tried to add a margin on the CardGroup or a display (flex, wrap) .. Nothing worked ^^ Any ideas? Thanks!
there is no CSS on both of them :)
HOME
// import react-Bootstrap's component(s)
import {
CardGroup,
Row,
Col,
} from 'react-bootstrap';
import SearchBar from 'src/components/SearchBar';
import EventCard from '../EventCard';
const Home = () => (
<div>
<SearchBar />
<div className="list">
<Row sm={1} md={2} className="g-4">
<Col className="card-columns">
<CardGroup>
<EventCard />
<EventCard />
<EventCard />
</CardGroup>
</Col>
</Row>
</div>
</div>
);
export default Home;
EVENT CARD
import './eventCard.scss';
import {
Card,
Button,
} from 'react-bootstrap';
const EventCard = () => (
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
);
export default EventCard;
try this
.list {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
flex-wrap: wrap;
}
check the dom elements whether these properties are applied else try to add !important since some bootstrap's class override yours.
refer: https://codesandbox.io/s/gallant-haze-6hxg1s?file=/src/App.js
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 am using react-native + mobx + nativebase. I am iterating over an array of objects. I am using NativeBase Card component. I have problem with the UI going out of place. See below:
Note "Hamburgers" looks funky. I figured out this is caused by the length of the word "Hamburgers". When I shorten it to "Burgers", it looks fine. See below:
This is the code. Note: recipeStore.categories is an array of object.
{ recipeStore.categories.map((category, index) => {
return (
<View key={index} style={{width: '33.3%', height: 300, padding: 20}}>
<Card>
<CardItem cardBody>
<Image
style={{width: '100%', height: 200}}
source={{uri: category.image}}
/>
</CardItem>
<CardItem button onPress={() => navigate('RecipeDetailScreen', { recipe: category.recipes[0] })}>
<Left>
<Ionicons name={category.icon} style={{fontSize: 25}}/>
</Left>
<Right>
<Text>{ category.name }</Text>
</Right>
</CardItem>
</Card>
</View>
I will need to anticipate for even longer word in the future as well. If I get a menu that is longer, I don't mind having it to overflow to next line. Something like below:
How can I make my card to handle overflow of long words?
Haven't replicated exactly what you have but the following could work.
In the <CardItem footer> the <Left> and <Right> will by default take up equal space.
Use the flex property to allow <Right> to be wider than <Left>
<CardItem footer style={{flex:4}}>
<Left style={{flex:1}}>
<Ionicons name="ios-microphone"/>
</Left>
<Right style={{flex:3}}>
<Text>Hamburgerrrrsssssssss</Text>
</Right>
</CardItem>
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>