How create a complex Bootstrap 4 layout - layout

I just need put the box 7 below the box 6! But I can't...
All the code is below, to test in your machine please Include Bootstrap 4 from a CDN: https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp
Ps: that is the desktop version, I don't need think about this layout in mobile version now.
Thank You!
.row {
background-color: yellow;
}
.row .row>div {
border:solid 1px black;
min-height:200px;
}
#box5 {
height: 400px;
background-color: lightgray;
}
#box6 {
height: 200px;
}
#box7 {
height: 200px;
}
#box8 {
height: 600px;
background-color: lightgray;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-3">box 1</div>
<div class="col-9">box 2</div>
</div>
</div>
<div class="col-9">
<div class="row">
<div class="col-4">box 3</div>
<div class="col-8">box 4</div>
</div>
<div class="row">
<div class="col-4" id="box5">box 5</div>
<div class="col-8" id="box6">box 6</div>
<div class="col-8" id="box7">box 7</div>
</div>
</div>
<div class="col-3">
<div class="row">
<div class="col-12" id="box8">box 8</div>
</div>
</div>
</div>
</div>

#box5.col-4 and #box6.col-8 Both elements have fully occupied a row so that #box7 pushed out below #box5.
Use another div.row for #box6 and #box7 inside div.col-8.
.row {
background-color: yellow;
}
.row .row>div {
border: solid 1px black;
min-height: 200px;
}
#box5 {
height: 400px;
background-color: lightgray;
}
#box6 {
height: 200px;
}
#box7 {
height: 200px;
}
#box8 {
height: 600px;
background-color: lightgray;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-3">box 1</div>
<div class="col-9">box 2</div>
</div>
</div>
<div class="col-9">
<div class="row">
<div class="col-4">box 3</div>
<div class="col-8">box 4</div>
</div>
<div class="row">
<div class="col-4" id="box5">box 5</div>
<div class="col-8">
<div class="row">
<div class="col-12" id="box6">box 6</div>
<div class="col-12" id="box7">box 7</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="row">
<div class="col-12" id="box8">box 8</div>
</div>
</div>
</div>
</div>

Here a simple solution to create that layout dynamicly with PHP.
You can use the same logic with another web language if you prefer.
<style>
.row {
border: solid 1px black;
min-height: 200px;
}
#box2 {
background-color: lightblue;
}
#box5 {
height: 400px;
background-color: lightgray;
}
#box6 {
height: 200px;
}
#box7 {
height: 200px;
}
#box8 {
height: 600px;
background-color: lightgray;
}
.container {
background-color: lightgreen;
}
#footer {
background-color: orange;
}
</style>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<?php
$total = 6; //from 1 to 6
?>
<?php for ($i=1; $i <= $total; $i++) :
if ($i==1) :
?>
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-3">box 1</div>
<div id="box2" class="col-9">box 2</div>
</div>
</div>
<?php
endif;
if ($i==2) :
?>
<div class="col-9">
<div class="row">
<div class="col-4">box 3</div>
<?php
endif;
if ($i==3) :
?>
<div class="col-8">box 4</div>
</div>
<div class="row">
<div class="col-4" id="box5">box 5</div>
<?php
endif;
if ($i==4) :
?>
<div class="col-8">
<div class="row">
<div class="col-12" id="box6">box 6</div>
<?php
endif;
if ($i==5) :
?>
<div class="col-12" id="box7">box 7</div>
</div>
<?php
endif;
if ($i==6) :
?>
</div>
</div>
</div>
<div class="col-3">
<div class="row">
<div class="col-12" id="box8">box 8</div>
</div>
</div>
</div>
</div>
<?php
endif;
endfor;
if ($total == 1) { echo '</div></div></div></div>'; }
if ($total == 2) { echo '</div></div></div></div></div></div>'; }
if ($total == 3) { echo '</div></div></div></div></div></div>'; }
if ($total == 4) { echo '</div></div></div></div></div></div></div></div>'; }
if ($total == 5) { echo '</div></div></div></div></div></div></div>'; }
?>
<div class="container-fluid" id="footer">
<div class="row">
<div class="col-12">
</div>
</div>
</div>

Related

Equal height children images in responsive Bootstrap 4 columns. How to?

Using Bootstrap 4, I'd like to create 3 columns that adjust their width so that padding of each column is consistent and the height of each image is consistent between each column. The goal is for the width and height of each image to increase/decrease as page width changes. Notice, the height of the images and columns should always be synced. I know I can use percentages, but I was hoping there was a flexbox solution. Thanks
Codepen: https://codepen.io/danielgetsthis/pen/qJgyNx
<div class="container">
<div class="row">
<div class="col">
<a href="#" class="text-center">
<span>1</span>
<img src="http://placehold.jp/100x100.png" />
</a>
</div>
<div class="col">
<a href="#" class="text-center">
<span>2</span>
<img src="http://placehold.jp/200x100.png" />
</a>
</div>
<div class="col">
<a href="#" class="text-center">
<span>3</span>
<img src="http://placehold.jp/300x100.png" />
</a>
</div>
</div>
</div>
I'm not sure that I understand the height issue. The columns and images are the same height. To equalize the padding around the images use col-auto instead of col. This makes the columns shrink to fit the width of their content.
<div class="container">
<div class="row justify-content-center">
<div class="col-auto">
<a href="#" class="text-center">
<span>1</span>
<img src="http://placehold.jp/100x100.png" />
</a>
</div>
<div class="col-auto">
<a href="#" class="text-center">
<span>2</span>
<img src="http://placehold.jp/200x100.png" />
</a>
</div>
<div class="col-auto">
<a href="#" class="text-center">
<span>3</span>
<img src="http://placehold.jp/300x100.png" />
</a>
</div>
</div>
</div>
https://www.codeply.com/go/XtNGjb765u
body{
background-color: #eee;
box-sizing: border-box;
}
.col {
display: flex;
flex: 0;
flex-direction: initial;
}
.col a {
display: flex;
flex-wrap: wrap;
padding: 10%;
background-color: tomato;
border: 1px solid green;
color: #FFF;
font-size: 26px;
justify-content: center;
}
span{
display: block;
text-align:center;
}

How to make normal HTML page work as Chrome extension?

i design my webpage and checked all the code. it works perfect as webpage. however, when i collect all the files to work as Chrome extension file. It doesn't work. specially the "TB" button it doesn't show the other buttons
this is my .HTML
<!DOCTYPE HTML>
<html>
<head>
<script src="popup.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Page</title>
<style type="text/css">
body
{
background-color: #FFFFFF;
color: #000000;
font-family: Arial;
font-size: 13px;
margin: 0;
padding: 0;
height: 473px;
width: 1315px;
}
nav {
max-width: 500px;
border-right: 1px solid gray;
border-top: 1px solid gray;
position: absolute;left:50px;top:150px;
}
article {
margin-left: 370px;
padding: 1em;
position: absolute; top:150px;
overflow: hidden;
}
</style>
<style type="text/css">
a
{
color: #0000FF;
text-decoration: underline;
}
a:visited
{
color: #800080;
}
a:active
{
color: #FF0000;
}
a:hover
{
color: #0000FF;
text-decoration: underline;
}
#Button1
{
border: 1px #A9A9A9 solid;
background-color: #F0F0F0;
color: #000000;
font-family: Arial;
font-size: 13px;
}
#Button2
{
border: 1px #A9A9A9 solid;
background-color: #F0F0F0;
color: #000000;
font-family: Arial;
font-size: 13px;
}
#Button3
{
border: 1px #A9A9A9 solid;
background-color: #F0F0F0;
color: #000000;
font-family: Arial;
font-size: 13px;
}
.button_sub
{
border: 1px #A9A9A9 solid;
background-color: #F0F0F0;
color: #000000;
font-family: Arial;
font-size: 13px;
}
</style>
</head>
<body>
<div>
<input type="button" id="Button1" value="TB" onclick="main_clicked(1)" style="position:absolute;left:100px;top:50px;width:96px;height:25px;z-index:1;">
</div>
<div id="tb_sub" class="sub_main" style=display:none;>
<input type="button" id="Button4" class="button_sub" value="G" onclick="sub_clicked(1)" style="position:absolute;left:50px;top:100px;width:96px;height:25px;z-index:5;">
<input type="button" id="Button5" class="button_sub" value="X" onclick="sub_clicked(2)" style="position:absolute;left:150px;top:100px;width:96px;height:25px;z-index:6;">
<input type="button" id="Button6" class="button_sub" value="MA" onclick="sub_clicked(3)" style="position:absolute;left:250px;top:100px;width:96px;height:25px;z-index:7;">
<input type="button" id="Button7" class="button_sub" value="T" onclick="sub_clicked(4)" style="position:absolute;left:350px;top:100px;width:96px;height:25px;z-index:8;">
<input type="button" id="Button8" class="button_sub" value="G" onclick="sub_clicked(5)" style="position:absolute;left:450px;top:100px;width:96px;height:25px;z-index:9;">
</div>
<div id="tb_y_sub" class="subsub" style=display:none;>
<nav>
<ol>
<li style="height:20px;" onmouseover="show('tb_y_sub1')" onmouseout="hide('tb_y_sub1')">Kids</li>
<li style="height:20px;" onmouseover="show('tb_y_sub2')" onmouseout="hide('tb_y_sub2')">Hateful and Dergatory</li>
<li style="height:20px;" onmouseover="show('tb_y_sub3')" onmouseout="hide('tb_y_sub3')">ILLEGAL ACTS AND SUBSTANCES</li>
<li style="height:20px;" onmouseover="show('tb_y_sub4')" onmouseout="hide('tb_y_sub4')">SEXUAL CONTENT</li>
<li style="height:20px;" onmouseover="show('tb_y_sub5')" onmouseout="hide('tb_y_sub5')">VIOLENCE, DEATH, TRAGEDY</li>
<li style="height:20px;" onmouseover="show('tb_y_sub6')" onmouseout="hide('tb_y_sub6')">HARMFUL, DANGEROUS AND MEDICAL ACTS</li>
<li style="height:20px;" onmouseover="show('tb_y_sub7')" onmouseout="hide('tb_y_sub7')">DEMEANING AND INCENDIARY CONTENT</li>
<li style="height:20px;" onmouseover="show('tb_y_sub8')" onmouseout="hide('tb_y_sub8')">INAPPROPRIATE LANGUAGE</li>
</ol>
</nav>
<article>
<div id="tb_y_sub1" style=display:none;>
<h1>Kids</h1>
<ul data-count="even" style="list-style-type:none">
<li>Kids Sub Policy</li>
<li>Kids Sub Policy</li>
</ul>
</div>
<div id="tb_y_sub2" style=display:none;>
<h1>Hateful and Dergatory</h1>
<ul data-count="even" style="list-style-type:none">
<li>Hateful and Dergatory Sub Policy</li>
<li>Hateful and Dergatory Sub Policy</li>
</ul>
</div>
<div id="tb_y_sub3" style=display:none;>
<h1>ILLEGAL ACTS AND SUBSTANCES</h1>
<ul data-count="even" style="list-style-type:none">
<li>ILLEGAL ACTS AND SUBSTANCES Sub Policy</li>
<li>ILLEGAL ACTS AND SUBSTANCES Sub Policy</li>
</ul>
</div>
<div id="tb_y_sub4" style=display:none;>
<h1>SEXUAL CONTENT</h1>
<ul data-count="even" style="list-style-type:none">
<li>SEXUAL CONTENT Sub Policy</li>
<li>SEXUAL CONTENT Sub Policy</li>
</ul>
</div>
<div id="tb_y_sub5" style=display:none;>
<h1>VIOLENCE, DEATH, TRAGEDY</h1>
<ul data-count="even" style="list-style-type:none">
<li>VIOLENCE, DEATH, TRAGEDY Sub Policy</li>
<li>VIOLENCE, DEATH, TRAGEDY Sub Policy</li>
</ul>
</div>
<div id="tb_y_sub6" style=display:none;>
<h1>HARMFUL, DANGEROUS AND MEDICAL ACTS</h1>
<ul data-count="even" style="list-style-type:none">
<li>HARMFUL, DANGEROUS AND MEDICAL ACTS Sub Policy</li>
<li>HARMFUL, DANGEROUS AND MEDICAL ACTS Sub Policy</li>
</ul>
</div>
<div id="tb_y_sub7" style=display:none;>
<h1>DEMEANING AND INCENDIARY CONTENT</h1>
<ul data-count="even" style="list-style-type:none">
<li>DEMEANING AND INCENDIARY CONTENT Sub Policy</li>
<li>DEMEANING AND INCENDIARY CONTENT Sub Policy</li>
</ul>
</div>
<div id="tb_y_sub8" style=display:none;>
<h1>INAPPROPRIATE LANGUAGE</h1>
<ul data-count="even" style="list-style-type:none">
<li>INAPPROPRIATE LANGUAGE Sub Policy</li>
<li>INAPPROPRIATE LANGUAGE Sub Policy</li>
</ul>
</div>
</article>
</div>
<div id="tb_x_sub" class="subsub" style=display:none;>
<nav>
<ol>
<li style="height:20px;" onmouseover="show('sub1')" onmouseout="hide('sub1')">xPolicy 1</li>
<li style="height:20px;" onmouseover="show('sub2')" onmouseout="hide('sub2')">xPolicy 2</li>
</ol>
</nav>
<article>
<div id="sub1">
<h1>Policy 1</h1>
<ul data-count="even" style="list-style-type:none">
<li>Sub Policy 1</li>
<li>Sub Policy 1</li>
</ul>
</div>
</article>
</div>
<div id="tb_ma_sub" class="subsub" style=display:none;>
<nav>
<ol>
<li style="height:20px;" onmouseover="show('sub1')" onmouseout="hide('sub1')">maPolicy 1</li>
<li style="height:20px;" onmouseover="show('sub2')" onmouseout="hide('sub2')">maPolicy 2</li>
</ol>
</nav>
<article>
<div id="sub1">
<h1>Policy 1</h1>
<ul data-count="even" style="list-style-type:none">
<li>Sub Policy 1</li>
<li>Sub Policy 1</li>
</ul>
</div>
</article>
</div>
<div id="tb_t_sub" class="subsub" style=display:none;>
<nav>
<ol>
<li style="height:20px;" onmouseover="show('sub1')" onmouseout="hide('sub1')">tPolicy 1</li>
<li style="height:20px;" onmouseover="show('sub2')" onmouseout="hide('sub2')">tPolicy 2</li>
</ol>
</nav>
<article>
<div id="sub1">
<h1>Policy 1</h1>
<ul data-count="even" style="list-style-type:none">
<li>Sub Policy 1</li>
<li>Sub Policy 1</li>
</ul>
</div>
</article>
</div>
<div id="tb_g_sub" class="subsub" style=display:none;>
<nav>
<ol>
<li style="height:20px;" onmouseover="show('sub1')" onmouseout="hide('sub1')">gPolicy 1</li>
<li style="height:20px;" onmouseover="show('sub2')" onmouseout="hide('sub2')">gPolicy 2</li>
</ol>
</nav>
<article>
<div id="sub1">
<h1>Policy 1</h1>
<ul data-count="even" style="list-style-type:none">
<li>Sub Policy 1</li>
<li>Sub Policy 1</li>
</ul>
</div>
</article>
</div>
<div id="tb_pg_sub" class="subsub" style=display:none;>
<nav>
<ol>
<li style="height:20px;" onmouseover="show('sub1')" onmouseout="hide('sub1')">pgPolicy 1</li>
<li style="height:20px;" onmouseover="show('sub2')" onmouseout="hide('sub2')">pgPolicy 2</li>
</ol>
</nav>
<article>
<div id="sub1">
<h1>Policy 1</h1>
<ul data-count="even" style="list-style-type:none">
<li>Sub Policy 1</li>
<li>Sub Policy 1</li>
</ul>
</div>
</article>
</div>
</body>
</html>
and this is my .JS file
function main_clicked(x){
document.getElementById("tb_sub").style.display = "none";
document.getElementById("Button1").style.background='#F0F0F0';
var elements = document.getElementsByClassName("button_sub");
for(var i = 0, length = elements.length; i < length; i++) {
if( elements[i].textContent == ''){
elements[i].style.background='#F0F0F0';
}
}
document.getElementById("tb_y_sub").style.display = 'none';
document.getElementById("tb_x_sub").style.display = 'none';
document.getElementById("tb_ma_sub").style.display = 'none';
document.getElementById("tb_t_sub").style.display = 'none';
document.getElementById("tb_g_sub").style.display = 'none';
if (x==1){
document.getElementById("Button1").style.background='#42a7f4';
document.getElementById("tb_sub").style.display = "block";
}
}
function sub_clicked(x){
var elements = document.getElementsByClassName("button_sub");
for(var i = 0, length = elements.length; i < length; i++) {
if( elements[i].textContent == ''){
elements[i].style.background='#F0F0F0';
}
}
document.getElementById("tb_y_sub").style.display = 'none';
document.getElementById("tb_x_sub").style.display = 'none';
document.getElementById("tb_ma_sub").style.display = 'none';
document.getElementById("tb_t_sub").style.display = 'none';
document.getElementById("tb_g_sub").style.display = 'none';
if (x==1){
document.getElementById("Button4").style.background='#42a7f4';
document.getElementById("tb_y_sub").style.display = 'block';
}
if (x==2){
document.getElementById("Button5").style.background='#42a7f4';
document.getElementById("tb_x_sub").style.display = 'block';
}
if (x==3){
document.getElementById("Button6").style.background='#42a7f4';
document.getElementById("tb_ma_sub").style.display = "block";
}
if (x==4){
document.getElementById("Button7").style.background='#42a7f4';
document.getElementById("tb_t_sub").style.display = "block";
}
if (x==5){
document.getElementById("Button8").style.background='#42a7f4';
document.getElementById("tb_g_sub").style.display = "block";
}
}
function show(x) {
document.getElementById(x).style.display = "block";
}
function hide(x) {
document.getElementById(x).style.display = "none";
}
and this is my manifest file
{
"name": "Easypolicy",
"description": "Easypolicy",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
i need to know and understand :
is there any specific programming language required to develop
the extension?.
is there any software can give me the last result
without using the coding?
why it doesn't work while im using the
right code?
thank you

Drag and Drop cards in nodejs + ejs+ express framework

I am creating an app similar to LeanKit's Kanbanize app. LeanKit
Here is my HTML Code:
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign In</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/mycss.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/bootstrap.min.js"></script>
</head>
<script>
var onDragEnter = function(event) {
event.preventDefault();
$("#dropzone").addClass("dragover");
},
onDragOver = function(event) {
event.preventDefault();
if(!$("#dropzone").hasClass("dragover"))
$("#dropzone").addClass("dragover");
},
onDragLeave = function(event) {
event.preventDefault();
$("#dropzone").removeClass("dragover");
},
onDrop = function(event) {
event.preventDefault();
$("#dropzone").removeClass("dragover");
console.log(event.originalEvent.dataTransfer.files);
};
$("#dropzone")
.on("dragenter", onDragEnter)
.on("dragover", onDragOver)
.on("dragleave", onDragLeave)
.on("drop", onDrop);
</script>
<body style="margin:0; background-color: #F2F2F2;">
<!--Header-->
<div id = "header">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Welcome to Kanban View</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Add Card</li>
<li>Project Status</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container" style="width:900px; height:500px;padding-top:70px;">
<div class="row">
<div class="col-md-3">
<h4>Ready to Start</h4>
<ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice laneContents connectedSortable ui-sortable" cmenu="menu_LaneBody">
<div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="test1">Test 1</div>
</div>
</div>
</li>
</div>
<div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="test2">Test 2</div>
</div>
</div>
</li>
</div>
<div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="test3">Test 3</div>
</div>
</div>
</li>
</div>
<div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="test4">Test 4</div>
</div>
</div>
</li>
</div>
</ul>
</div>
<div class = "col-md-3">
<h4>In Progress</h4>
<div id='dropzone'><ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice laneContents connectedSortable ui-sortable" cmenu="menu_LaneBody">
<li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="Attach a Report!">Search Results Page</div>
</div>
</div>
</li>
</div> </div>
<div class = "col-md-3">
<h4>Ready for Review</h4>
<ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice laneContents connectedSortable ui-sortable" cmenu="menu_LaneBody">
<li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="Attach a Report!">Welcome Page</div>
</div>
</div>
</li>
</ul>
</div>
<div class = "col-md-3">
<h4>Recently Finished</h4>
<ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice laneContents connectedSortable ui-sortable" cmenu="menu_LaneBody">
<li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="Attach a Report!">Login Functionality</div>
</div>
</div>
</li>
</ul></div>
</div>
</div>
<!--Footer-->
<div id="footer">
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
</div> <!-- container-->
</div> <!-- navbar navbar-default navbar-fixed-bottom" -->
</div>
</body>
</html>
I added the drag and drop code based on this question. I can see by cards are dragging but cannot drop to In Progress section. The functionality is I should be able to drag a card from anywhere and drop to any of the 4 sections, based on the number of cards, each section should be responsive so they can fit the new card. Any advice would really be appreciated. Thank you so much.
You need to actually move the DOM element. Here's one way you could do it:
https://jsfiddle.net/z3o28qut/
var dragItem;
// You should make this selector more specific to your card elements
$("div")
.on("dragstart", function(event) {
dragItem = $(event.currentTarget).find('li') && $(event.currentTarget).find('li')[0];
});
onDrop = function(event) {
event.preventDefault();
$("#dropzone").removeClass("dragover");
var ul = $(this).find('ul')[0];
if (dragItem) {
ul.appendChild(dragItem);
}
};

div with masonry layout inside another masonry layout

My question is: i have a container with masonry layout, is possible that one or more item have inside another container with masonry?
<div class="masonry">
<div class="item"></div>
<div class="item">
<div class="masonry_inside">
<div class="item_inside"></div>
<div class="item_inside"></div>
<div class="item_inside"></div>
</div>
</div>
<div class="item"></div>
</div>
You will have to init Masonry seperately on each grid container:
// Init masonry on outer container
$('.masonry').masonry({
itemSelector: '.item',
});
// Init masonry on inner container
$('.masonry_inside').masonry({
// You need to use another item selector class on the inner elements
itemSelector: '.item_inside',
});
.masonry {
width: 440px;
background-color: gray;
}
.item {
width: 200px;
background-color: black;
margin: 10px;
}
.item_inside {
width: 80px;
margin: 10px;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<div class="masonry">
<div class="item" style="height: 150px;"></div>
<div class="item" style="height: 200px;"></div>
<div class="item" style="height: 180px;"></div>
<div class="item">
<div class="masonry_inside">
<div class="item_inside" style="height: 180px;"></div>
<div class="item_inside" style="height: 80px;"></div>
<div class="item_inside" style="height: 120px;"></div>
<div class="item_inside" style="height: 35px;"></div>
</div>
</div>
<div class="item" style="height: 80px;"></div>
</div>

Page renders differently with IE11 Dev tools open

I have a strange problem: the site I build is using flexbox and LESSHAT. The strange thing I encounter is that it doesn't render correctly i.e. flexbox things seems to be omitted.
However, if I hit F12 and reload the page it is rendered is it should.
What is wrong?
UPDATE - This is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=0, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="c header">
<div class="box">Title</div>
</div>
<div class="box content">
<div class="cv flex page">
<div class="cl item">
<div class="cvl flex item-title">
<div class="cl">Item 1</div>
<div class="cl">
<div class="c button">1</div>
<div class="c button">2</div>
<div class="c button">3</div>
</div>
</div>
<div class="cl item-more">
>>
</div>
</div>
<div class="cl item">
<div class="cl flex item-title">
Item 2
</div>
<div class="cl item-more">
>>
</div>
</div>
<div class="cl item">
<div class="cl flex item-title">
Item 3
</div>
<div class="cl item-more">
>>
</div>
</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
Style CSS is compiled from this LESS file:
#import "lesshat";
* {
margin: 0;
padding: 0;
}
.header {
width:100%;
height: 48px;
background: #0000ff;
color: #fff;
}
.content {
width:100%;
background: #00ff00;
}
.page {
width:100%;
background: #00ffff;
}
.item {
background: #ffff00;
margin: 5px;
}
.button {
width: 30px;
border: 1px solid #efefef;
}
.box {
.display(flex);
}
.c {
.display(flex);
.justify-content(center);
.align-items(center);
}
.cl {
.display(flex);
.align-items(center);
}
.cv {
.display(flex);
.flex-direction(column);
}
.flex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
The reload and F12 solution seems to indicate one of the following issues:
<link> or <style> tag for CSS outside of the <head>
document.write via a downloaded <script>
Asking for computed styles in related JavaScript code, via:
offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop/Left/Width/Height
clientTop/Left/Width/Height
getComputedStyle()
Changing individual styles in related JavaScript code
Getting and setting styles in a loop
References
Rendering: repaint, reflow/relayout, restyle

Resources