Ascending the div based on rows - javascript

I have a list of divs with data. Each div contains a custom data. Each div have data like a table rows and column, but it shows in descending order, I want to show it in ascending order, for example the div which have multiple rows with data, it come first and the div that have less rows come second and so on in dynamically.
The whole process should be dynamically, for example if any div have many rows it come first and the less rows div come to next and so on, the whole process is based on data entry.
Below you can find an example of what I am thinking of, yet it's not working.
image example for the better understanding
.justrow {
display: flex;
justify-content: space-evenly;
}
.table {
display: table;
width: 25%;
border:1px solid #ccc;
height: 100%;
}
.table2 {
display: table;
width: 25%;
border:1px solid #ccc;
height: 100%;
}
.table3{
display: table;
width: 25%;
border:1px solid #ccc;
height: 100%;
}
.header {
display:table-header-group;
font-weight:bold;
}
.rowGroup {
display:table-row-group;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
width:25%;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
text-align: center;
border-left: 1px solid #ccc;
}
<div class="justrow">
<div class="table">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Bob</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table3">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Bob1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
</div>
</div>
<div class="table2">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Bob</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
</div>


You stated that the data is retrieved from a database, so you know how many rows there are in a table and can define a style="--row-count: ..." with each table retrieved.
As each main .table is a flexbox item, you can use the table row count to modify the table flexbox order property and easily change its position inside a .justrow, without Javascript manipulation:
order: 0 or unset -> place table in document creation order
order: negative or lower value -> place table before tables with higher order values
order: positive or higher value -> place table after tables with lower order values
MDN Reference: Ordering flex items
Given the above you can use custom variables for .table --row-count and .justrow --order-sign to set the required sort order for a row of tables.
Essentially, the row count determines the position of a table inside a row and the sign determines the sort direction.
The --order-sign can be defined for each .justrow individually, or just once in :root or body for all .justrow elements (for ease of the demo, in the snippet I used body to define --order-sign).
The equation is easy to understand: order = order-sign x row-count
.justrow {
--order-sign: -1
/*
-1 - Ascending order
0 - no (or document) order
1 - Descending order
*/
}
.table {
order: calc(var(--order-sign) * var(--row-count));
}
<div class="justrow">
<div class="table" style="--row-count: X">table rows</div>
<div class="table" style="--row-count: N">table rows</div>
</div>
In the snippet I added a second two-row table and a few radio buttons to toggle between sort orders:
/* ADDED */
body { --order-sign: 0 }
.table {
order: calc(var(--order-sign) * var(--row-count));
}
/**/
.justrow {
display: flex;
justify-content: space-evenly;
/* added for demo */
flex-flow: row wrap;
gap: 1rem;
}
.table {
flex: 1; /* added for demo */
width: 20%; /* from 25% for demo */
display: table;
border: 1px solid #ccc;
height: 100%;
}
.header {
display: table-header-group;
font-weight: bold;
}
.rowGroup {
display: table-row-group;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 25%;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
text-align: center;
border-left: 1px solid #ccc;
}
fieldset { margin: 0; margin-bottom: 1rem; }
[red] { color: red; font-weight: bold }
<fieldset>
<legend> Sort Order </legend>
<label for="ord1" title="document order">
<input id="ord1" class="radio" type="radio" name="group" checked
oninput="document.body.style.setProperty('--order-sign', 0);">
(None)
</label>
<label for="ord2" title="most rows first">
<input id="ord2" class="radio" type="radio" name="group"
oninput="document.body.style.setProperty('--order-sign', -1);">
(Asc)
</label>
<label for="ord3" title="least rows first">
<input id="ord3" class="radio" type="radio" name="group"
oninput="document.body.style.setProperty('--order-sign', 1);">
(Des)
</label>
<br><br>
<span>MDN Reference: <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></span>
</fieldset>
<div class="justrow">
<div class="table" style="--row-count: 2">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 1</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table" style="--row-count: 8">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 2</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table" style="--row-count: 5">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 3</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table" style="--row-count: 2">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 4</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
</div>

Related

How to remove gap between column ordering in Bootstrap

I have created 3 cards with 2 widgets in the sidebar. To make it responsive I have used bootstrap 4 column ordering.
Now the issue I'm facing is if I have 2 columns in one row and the right column is larger than the left column it shows space in-between card 1 and card 2 because card 1 is smaller than widget 1 or 2.
Can anyone help me how can I remove this gap?
Codeply link for better responsive viewing:
https://www.codeply.com/go/8cNp9dUyE5
My code preview is below:
.left-panel {
background: gray;
}
.box1,
.box2,
.box3 {
background: white;
height: 50px;
border: 1px solid red;
margin-bottom: 20px;
}
.right-sidebar, .bg-pink {
background: pink;
}
<div class="container">
<div class="row">
<div class="col-12 bg-pink">
<div class="row d-md-block">
<div class="left-panel col-md-8 order-0 float-left">
<div class="box1 mt-2"><p>Box 1</p></div>
</div>
<div class="right-sidebar col-md-4 order-3 float-left">Widget 1</div>
<div class="right-sidebar col-md-4 order-1 float-left">
<p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>
</div>
<div class="left-panel col-md-8 order-3 float-left">
<div class="box2 mt-2 ">Box 2</div>
</div>
<div class="left-panel col-md-8 order-5 float-left">
<div class="box3 mt-2">Box 3</div>
</div>
</div>
</div>
</div>
</div>
Real-life example: https://prnt.sc/ouscan
enter image description here

It's not totally clear to me what you are trying to do here, but simplifying your classes will remove the gap:
<div class="container">
<div class="row">
<div class="left-panel col-md-8">
<div class="box1 mt-2"><p>Box 1</p></div>
<div class="box2 mt-2">Box 2</div>
<div class="box3 mt-2">Box 3</div>
</div>
<div class="right-sidebar col-md-4">
<p>Widget 1</p><p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>
</div>
</div>
</div>
You can re-introduce the ordering classes if needed, but this will at least remove the gap. Depending on what the contents of the boxes and the widgets are, you may want to include rows within the two columns also.
Edit
If you were to create a re-usable component that represents your right side bar this would be a bit cleaner, but here is an option:
<div class="container">
<div class="row">
<div class="left-panel col-md-8">
<div class="box1 mt-2"><p>Box 1</p></div>
<div class="right-sidebar d-md-none">
<p>Widget 1</p><p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>
</div>
<div class="box2 mt-2">Box 2</div>
<div class="box3 mt-2">Box 3</div>
</div>
<div class="right-sidebar d-sm-none d-md-block col-md-4">
<p>Widget 1</p><p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>
</div>
</div>
</div>

To achieve this you might want to simplify your html and wrap your elements sort of like this:
<div class="container">
<div class="row">
<div class="col-md-8">
BOXES GO HERE
</div>
<div class="col-md-4">
SIDEBAR GOES HERE
</div>
</div>
</div>
The floats are battling what the bootstrap grid does automatically.
NEW This might be more what you are looking for using row-eq-height:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row row-eq-height" style="background-color: blue;">
<div class="col-md-8">
<div class="box1 mt-2">
<p>Box 1</p>
</div>
</div>
<div class="col-md-4">
<p>Widget 1</p>
</div>
</div>
<div class="row row-eq-height" style="background-color: red;">
<div class="col-md-8">
<div class="box1 mt-2">
<p>Box 2</p>
</div>
</div>
<div class="col-md-4">
<p>Widget 2</p>
<p>Continue Widget 2</p>
<p>Widget 2 About to End</p>
<p>Widget 2 Ends</p>
</div>
</div>
<div class="row row-eq-height" style="background-color: yellow;">
<div class="col-md-8">
<div class="box1 mt-2">
<p>Box 3</p>
</div>
</div>
<div class="col-md-4">
<p>Widget 3</p>
</div>
</div>
</div>

Combining my HTML and CSS together?

I have here a user profile. I have the html and css code perfect the way I want it.
But what I need now is to combine my html and css together. But I am not sure how to. Because without the css it changes the display of the user profile.
Could someone help me please?
$(function() {
$('#profile-image1').on('click', function() {
$('#profile-image-upload').click();
});
});
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border: 2px solid #03b1ce;
}
.tital {
font-size: 16px;
font-weight: 500;
}
.bot-border {
border-bottom: 1px #f8f8f8 solid;
margin: 5px 0 5px 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs
</h2>
<div class="col-md-7 ">
<div class="panel panel-default">
<div class="panel-heading">
<h4>User Profile</h4>
</div>
<div class="panel-body">
<div class="box box-info">
<div class="box-body">
<div class="col-sm-6">
<div align="center"> <img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive">
<input id="profile-image-upload" class="hidden" type="file">
<div style="color:#999;">click here to change profile image</div>
<!--Upload Image Js And Css-->
</div>
<br>
<!-- /input-group -->
</div>
<div class="col-sm-6">
<h4 style="color:#00b1b1;">Prasad Shankar Huddedar </h4>
</span>
<span><p>Aspirant</p></span>
</div>
<div class="clearfix"></div>
<hr style="margin:5px 0 5px 0;">
<div class="col-sm-5 col-xs-6 tital ">First Name:</div>
<div class="col-sm-7
col-xs-6 ">Prasad</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Middle Name:</div>
<div class="col-sm-
7"> Shankar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Last Name:</div>
<div class="col-sm-
7"> Huddedar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Joining:</div>
<div class="col-sm-7">15 Jun 2016</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Birth:</div>
<div class="col-
sm-7">11 Jun 1998</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Place Of Birth:</div>
<div class="col-
sm-7">Shirdi</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Nationality:</div>
<div class="col-sm-
7">Indian</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Relition:</div>
<div class="col-sm-
7">Hindu</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
</div>
</div>
</div>
</div>

All You Need To Do Is Rap It In <style> ADD CODE HERE </style>

Just wrap the CSS in <style> tags.
Example
<style> /* Note the opening style tag */
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border:2px solid #03b1ce;
}
.tital {
font-size:16px;
font-weight:500;
}
.bot-border {
border-bottom:1px #f8f8f8 solid;
margin:5px 0 5px 0;
}
</style> /* When you're done with the CSS, close the style tag. */
You can keep it exactly where you already have it in your HTML. Here is the exact code you'd use:
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<div class="col-md-7 ">
<div class="panel panel-default">
<div class="panel-heading">
<h4>User Profile</h4>
</div>
<div class="panel-body">
<div class="box box-info">
<div class="box-body">
<div class="col-sm-6">
<div align="center">
<img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive">
<input id="profile-image-upload" class="hidden" type="file">
<div style="color:#999;">click here to change profile image</div>
<!--Upload Image Js And Css-->
</div>
<br>
<!-- /input-group -->
</div>
<div class="col-sm-6">
<h4 style="color:#00b1b1;">Prasad Shankar Huddedar</h4>
<span><p>Aspirant</p></span>
</div>
<div class="clearfix"></div>
<hr style="margin:5px 0 5px 0;">
<div class="col-sm-5 col-xs-6 tital">First Name:</div>
<div class="col-sm-7
col-xs-6 ">Prasad</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital">Middle Name:</div>
<div class="col-sm-
7"> Shankar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital">Last Name:</div>
<div class="col-sm-7"> Huddedar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Joining:</div>
<div class="col-sm-7">15 Jun 2016</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Birth:</div>
<div class="col-sm-7">11 Jun 1998</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Place Of Birth:</div>
<div class="col-sm-7">Shirdi</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Nationality:</div>
<div class="col-sm-7">Indian</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Relition:</div>
<div class="col-sm-7">Hindu</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#profile-image1').on('click', function() {
$('#profile-image-upload').click();
});
});
</script>
</div>
<style>
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border: 2px solid #03b1ce;
}
.tital {
font-size: 16px;
font-weight: 500;
}
.bot-border {
border-bottom: 1px #f8f8f8 solid;
margin: 5px 0 5px 0;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border: 2px solid #03b1ce;
}
.tital {
font-size: 16px;
font-weight: 500;
}
.bot-border {
border-bottom: 1px #f8f8f8 solid;
margin: 5px 0 5px 0
}
</style>
<script>
$(function() {
$('#profile-image1').on('click', function() {
$('#profile-image-upload').click();
});
});
</script>
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs
</h2>
<div class="col-md-7 ">
<div class="panel panel-default">
<div class="panel-heading">
<h4>User Profile</h4>
</div>
<div class="panel-body">
<div class="box box-info">
<div class="box-body">
<div class="col-sm-6">
<div align="center"> <img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive">
<input id="profile-image-upload" class="hidden" type="file">
<div style="color:#999;">click here to change profile image</div>
<!--Upload Image Js And Css-->
</div>
<br>
<!-- /input-group -->
</div>
<div class="col-sm-6">
<h4 style="color:#00b1b1;">Prasad Shankar Huddedar </h4>
</span>
<span><p>Aspirant</p></span>
</div>
<div class="clearfix"></div>
<hr style="margin:5px 0 5px 0;">
<div class="col-sm-5 col-xs-6 tital ">First Name:</div>
<div class="col-sm-7
col-xs-6 ">Prasad</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Middle Name:</div>
<div class="col-sm-
7"> Shankar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Last Name:</div>
<div class="col-sm-
7"> Huddedar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Joining:</div>
<div class="col-sm-7">15 Jun 2016</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Birth:</div>
<div class="col-
sm-7">11 Jun 1998</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Place Of Birth:</div>
<div class="col-
sm-7">Shirdi</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Nationality:</div>
<div class="col-sm-
7">Indian</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Relition:</div>
<div class="col-sm-
7">Hindu</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
</div>
</div>
</div>
</div>
Put your css code in <style></style> tag and js in <script></script> tag. That's it

jQuery - specific variable value for each element

I am trying to create an adaptive circle element, that will have the same height as its width, the code is here:
jQuery(document).ready(function() {
//Adaptive Circle
var width = jQuery(".circle-adaptive").width();
jQuery(".circle-adaptive").css({"height":width+"px", "line-height":width+"px"});
});
It works when I have one set of such circles, but when I create another div with different division:
<div class="container" style=" border:2px solid black">
<div class="container onethird">
<div class="circle-adaptive red">R</div>
</div>
<div class="container onethird">
<div class="circle-adaptive green">G</div>
</div>
<div class="container onethird">
<div class="circle-adaptive blue">B</div>
</div>
</div>
<div class="container" style="border:2px solid black">
<div class="container onequarter">
<div class="circle-adaptive pink"></div>
</div>
<div class="container onequarter">
<div class="circle-adaptive yellow"></div>
</div>
<div class="container onequarter">
<div class="circle-adaptive gray"></div>
</div>
<div class="container onequarter">
<div class="circle-adaptive magenta"></div>
</div>
</div>
It does no longer work and the circles keep their height generated in the first case.
Is there a way to make the variable generate once another element is created?

It works. But second container has no texts, so you don't see anything.
<div class="container" style=" border:2px solid black">
<div class="container onethird">
<div class="circle-adaptive red">R</div>
</div>
<div class="container onethird">
<div class="circle-adaptive green">G</div>
</div>
<div class="container onethird">
<div class="circle-adaptive blue">B</div>
</div>
</div>
<div class="container" style="border:2px solid black">
<div class="container onequarter">
<div class="circle-adaptive pink">1</div>
</div>
<div class="container onequarter">
<div class="circle-adaptive yellow">2</div>
</div>
<div class="container onequarter">
<div class="circle-adaptive gray">3</div>
</div>
<div class="container onequarter">
<div class="circle-adaptive magenta"></div>
</div>
</div>
Here tested for you with filled text: (https://jsfiddle.net/L0rf3vam/)

bootstrap layout row with different heights

i want to add bootstrap row with col-lg-3class. my div contains different heights.hope to add articles with different length texts.
my output is but designed expected output and here. code as follows
<div class="row">
<div class="col-lg-3" style="background-color: #c5d5cb"><p style="height: 150px">1</p></div>
<div class="col-lg-3" style="background-color: #9fa8a3"><p style="height: 200px">2</p></div>
<div class="col-lg-3" style="background-color: #e3e0cf"><p style="height: 50px">3</p></div>
<div class="col-lg-3" style="background-color: #b3c2bf"><p style="height: 60px">4</p></div>
<div class="col-lg-3" style="background-color: #173e43"><p style="height: 44px">5</p></div>
<div class="col-lg-3" style="background-color: #b56969"><p style="height: 70px">6</p></div>
<div class="col-lg-3" style="background-color: #daad86"><p style="height: 20px">7</p></div>
<div class="col-lg-3" style="background-color: #5a5c51"><p style="height: 35px">8</p></div>
</div>
Updated
values put as 1,2,3 etc comes from mysql database. so the height is equal to text row numbers. php code is follows
`
foreach ($value as $add) {
echo "<div class='col-md-3'><p>";
echo $add->item;
echo "</p></div>";
}
?>`

Perhaps, I ruin your original code. I change everywhere. I hope this helps you.
Add customized stylesheet inside tag head:
<style>
.col-md-3{padding:0px;} // default: 15px -> left and right.
</style>
Here's the code:
<div class="container">
<div class="col-md-12">
<div class="col-md-3">
<div class="col-md-12" style="background-color: #c5d5cb;height: 150px;">
1
</div>
<div class="clearfix"></div>
<div class="col-md-12" style="background-color: #173e43;height: 44px; color:white;">
5
</div>
</div>
<div class="col-md-3">
<div class="col-md-12" style="background-color: #9fa8a3;height: 200px;">
2
</div>
<div class="clearfix"></div>
<div class="col-md-12" style="background-color: #b56969;height: 70px;">
6
</div>
</div>
<div class="col-md-3">
<div class="col-md-12" style="background-color: #e3e0cf;height: 50px;">
3
</div>
<div class="col-md-12" style="background-color: #daad86;height: 20px;">
7
</div>
</div>
<div class="col-md-3">
<div class="col-md-12" style="background-color: #b3c2bf;height: 60px;">
4
</div>
<div class="col-md-12" style="background-color: #5a5c51;height: 35px;">
8
</div>
</div>
</div>
</div>
Because I don't know what version of your bootstrap, I use v3.1.1 for clearfix ... you can customize this based on your version.

You are on right track. This will definitely work. You need to use col-md-3 like this :
<div class="row">
<div class="col-md-3">
<p>1</p>
<p>5</p>
</div>
<div class="col-md-3">
<p>2</p>
<p>6</p>
</div>
<div class="col-md-3">
<p>3</p>
<p>7</p>
</div>
<div class="col-md-3">
<p>4</p>
<p>8</p>
</div>
</div>

I think try this
<div class="row">
<div class="col-lg-5">
<div id="1" ></div>
<div id="5" ></div>
</div>
<div class="col-lg-5">
<div id="2" ></div>
<div id="6" ></div>
</div>
<div class="col-lg-5">
<div id="3" ></div>
<div id="7" ></div>
</div>
<div class="col-lg-5">
<div id="4" ></div>
<div id="8" ></div>
</div>
</div>
Hope this will help you..

You can first use columns with col-lg-3 and then place your blocks inside each one. That way you will get your desired result.
HTML:
<div class="container">
<div class="row">
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #c5d5cb"><p style="height: 150px">1</p></div>
<div class="left-block" style="background-color: #173e43"><p style="height: 44px">5</p></div>
</div>
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #9fa8a3"><p style="height: 200px">2</p></div>
<div class="left-block" style="background-color: #b56969"><p style="height: 70px">6</p></div>
</div>
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #e3e0cf"><p style="height: 50px">3</p></div>
<div class="left-block" style="background-color: #daad86"><p style="height: 20px">7</p></div>
</div>
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #b3c2bf"><p style="height: 60px">4</p></div>
<div class="left-block" style="background-color: #5a5c51"><p style="height: 35px">8</p></div>
</div>
</div>
</div>
CSS:
.grid-row{
margin-left: -15px;
margin-right: -15px;
}
.left-block{
float: left;
width: 100%;
}
Jsfiddle: https://jsfiddle.net/debraj/6dufsc4u/1/
Hope that helps.

Find div and change color

I have the following table, I want to choose an option and toggle the color between them. but can not repeat (only one option should be in green...) I've tried everything... =/
$(".roundedOpt").click(function(){
var opt = $(this);
$(opt).attr("style","background:#4AA14A;");
});
http://jsfiddle.net/HVw7E/326/

To toggle one in each list, do
$(".roundedOpt").on('click', function () {
var opts = $(this).closest('td').find('.roundedOpt');
opts.not(this).css('background', '#337AB7');
$(this).css('background', '#4AA14A');
});
FIDDLE

You don't need a variable for this, just use this. :) And I just reset all your blue items to blue first, then set the this clicked item to green. I upudated your js fiddle with this:
$(".roundedOpt").click(function()
{
$(".roundedOpt").removeAttr("style");
$(this).attr("style","background:#4AA14A;");
});
table {
border: 1px solid #000;
}
.roundedOpt {
border-radius: 50%;
width: 16px;
height: 16px;
background: #337AB7;
color: white;
text-align: center;
position:relative;
z-index:1;
font-size: 11.5px;
font-weight: bold;
cursor: pointer;
}
div.dleft {
position: absolute;
}
div.dright{
width:auto;
padding-left:24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table>
<tr id="trDetail1">
<td style="vertical-align: middle;">
<span>Options list #1</span>
</td>
<td class="text-justify" style="">
<div style="float:right;padding-left:5px;">
</div><p>Select an option below:</p>
<div style="padding-top:5px;">
<div class="cont">
<div class="dleft">
<div class="roundedOpt">A</div>
</div>
<div class="dright">Option A.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">B</div>
</div>
<div class="dright">Option B.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">C</div>
</div>
<div class="dright">Option C.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">D</div>
</div>
<div class="dright">Option D.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">E</div>
</div>
<div class="dright">Option E.</div>
</div>
</div>
</td>
</tr>
<br/>
<tr id="trDetail2">
<td style="vertical-align: middle;">
<span>Options list #2</span>
</td>
<td class="text-justify" style="">
<div style="float:right;padding-left:5px;">
</div><p>Select an option below:</p>
<div style="padding-top:5px;">
<div class="cont">
<div class="dleft">
<div class="roundedOpt">A</div>
</div>
<div class="dright">Option A.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">B</div>
</div>
<div class="dright">Option B.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">C</div>
</div>
<div class="dright">Option C.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">D</div>
</div>
<div class="dright">Option D.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">E</div>
</div>
<div class="dright">Option E.</div>
</div>
</div>
</td>
</tr>
</table>

Just take off your style on click
$(".roundedOpt").click(function(){
$(".roundedOpt").attr("style","");
var opt = $(this);
$(opt).attr("style","background:#4AA14A;");
});
Look at this Fiddle

Categories