I used React and React-Bootstrap to build a website. I want to create a box with border inside a modal. This is my code.
.JSX file
<Modal.Header closeButton>
<Modal.Title>Preview</Modal.Title>
</Modal.Header>
<Modal.Body>
<Col md={6}>
<div className="previewCard">
<Col md={3}></Col>
<Col md={7}>
<p className="topicTH">Line1</p>
<p className="topicTH">Line2</p>
<p className="topicTH">Line3</p>
<p className="topicTH">Line4</p>
<p className="topicTH">Line5</p>
</Col>
<Col md={2}></Col>
</div>
</Col>
</Modal.Body>
<Modal.Footer></Modal.Footer>
.CSS file
div.previewCard{
border-style: dashed;
}
As you can see, there is noting inside the box even it put elements inside <div className="previewCard"></div>. How do I resolve this?
Instead of div use Row:
<Row className="previewCard">
Related
I m tried to click #onclick="#Toggle" and hide current div and then show the new div , but its not worked for me
here the issue
#my current div is not hide and new div section not showing there
any one know the solution
thanks
code here
<div class="sh-agreement-tp" style="background-color: #fff; padding: 20px;">
#* AgreementTemplate section one *#
<Row Gutter="(24, 24)">
<Col Xs="24" Sm="24" Md="24" Lg="6" Xl="6"><a #onclick="#Toggle" >
<Card class="sh-agreement-tm" Bordered="false">
<Body>
<div style="text-align:center"> <p style="margin-bottom: 0rem;">Industry One</p></div>
</Body>
</Card>
</a>
</Col>
<Col Xs="24" Sm="24" Md="24" Lg="6" Xl="6">
<Card class="sh-agreement-tm" Bordered="false">
<Body>
<div style="text-align:center"> <p style="margin-bottom: 0rem;">Industry Two</p></div>
</Body>
</Card>
</Col>
<Col Xs="24" Sm="24" Md="24" Lg="6" Xl="6">
<Card class="sh-agreement-tm" Bordered="false">
<Body>
<div style="text-align:center"> <p style="margin-bottom: 0rem;">Industry Three</p></div>
</Body>
</Card>
</Col>
<Col Xs="24" Sm="24" Md="24" Lg="6" Xl="6">
<Card class="sh-agreement-tm" Bordered="false">
<Body>
<div style="text-align:center"> <p style="margin-bottom: 0rem;">Industry Four</p></div>
</Body>
</Card>
</Col>
</Row>
<div><p hidden="#(!HideLabel)">New section here </p></div>
</div>
#* END of AgreementTemplate section one *#
#code {
private bool HideLabel {get;set;} = false;
private void Toggle()
{
HideLabel = !HideLabel;
}
}
This code works well:
<div hidden="#showPanel2">Panel 1</div>
<div hidden="#(!showPanel2)">Panel 2</div>
<button class="btn btn-primary" #onclick="Toggle">Click me</button>
#code
{
bool showPanel2 = false;
void Toggle() { showPanel2 = !showPanel2; }
}
So I suspect that your Toggle() never gets called.
Try to debug that.
You are doing it a wrong way, you can hide any div or paragraph like this
To hide div
<div style="visibility: #(HideLabel ? "hidden" : "visible")"><p>New section here </p></div>
To hide paragraph
<div><p style="visibility: #(HideLabel ? "hidden" : "visible")">New section here </p></div>
I have a main element which is divided into a grid of 3 columns.
in the middle column I am displaying some listings.
each listing is a div element and has a react bootstrap card inside it.
I am trying to get the card to span 100% of the parent but that doesn't seem to be working for me.
React component
<div className="backfill">
<Row key={Listing_Id}>
<Card style={{ cursor: 'pointer' }} border="light" className="text-center fullCard" >
<Card.Body>
<Card.Title className="Title">
{Listing_Name}
<hr />
<Button className="Button" variant="outline-success" onClick={() => props.handleLikeDisLike(Listing_Id, 'Listing_Likes', Listing_Location)}> <Twemoji options={options} text=":+1:" /></Button>
<Badge className="Badge" variant="light">{Listing_Likes}</Badge>
<Button className="Button" variant="outline-danger" onClick={() => props.handleLikeDisLike(Listing_Id, 'Listing_DisLikes', Listing_Location)}><Twemoji options={options} text=":-1:" /></Button>
<Badge className="Badge" variant="light">{Listing_DisLikes}</Badge>
<hr />
<Button className="Button" variant="outline-info" ><Twemoji text=":pushpin:" /></Button>
<Badge className="Badge" variant="light">{Listing_Location}</Badge>
</Card.Title>
<Card.Text className="Listing" onClick={() => handleClick(Listing_Id)} >
<hr />
{ListingBody}
<ModalLayout
Listing_Location={Listing_Location}
Listing_Likes={Listing_Likes}
Listing_DisLikes={Listing_DisLikes}
Listing_Name={Listing_Name}
Listing_Id={Listing_Id}
handleLikeDisLike={props.handleLikeDisLike}
handleClose={closeModal}
show={showModal} />
</Card.Text>
</Card.Body>
</Card>
</Row>
<br />
</div >
CSS for div and Card elements
.backfill {
background-color: aqua;
}
.fullCard {
width:'100%';
}
I currently end up with the UI looking like this. Please can you help me sort this out. I want to get the card to be 100% of its parent div.
Just had to remove the single quotes from the CSS
.fullCard {
width:'100%';
}
had to become
.fullCard {
width:100%;
}
Can someone please shed some light on this for me ... No matter what I do with the below code I always seem to have three columns but I just want two .. What I mean is the way the below shows on my page it is expecting another one to the right .. so it does not look like this
COL 1 ..... SPACE HERE........ COL 2
But instead
COL 1 COL 2
<Row className="show-grid text-center">
<Col xs={12} sm={4} className="person-wrapper">
<Image src="assets/image.jpg" circle className="profile-pic"/>
<h3></h3>
<Link to="/place">
<Button bsStyle="primary">click</Button>
</Link>
</Col>
<Col xs={12} sm={4} className="person-wrapper">
<Image src="assets/image1.jpg" circle className="profile-pic"/>
<h3></h3>
<Link to="/place">
<Button bsStyle="primary">click</Button>
</Link>
</Col>
</Row>
You should set an offset to each "resolution" you want to cover, in your case for sm:
<Row className="show-grid text-center">
<Col xs={12} sm={4} className="person-wrapper">
{/* your content goes here */}
</Col>
<Col xs={12} sm={{ span: 4, offset: 4 }} className="person-wrapper">
{/* your content goes here */}
</Col>
</Row>
The grid contains 12 columns, not 8. Your two sm columns need to add up to 12. Use sm={6} instead of sm={4}
<Row className="show-grid text-center">
<Col xs={12} sm={6} className="person-wrapper">
<Image src="assets/image.jpg" circle className="profile-pic"/>
<h3></h3>
<Link to="/place">
<Button bsStyle="primary">click</Button>
</Link>
</Col>
<Col xs={12} sm={6} className="person-wrapper">
<Image src="assets/image1.jpg" circle className="profile-pic"/>
<h3></h3>
<Link to="/place">
<Button bsStyle="primary">click</Button>
</Link>
</Col>
</Row>
I am building a simple page with React and Reactstrap. It is rendered in a asymmetrical way so for three Rows on the screen the scheme is 1) Img - Text 2) Text - img 3) Img - Text.
The problem is when the screen is reduced because the text wraps under the image, resulting in a double text view between the first and the second row which is bad to see. How to fix it? In CSS I think it is not possible since media queries cannot alter the HTML structure and, in this case, it is not simply to hide an element but to change its disposition.
JSX
import React, { Component } from 'react';
import { Container, Row, Col } from 'reactstrap';
import about1 from '../images/aboutstile1.jpg';
import about2 from '../images/aboutstile2.jpg';
import about3 from '../images/aboutstile3.jpg';
// import about3 from '../images';
// import about4 from '../images';
import './about.css';
import { Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle, Button, CardImgOverlay } from 'reactstrap';
export default class About extends Component {
render() {
return (
<div>
<div className="main">
</div>
<br/>
<br/>
<Container className="cont">
<Row>
<Col className="about_tile">
<img className="about_tile_img" src={about2} alt=""/>
</Col>
<Col className="about_text">
<h2>Executive Recruitment</h2>
<p>REC Consulting provides a full range of solution
to hire the most complex managerial figures a business needs. Thanks to
specific enquires on the type of leadership of the candidate we will know beforehand if
the profile is going to be the right leader in the team in the company.</p>
</Col>
</Row>
<br/>
<Row>
<Col className="about_text">
<h2>Technical Expertise</h2>
<p>REC Consulting provides a full range of solution
to hire the most complex managerial figures a business needs. Thanks to
specific enquires on the type of leadership of the candidate we will know beforehand if
the profile is going to be the right leader in the team in the company.</p>
</Col>
<Col className="about_tile">
<img className="about_tile_img" src={about3} alt=""/>
</Col>
</Row>
<br/>
<Row>
<Col className="about_tile">
<img className="about_tile_img" src={about1} alt=""/>
</Col>
<Col className="about_text">
<h2>Executive Recruitment</h2>
<p>REC Consulting provides a full range of solution
to hire the most complex managerial figures a business needs. Thanks to
specific enquires on the type of leadership of the candidate we will know beforehand if
the profile is going to be the right leader in the team in the company.</p>
</Col>
</Row>
</Container>
<br/>
<br/>
</div>
)
}
}
CSS
.main {
height: 26rem;
background-image: url('../images/abouts7.jpg');
background-size: cover;
background-position: 0 9%;
}
/* .cont {
max-width: 100rem;
} */
.about_tile {
width: 400px;
height: 320px;
}
.about_tile_img {
border-style: solid;
border-width: 1px;
border-color: turquoise;
border-radius: 25px;
position: relative;
width: 400px;
height: 320px
}
.about_text {
display: block;
justify-content: center;
}
Instead of altering the column order in the html, change the flex direction for every other row.
With bootstrap 4 you can use the helper class flex-row-reverse on every other <div class="row flex-row-reverse">...</div>.
I am not familiar with JSX so not 100% on how you would actually add the class, but the generated html should look something like this:
<div class="container">
<div class="row">
<div class="col-md-6">
image
</div>
<div class="col-md-6">
text
</div>
</div>
<div class="row flex-row-reverse">
<div class="col-md-6">
image
</div>
<div class="col-md-6">
text
</div>
</div>
</div>
I have one form on which all text fields are there and at the end there are 'save' and 'cancle' buttons. Between this last text field and buttons, there will be filename list that will populate dynamically as and when I will upload any file. Screenshot for the same is attached here. Size of this list is not fixed and thus, I want these buttons to shift down with every added file. I am not sure how can I adjust this movement of buttons dynamically. [see image 1]. And following is my current CSS code.
// Outermost div
.div-one {
position: absolute;
background-color: gainsboro;
height: 100%;
width: 50%;
}
// div for file list
.item-list {
width: 16em;
position: relative;
margin-left: -38px;
}
// div for buttons
.save-cancel-buttons-div{
position: relative;
top: 20%;
}
Following is my HTML code:
<div className="div-one1">
<Row>
<div className="item-list">
<Col xs={6} sm={6} md={6} lg={6}>
<If condition={this.state.files && this.state.files.length!=0}>
<ul style={{listStyle: 'None', fontSize: '16px'}}>
{this.state.files.map((value, index) => (
<li style={{paddingBottom: '5px', border:'5px'}}
key={`item-${index}`} >
<span>{value.file_name}
<span style={{paddingLeft: '20px'}}
onClick={() => this.onDeleteItem(value, index)}>
<Close size={20} paddingLeft={20}></Close>
</span>
</span>
</li>
))}
</ul>
</If>
</Col>
</div>
</Row>
<div className="save-cancel-buttons-div">
<Row>
<Col xs={3} sm={3} md={2} lg={2}>
</Col>
<Col xs={6} sm={6} md={6} lg={6}>
<Row>
<Col xs={6} sm={6} md={6} lg={6}>
<Button
value={<FormattedMessage id="saveBtn" defaultMessage="speichern" />}
fontSize={14}
minHeight={33}
minWidth={150}
backgroundColor="blue"
onClick={this.createNewDelivery}/>
</Col>
<Col xs={6} sm={6} md={6} lg={6}>
<Button
value={<FormattedMessage id="cancelBtn" defaultMessage="Zurück" />}
fontSize={14}
minHeight={33}
minWidth={150}
backgroundColor="red"
onClick={this.goBackToOfferedDeliveries}
/>
</Col>
</Row>
<Col xs={3} sm={3} md={2} lg={2}>
</Col>
<Col xs={6} sm={6} md={6} lg={6}>
</Col>
</Col>
</Row><br/>
</div>
</div>
Try to add a new container div for the save-cancel-buttons-div. Position the item-list and the container div relatively to their div-one parent container. Finally, position the save-cancel-buttons-div relatively to its container and add margin-left-right:auto so it centers inside it's parent div.
// div for file list
.item-list
{
position: relative; <--- this as first line of code
float:left; <--- add this so it takes a definite position
width: 16em;
margin-left: -38px;
}
// Put .save-cancel-buttons-div inside this div
.containerForSaveCancel
{
position:relative;
float:left;
width:100%;
text-align:center;
margin:0;
padding:0;
}
// div for buttons
.save-cancel-buttons-div
{
position: relative;
margin:5px auto 0 auto; <--- add this to center the div inside its parent
}