How to make content display in three columns instead of one column? - javascript

I am a beginner and learning from a tutorial using an API. I would like to change the layout of the design, and instead of having one column, I would like a three column layout. I don't know if I am using flexbox correctly.
I have tried using row and then having three columns, but somehow its not displaying correctly.I am also using bootstrap.

What you're looking for is CSS Grid, which lets you display elements in rows and columns.
Just change your flexbox to a grid with 3 equal columns:
/* display: flex; */
display: grid;
grid-template-columns: repeat(3, 1fr);

first of all, we need to clean up your HTML structure.
since in your javascript you are appending all of the cards in a class "images-container" we have to remove the duplicate divs.
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="images-container"></div>
</div>
<div class="col-md-4">
<div class="images-container"></div>
</div>
<div class="col-md-4">
<div class="images-container"></div>
</div>
</div>
</div>
and turned them into. so it will only appended into a single container and do our flex there.
<div class="container-fluid">
<div class="row">
<div class="images-container"></div>
</div>
</div>
The next one is CSS,
I added a "flex-wrap: wrap" on the "images-container" so that the cards will go into the next line whenever there is no space left.
/* Images Container */
.images-container {
width: 100%;
margin-top: 50px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
and since you are following bootstrap class names you have to add media queries on classnames with breakpoints so. it says the card will take 12 columns on xs "smallest screen" and 4 columns on medium screen.
.col-xs-12 {
width: 100%;
}
#media onyl screen and (min-width: 767px) {
.col-md-4 {
width: 33% !important;
}
}
now on javascript.
since we got our cards inside "images-container". then we need to add the classname "col-md-4" and "col-xs-12" on the card directly so it will have it's own width
// Card Container
const card = document.createElement("div");
card.classList.add("card");
card.classList.add("col-md-4");
card.classList.add("col-xs-12");
sorry for the long explanation I'm still improving my explanation skills hopefully it will help you out.

Related

Show sample images on the webapp to use for 'Upload Picture' and 'Submit'

I want my web app to show a set of sample images (sample images I will give myself)- and the user can select from among those pictures to use for the 'upload' and 'submit' button on the screen.
Basically I am deploying my ML model that makes different predictions from the image the user uploads. I want to give a few sample images to use instead so the user can better understand the models perspective.
I am not a pro on the dev side and I am having a lot of difficulty finding something similar to it. My front end is HTML, CSS, JS and my backend is on Flask.
The simplest way to display images is to have divs with background images and use flex for styling. A div will be more flexible when it comes to scaling your styles.
// css
.container{
display: flex;
gap: 5%;
flex-wrap: wrap;
}
.imageContainer {
flex: 1 1 200px;
background-image: url('https://source.unsplash.com/random');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
<div class="container">
<div class="imageContainer"></div>
<div class="imageContainer"></div>
<div class="imageContainer"></div>
<div class="imageContainer"></div>
<div class="imageContainer"></div>
<div>
You can then add more styles to your 'imageContainer' div as you add the upload buttons.

html5 vertically aligning 3 Divs even-spaced

the right Div on my html-page contains only some rows of thumnails - created dynamically in javascript - while the left Div contains 3 Sub-Divs (inner Divs) arranged vertically (also dynamically created on receiving my query-result from my webService)
In order to make it look balanced I want the
left Div to automatically adjust to the same height
as the right one (which holds the dynamically inserted thumbnails).
The 3 vertical aligned Sub-Divs in the left Div should behave like this:
Div2 with the larger Image should be vertically centered
Div1 with the header text should be vertically centered in the space above Div2
Div3 with the title text should be vertically centered in the space below Div2
.
question:
is this possible with css ?
- i.e. without calculation of the heights on dynamic creation in javascript
.
if this is possible with css
then, please, give me some hints
about which float, display, align, margin (and similar) settings
I could try for the left Container Div and for its 3 inner Divs.
I do not need to get a sample or a solution resp.
but I need some hints in plain words, some ideas
that I could try out,
and some considerations (tipps) which I should obey.
many thanks in advance.
Flexbox can do what you need:
jsfiddle: https://jsfiddle.net/ornx7oar/
.main {
display: flex;
}
.left-panel {
padding: 5px; margin-right: 5px;
background-color: green;
/*width: 30%;*/
flex: 0 0 30%; /* don't grow or shrink based on contents, 30% width (put auto if you prefer to use the width property) */
display: flex;
flex-direction: column; /* align vertically */
justify-content: space-around; /* center vertically */
}
.right-panel {}
.thumb {height: 70px; width: 150px; border: 1px solid; display: inline-block;}
* { box-sizing: border-box; margin: 0; }
<div class="main">
<div class="left-panel">
<div>first</div>
<div>second</div>
<div>third</div>
</div>
<div class="right-panel">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
I would add the same class to all three divs. In your css, add margin: 10px auto; Depending on the current code you might need to add position: relative to this class as well.
You can tweak the 10px part depending on how far apart you want them. The auto centers the divs to its parent.
As far as changing the order look at w3 schools documentation on order

conserve the some height for two bloc (dynamic row) with html css

I would like to conserve the some height for two dynamic table.
I know that the solution is by using javascipt(
document.getElementById('bloc2').style.height = document.getElementById('bloc1').clientHeight ).
Can we find other solution with the using of HTML and CSS?
First of all, please make an effort with your language skills (if you're not good at English, verify it), and use the styling tools of StackOverflow.
All the information is here, check it out. And as an answer I'd first advise not to use <table> if not really needed !
<div id="container">
<div id="block_1" class="foo">
<!-- Your HTML/text content -->
</div>
<div id="block_2" class="foo">
<!-- Your HTML/text content -->
</div>
</div>
And for CSS (the values are examples, use yours) :
#container {
width: 100%;
/* The height will be minimum 350px, depending on the content */
min-height: 350px;
/* I often use flexbox properties, it does really well the job */
display: flex;
flex-flow: row nowrap;
justify-content: center; // Default value
}
.foo {
width: 50%;
/* this value will make your 2 blocks the same height according to their container */
height: inherit;
}
Check the Flexbox properties (there are many), it can ease your work.

- CSS bootstrap, divs skip row how get neatly in a row dispite height difference -

The problem occurred on other projects, but then I made all the divs the same size. I made a print screen of my problem.
As you can see the the third div is a little longer then the others (and yes I want to keep this). My css or bootstrap wants to skip a row.
html
<div ng-repeat="work in myWork" class="col-lg-3 col-md-3 col-xs-12" id="myWorkHolders">
css
#myWorkHolders{
margin: 0px;
display: inline-table;
padding: 0px;
border: solid 1px #F4F4F4;
}
Problem
DIVS skip a row when the div above is not the same size as the others.
Question
what Css terms can I use so the divs will display under each other despite different sizes.
you can add an extra class with min-height to every div, just match the height of ur largest div and put that into css class.
<style>
.yourclass {
min-height:Xpx; //replace X with the height of your largest div.
}
</style>
and now just put this class into every div as:
<div class="col-md-3 yourclass">.col-md-3</div>
I have run into this problem before; I'm curious what other people say. Not sure if this is the best solution, but what I did that worked for me was assign a min-height to those divs. the min-height you assign will depend on the height of your largest div.
so:
#myWorkHolders{
margin: 0px;
display: inline-table;
padding: 0px;
border: solid 1px #F4F4F4;
/* the exact height specified will have to be experimented with */
min-height: 250px;
}
With bootstrap you need to use the row class to make sure the columns layout correctly no matter the height a particular column.
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
So when creating your loop you need to think about how to add in the row container after every fourth column.

CSS grid of squares laid out in columns not rows

I currently have a grid made out of square DIVs (200px x 200px each).
I have started in the top left hand corner and floated each one left so that the 2nd one is to the right of the first and the the third to the right of that and so on. When it runs out of horizontal space in it's container the next square automatically starts a new row, obviously.
This is great if you want the grid to keep getting longer vertically each time a row fills up, but I want mine to be three squares high and grow to the right hand side, so the first square goes in the top left, the 2nd underneath it, the third underneath that, then (because the container is 600px high) the 4th square should start a new column and go to the right of the first.
Is it possible to achieve this for an unspecified number of squares so it just keeps growing into new columns without resorting to javascript?
IE6 support is not necessary.
Any help would really be appreciated.
You can try CSS 3's multi columns http://www.w3.org/TR/css3-multicol/ , http://www.css3.info/preview/multi-column-layout/
Using properties like
-moz-column-width: 5em;
-webkit-column-width: 5em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
http://jsfiddle.net/Txgnk/1/
Looks like IE 10 is the first IE to support it http://caniuse.com/multicolumn
Try this,
<style>
.parent {
height:600px;
white-space: nowrap;
}
.child {
width: 200px;
height: 600px;
display:inline-block;
}
.grand-child {
width: 200px;
height: 200px;
border: 1px solid;
}
</style>
<div class="parent">
<div class="child">
<div class="grand-child"></div>
<div class="grand-child"></div>
<div class="grand-child"></div>
</div>
<div class="child">
<div class="grand-child"></div>
<div class="grand-child"></div>
<div class="grand-child"></div>
</div>
...
...
</div>

Categories

Resources