I'm using Bootstrap's grid system in my ReactJS project. Under a row, I have multiple columns (col-md-4) which I want to animate as they are added to or removed from the row as the component state changes. But Using CSSTransitionGroup immediately under a row to let the columns render as children leaves a span under the row and above the columns ruining the columns' left float.
<div className="row">
<ReactCSSTransitionGroup
transitionName={`fadeIn`}
transitionEnterTimeout={200}
transitionLeaveTimeout={200}>
{list.map(user => { return (
<div className="col-sm-6 col-md-8 col-lg-4" key={user.id}>
<div class="card">
</div>
</div>
)})}
</ReactCSSTransitionGroup>
</div>
YIELDS:
<div class="row">
<span>
<div className="col-sm-6 col-md-8 col-lg-4" key={user.id}>
<div class="card">
...
</div>
</div>
</span>
</div>
What is the correct approach to this?
Solved : just add className="row" in CSSTransitionGroup element
Sample code Here:
<CSSTransitionGroup
transitionName="item"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}
className="row">
{myIndustries}
</CSSTransitionGroup>
Related
I want to display a responsive image gallery using React and Bootstrap.
I want to have 2 columns per row in on small devices and 3 columns per row on medium and larger devices.
At the moment my items wrap onto to next row too soon, leaving the last column empty. Any ideas what is wrong with my Bootstrap?
Here is my code:
return(
<div className='App'>
<h2> View Images </h2>
<div className='container-fluid' >
<div className='row'>
{
rounds.map((item,index)=>{
return(
<div key={index} className='col-sm-6 col-md-4'>
<img src={item.url}
alt={`image_${item.url}`}
height="200"
/>
<br />ID: {item.id}
</div>
)
})
}
</div>
</div>
</div>
)
here is my screen Bootstrap rows and columns
I can see that my row is split into 2 columns however the second column is not populated with the image as expected, instead the image wraps onto the next row
Use col-6 instead of col-sm-6...
return(
<div className='App'>
<h2> View Images </h2>
<div className='container-fluid' >
<div className='row'>
{
rounds.map((item,index)=>{
return(
<div key={index} className='col-6 col-md-4'>
<img src={item.url}
alt={`image_${item.url}`}
height="200"
/>
<br />ID: {item.id}
</div>
)
})
}
</div>
</div>
</div>
)
This is ant-react project.
html:
<div class="list">
<div class="item">
<div>
<div>
<div class="head">
<span>name 1</span>
</div>
<div class="body">
<div>
<button>done</button>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div>
<div>
<div class="head">
<span>name 2</span>
</div>
<div class="body">
<div>
<button>done</button>
</div>
</div>
</div>
</div>
</div>
js:
cy.get(`div:contains('name1')`)
.should('be.visible')
.invoke('show')
.should('be.visible')
.find('button:contains("Done")').eq(0).click({ multiple: true })
There are a lot of item elements. I need to click on the 'Done' button of the element with name "name 1".
But every time i get error:
Timed out retrying after 4050ms: cy.click() failed because this element is detached from the DOM.
...
Cypress requires elements be attached in the DOM to interact with them.
How can I do it?
You can do something like this. The first parent will go to <div class="head"> and the next parent will move to div just above. Now using within we will make sure that the Done button is clicked for name 1.
cy.contains('span', 'name1')
.parent()
.parent()
.within(() => {
cy.contains('button', 'done').click()
})
I changed my code so that it would bring in the information from cloud firestore instead of hardcoding it. This is my old code without firebase:
<div className="grid">
<div className="grid-child">
<img className="subImg" src={amsterdam}></img>
<p className="subImgTitle">Amsterdam</p>
<p className="subImgText">Hotels from £?</p>
</div>
<div className="grid-child">
<img className="subImg" src={london}></img>
<p className="subImgTitle">London</p>
<p className="subImgText">Hotels from £?</p>
</div>
<div className="grid-child">
<img className="subImg" src={madrid}></img>
<p className="subImgTitle">Madrid</p>
<p className="subImgText">Hotels from £?</p>
</div>
<div className="grid-child">
<img className="subImg" src={paris}></img>
<p className="subImgTitle">Paris</p>
<p className="subImgText">Hotels from £?</p>
</div>
</div>
And this is my new code with firebase:
destinations?.map(destination => {
return (
<div className="grid">
<div className="grid-child">
<img className="subImg" src={destination.img}></img>
<p className="subImgTitle">{destination.title}</p>
<p className="subImgText">Hotels from £{destination.price}</p>
</div>
</div>
)
})
In the original code, the images are all in a row however now they are all in one column. I am not too sure how to fix this so any help would be greatly appreciated. Thanks :)
If you compare the DOM rendered by each example, you will see that the problem is that in the first example you have a single <div className="grid"> but in the second you wrap each image in <div className="grid">. To fix this, just be sure to create only one grid:
<div className="grid">
{ destinations?.map(destination => {
return (
<div className="grid-child">
<img className="subImg" src={destination.img}></img>
<p className="subImgTitle">{destination.title}</p>
<p className="subImgText">Hotels from £{destination.price}</p>
</div>
)
})
}
</div>
As a next step, consider refactoring a GridChild component that encapsulates the HTML for each image in the grid.
I am trying to use a bootstrap-react component <Collapse> that will be a child of a <Cart> component::
<div>
<Cart></Cart>
</div>
This is the part of the render of Cart component:
<Collapse>
<div className="row">
<hr/>
<div className="col-md-2"></div>
<div className="col-md-2"></div>
<div className="col-md-1"></div>
<div className="col-md-2">Upfront</div>
<div className="col-md-1"></div>
<div className="col-md-2">Monthly</div>
<div className="col-md-2"></div>
</div>
</Collapse>
This is the error I get:
Invariant Violation: React.Children.only expected to receive a single React element child.
Why do I get React.Children only expected error?
Remove the < Collapse /> from the Cart component.
<Collapse in={test}>
<Cart></Cart>
</Collapse>
cart
<div className="row">
<div className="col-md-2"></div>
<div className="col-md-2">TOTAL</div>
<div className="col-md-2">Upfront</div>
<div className="col-md-2">Monthly</div>
<div className="col-md-2"></div>
</div>
Hope this helps!
I have a layout with 4 columns, 4x col-md-3. When I try to make the screen smaller, these columns have to behave to first 3 columns, then 2, and then 1 when the screen is too small.
But they don't, the columns just become smaller, and don't move beneath the other columns.
I must be missing something.
Code:
<div class="row-fluid vakanties_strip_wrapper">
<div ng-repeat="vakantie in vakanties">
<a ui-sref="details_vakantie/({ vakantieId: vakantie.ID })">
<div class="col-lg-3">
<div class="vakantie_blok" ng-class="$even ? 'red' : 'blue'">
<div class="vakantie_strip_img">
SOME IMAGE
</div>
<div class="vakantie_strip_tekst_beschr">
SOME TEXT
</div>
</div>
</div>
</a>
</div>
<div class="clearfix"></div>
</div>
Try with this option.
<div class="row-fluid vakanties_strip_wrapper">
<div ng-repeat="vakantie in vakanties">
<a ui-sref="details_vakantie/({ vakantieId: vakantie.ID })">
<div class="col-xs-12 col-sm-6 col-lg-3">
<div class="vakantie_blok" ng-class="$even ? 'red' : 'blue'">
<div class="vakantie_strip_img">
SOME IMAGE
</div>
<div class="vakantie_strip_tekst_beschr">
SOME TEXT
</div>
</div>
</div>
</a>
</div>
<div class="clearfix"></div>