I have an array of objects which contain name and description.
Name is short and few charachters. But description may be vary in length.
I want to display this data inside Cards in my react project. I tried using react-bootstrap.
What I want to do is, I want to show cards with same height and length irrespective to the details inside it. And if space in one row is not enough for all the cards, then it should go to the next line.
I want this structure to be behaved like row-col in bootstrap.
How do I do this in react js? using react-bootstrap or any other component?
I use this:
1. Container - flex-direction: row
2. Item - max-height and width
3. Item inner - use padding or for example width: 90%. All limits and sizes define in this component. It will prevent different sizes of columns.
Here is an example
https://codepen.io/team/css-tricks/pen/EKEYob
- than define item inner with specific sizes
/ Define your component Item
and simply map through array with objects.
If you want to use react, import Bootstrap library and use their components
I used bulma during a little project I was toying with at one point and it helped me do exactly as you described.
https://bulma.io/documentation/components/card/
You can use flexbox for equal height boxes
.list {
display: flex;
flex-wrap: wrap;
}
.list-item {
display: flex;
padding: 0.5em;
width: 33.33%;
}
.list-content {
display: flex;
flex-direction: column;
background-color: #fff;
padding: 1em;
width: 100%;
}
.list-content p {
flex: 1 0 auto;
}
<ul class="list">
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>
Link
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
Link
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
Link
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur optio ipsa fuga vel repudiandae impedit illum delectus nihil error animi nobis quaerat quidem, amet, praesentium aspernatur inventore numquam! Totam, dolorem inventore reprehenderit, culpa obcaecati!</p>
Link
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo veniam tempore vero velit deleniti corporis recusandae placeat eum repellendus modi architecto, iste, numquam nulla, praesentium fuga soluta eos consequatur sequi expedita! Ea aspernatur explicabo optio ducimus officia blanditiis voluptas possimus veniam maxime!</p>
Link
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum molestiae esse dolore corporis velit fugiat ipsam tempore optio dicta. Magnam iusto facere, maxime! Praesentium quo laborum, deserunt adipisci. Ipsam officia delectus repudiandae, aperiam magnam blanditiis fuga similique.</p>
Link
</div>
</li>
</ul>
Related
Is it possible to apply scroll-snap to grand-children nested in children with overflow applied ? I can't seem to make it work.
What I aim to do is have a list of div with each a fixed height on which the viewport should snap vertically
html {
margin: 0;
scroll-snap-type: y mandatory;
overflow-x: hidden;
}
.horizontal-scroll {
max-width: 100vw;
}
.child {
width: 150vw;
scroll-snap-align: center;
height: 80vh;
background-color: rgb(143, 204, 241);
padding: 20px 15px;
}
.child:nth-child(even) {
background-color: rgb(133, 243, 155);
}
<!DOCTYPE html>
<html>
<head
</head>
<body>
<div class="horizontal-scroll">
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div> <div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
</div>
</body>
</html>
Homewer, I would also like the content to be horizontally-scrollable - as their content stretch beyond the viewport width.
They must also scroll together, so using overflow-x on each of them is not possible here.
To do so, I've wrapped the child in a scrollable-wrapper that is horizontally scrollable ( overflow-x : scroll ) and have a fixed width.
And this breaks the vertical scroll snap.
Could someone tell me if there's something I missed or if there's an alternative ?
Note : since each child have a fixed height, I would not mind using scroll-snap-points-y but it has been totally dropped on almost every browser. Is there a way to reproduce this behaviour ?
Edit : I might try this for the snap-point. It's jQuery based.
Vertical scrolling snap jQuery
Snippet
html {
margin: 0;
scroll-snap-type: y mandatory;
overflow-x: hidden;
}
.horizontal-scroll {
max-width: 100vw;
overflow-x: scroll;
}
.child {
width: 150vw;
scroll-snap-align: center;
height: 80vh;
background-color: rgb(143, 204, 241);
padding: 20px 15px;
}
.child:nth-child(even) {
background-color: rgb(133, 243, 155);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="horizontal-scroll">
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div> <div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
</div>
</body>
</html>
I'm trying to create function in js to swap content of webpage using .style.display = "none" or "block" but the main problem is that there are few different divs with different id's for that. The main aim of doing this is chagning content after clicking specific buttons without loading new page. The biggest problem for me is creating script which will change "id"
independently of what id was before. Normally I could write all of id's one by one and just swap them but this is not the case. Content should be changed automatically so no matter what id was before it will replace for specific one after pressing button.
I have tried with querySelector in many ways by changing id with class, by using remove / set Attribute but none of these methods work for me. Im trying to write this fuction for 2 weeks and I don't have any ideas.
I'm worried that bootstrap classes may cause problem with this...
Can someone help me with this? Any tips?
This is my first post here so if I did something wrong, sorry for that.
I cannot paste here my code as everything is on my company laptop which I left when I was finish my job.
Here is an agnostic approach using no HTML ids or classes.
const container = document.querySelector('.container');
const buttons = container.querySelectorAll('button');
const divs = container.querySelectorAll(':scope > div');
function handleButtonClick() {
this.previousElementSibling.classList.toggle('hide');
}
buttons.forEach(button => {
button.addEventListener('click', handleButtonClick);
});
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.hide {
display: none;
}
<div class="container">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
</div>
jsFiddle
I've looked everywhere and cannot seem to find a solution. I am using HTML5's native drag and drop features, which are working great, until I drag a card over another card and they're combining. I don't want them to combine but to drop under the next card.
I assume it's something to do with the appendChild or the fact the cards are within the droppable wrapper? But I can't seem to find another way... Any help?
The codepen is here: https://codepen.io/_and_why_/pen/RyVGPG
<div class="wrap__global">
<div class="wrap__col col__ideas" id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
<h2 class="col__title">Ideas</h2>
<div id="card0" class="wrap__card" draggable="true" ondragstart="dragstart_handler(event);">
<h2>Dmmy Idea</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, libero asperiores! Iusto ut, est, facilis dignissimos assumenda sit neque blanditiis deleniti eum libero facere aspernatur numquam repudiandae quas labore enim!</p>
</div>
<div id="card1" class="wrap__card" draggable="true" ondragstart="dragstart_handler(event);">
<h2>Dmmy Idea 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, libero asperiores! Iusto ut, est, facilis dignissimos assumenda sit neque blanditiis deleniti eum libero facere aspernatur numquam repudiandae quas labore enim!</p>
</div>
</div>
<div class="wrap__col col__prom" id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
<h2 class="col__title">Promising</h2>
<div id="card2" class="wrap__card" draggable="true" ondragstart="dragstart_handler(event);">
<h2>Dummy promise</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex necessitatibus nobis quasi odit, harum quis culpa. Ad blanditiis deleniti officia, at ducimus ratione, aliquam, ullam, architecto eum tempora nam nulla!</p>
</div>
</div>
<div class="wrap__col col__do" id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
<h2 class="col__title">Do</h2>
<div id="card3" class="wrap__card" draggable="true" ondragstart="dragstart_handler(event);">
<h2>Do dummy idea 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi unde non dolor corporis repellendus neque modi? Excepturi soluta placeat, quos aliquam enim, tenetur aspernatur officiis hic, quia, rerum iusto alias!</p>
</div>
</div>
</div>
const card = document.querySelectorAll('.wrap__card');
const columns = document.querySelectorAll('.wrap__col');
function dragstart_handler(e) {
e.dataTransfer.setData('text/plain', e.target.id);
e.dropEffect = "move";
}
function dragover_handler(e) {
e.preventDefault();
e.stopPropogation();
e.dataTransfer.dropEffect = "move";
}
function drop_handler(e) {
e.preventDefault();
var data = e.dataTransfer.getData("text/plain");
e.target.appendChild(document.getElementById(data));
}
In case anyone else comes looking, I figured it out. I added the noAllowDrop function to the cards and now you can't drag on top of them.
<div id="card2" class="wrap__card" draggable="true" ondragstart="dragstart_handler(event);" ondragover="noAllowDrop(event)">
<h2>Dummy promise</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex necessitatibus nobis quasi odit, harum quis culpa. Ad blanditiis deleniti officia, at ducimus ratione, aliquam, ullam, architecto eum tempora nam nulla!</p>
</div>
function noAllowDrop(ev) {
ev.stopPropagation();
}
I have this code
$('.description').hide();
$('li').click(function() {
var id = $(this).attr("id");
$('#product-' + id).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="product-1">Product 1</li>
<li id="product-2">Product 2</li>
<li id="product-3">Product 3</li>
<li id="product-4">Product 4</li>
</ul>
<div class="description-container">
<div class="description" id="product-1">
<h2>Product 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde est necessitatibus illo ducimus impedit debitis facere amet, distinctio explicabo ab, qui modi molestias molestiae incidunt omnis. Quisquam, labore vero amet.</p>
</div>
<div class="description" id="product-2">
<h2>Product 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio similique, explicabo voluptatibus. Id sit deserunt impedit, incidunt consequuntur quam quae, dolor non quaerat rem debitis vitae error ipsa quo dignissimos!</p>
</div>
<div class="description" id="product-3">
<h2>Product 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi distinctio molestias culpa enim architecto optio ratione, saepe, ullam libero. Mollitia quis, ipsum similique in inventore aut officia optio quam odio?</p>
</div>
<div class="description" id="product-4">
<h2>Product 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est distinctio nam minus unde provident, fugit doloremque minima rerum ullam nemo, rem culpa ipsa fugiat quas. Officiis error animi omnis sunt.</p>
</div>
</div>
What I want is when I click on li#product-1 , .description-container #product-1 appears.
Same thing if I click on li#product-2, etc.
I try something in jQuery but it does not work.
First, prepending #product- to the the ids of your li elements will give something like "#product-product-1", which won't match anything.
Even if we did correct that, you can't have multiple elements with the same id -- there's no differentiation li#product-1 from div#product-1. ids must be unique; best-case, you'll select the li itself since it's the first match.
Instead, add a data-... attribute to the lis, and use that:
$('.description').hide();
$('li').click(function() {
var id = $(this).data("target");
$('#product-' + id).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li data-target="1">Product 1</li>
<li data-target="2">Product 2</li>
<li data-target="3">Product 3</li>
<li data-target="4">Product 4</li>
</ul>
<div class="description-container">
<div class="description" id="product-1">
<h2>Product 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde est necessitatibus illo ducimus impedit debitis facere amet, distinctio explicabo ab, qui modi molestias molestiae incidunt omnis. Quisquam, labore vero amet.</p>
</div>
<div class="description" id="product-2">
<h2>Product 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio similique, explicabo voluptatibus. Id sit deserunt impedit, incidunt consequuntur quam quae, dolor non quaerat rem debitis vitae error ipsa quo dignissimos!</p>
</div>
<div class="description" id="product-3">
<h2>Product 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi distinctio molestias culpa enim architecto optio ratione, saepe, ullam libero. Mollitia quis, ipsum similique in inventore aut officia optio quam odio?</p>
</div>
<div class="description" id="product-4">
<h2>Product 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est distinctio nam minus unde provident, fugit doloremque minima rerum ullam nemo, rem culpa ipsa fugiat quas. Officiis error animi omnis sunt.</p>
</div>
</div>
Firstly you are appending the li id to product- which means you're looking for elements called product-product-1, which don't exist. Secondly your HTML has duplicate id attributes on the li and the related div elements which is invalid.
A better approach would be to use the index() from the clicked li to find the related .description. Try this:
$('li').click(function() {
$('.description').hide().eq($(this).index()).show();
});
.description {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
<li>Product 4</li>
</ul>
<div class="description-container">
<div class="description">
<h2>Product 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde est necessitatibus illo ducimus impedit debitis facere amet, distinctio explicabo ab, qui modi molestias molestiae incidunt omnis. Quisquam, labore vero amet.</p>
</div>
<div class="description">
<h2>Product 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio similique, explicabo voluptatibus. Id sit deserunt impedit, incidunt consequuntur quam quae, dolor non quaerat rem debitis vitae error ipsa quo dignissimos!</p>
</div>
<div class="description">
<h2>Product 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi distinctio molestias culpa enim architecto optio ratione, saepe, ullam libero. Mollitia quis, ipsum similique in inventore aut officia optio quam odio?</p>
</div>
<div class="description">
<h2>Product 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est distinctio nam minus unde provident, fugit doloremque minima rerum ullam nemo, rem culpa ipsa fugiat quas. Officiis error animi omnis sunt.</p>
</div>
</div>
$('.description').hide();
$('li').click(function() {
var id = $(this).attr("id");
$('#div-'+id).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="product-1">Product 1</li>
<li id="product-2">Product 2</li>
<li id="product-3">Product 3</li>
<li id="product-4">Product 4</li>
</ul>
<div class="description-container">
<div class="description" id="div-product-1">
<h2>Product 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde est necessitatibus illo ducimus impedit debitis facere amet, distinctio explicabo ab, qui modi molestias molestiae incidunt omnis. Quisquam, labore vero amet.</p>
</div>
<div class="description" id="div-product-2">
<h2>Product 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio similique, explicabo voluptatibus. Id sit deserunt impedit, incidunt consequuntur quam quae, dolor non quaerat rem debitis vitae error ipsa quo dignissimos!</p>
</div>
<div class="description" id="div-product-3">
<h2>Product 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi distinctio molestias culpa enim architecto optio ratione, saepe, ullam libero. Mollitia quis, ipsum similique in inventore aut officia optio quam odio?</p>
</div>
<div class="description" id="div-product-4">
<h2>Product 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est distinctio nam minus unde provident, fugit doloremque minima rerum ullam nemo, rem culpa ipsa fugiat quas. Officiis error animi omnis sunt.</p>
</div>
</div>
Change the id of the description div and the selector for hiding the div.
I need to design accordion in the following way... http://jsfiddle.net/gmcLnowa/1/ as shown on fiddle.
I need to two things to be fixed.
One: How to keep first Tab open by default.
Second: How to show each active tab in different colour when that particular tab contents are active or visible.
Let us say when active
Example One: In Blue colour
Example Two: in red colour
Example Three: In yellow colour.
<div id="accordion">
<ul>
<li>
Example one
</li>
<li>
Example two
</li>
<li>
Example three
</li>
</ul>
<div id="one" class="accordion">
ONE Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
</div>
<div id="two" class="accordion">
TWO Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
</div>
<div id="three" class="accordion">
THREE Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
</div>
</div>
You can trigger a click on the first anchor on ready() to show the first accordian by default: Note that you should trigger it on the native element rather than the jQuery element.
JS:
$("a").click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
})
$("a:first")[0].click()
CSS:
a[href="#one"].active{
background:blue !important;
}
a[href="#two"].active{
background:red !important;
}
a[href="#three"].active{
background:yellow !important;
}
Demo
this is possible with jQuery
Example one
chage color of custom color attribute that you want
$('#accordion a').click(function(){
$('#accordion a').css('backgroundColor','transparent');
$(this).css('backgroundColor',$(this).attr('colr'));
});
fiddle
You should alter your HTML to get this effect.
Added CSS:
#accordion div#one.accordion:target + a {
color: blue;
}
#accordion div#two.accordion:target + a {
color: red;
}
#accordion div#three.accordion:target + a {
color: yellow;
}
Altered HTML: (example)
<div id="accordion">
<ul>
<li>
<div id="one" class="accordion">ONE.......</div>
Example one
</li>
<li>
<div id="two" class="accordion">TWO.........</div>
Example two
</li>
<li>
<div id="three" class="accordion">THREE........</div>
Example three
</li>
</ul>
</div>
Working Fiddle
For the first problem, I guess the only thing you can do is to append the hash #one to your page url or to use jQuery.
For the second problem, you can add this to your css:
#one {
border-color: #C00;
}
#two {
border-color: #FF0;
}
#three {
border-color: #CF0;
}