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>
Related
I am working with some sort of E-Shop Template and I can only manipulate some stuff with Jquery and JS.
Problem No 1:
I want to give the first box with the Content "Hello and Welcome!" and some background-Image. Problem is, that this box has some padding and I need to set the Background to the parent "inner-Wrapper" of this Div.
Is there a way to select the first "inner-wrapper" and check if the Content is "hello and welcome!" in the Content-box?
Problem No 2:
Box 1 - Box 4 Need another Background-Image.
I know some basic Jquery stuff but I struggle with those advanced stuff. And after 4 hours of trial and error I have to ask you guys.
I hope you can help me, and thanks in advance!
<div class="row">
<div class="inner-wrapper">
<div class="content-box">
Hello and Welcome!
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
<img src="" alt="">
</div>
</div>
</div>
<div class="row">
<div class="inner-wrapper">
<div class="content-box">
Box 1
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 2
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 3
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 4
</div>
</div>
</div>
Instead of checking the text you can add an extra class and check for that class Or you can give a seperate background image for the $('.content-box') inside the first .inner-wrapper
$(function(){
$('.content-box').each(function(){
if($(this).hasClass('firstBox')){
$(this).parent().css('background-image', 'url(http://via.placeholder.com/350x150)');
}else{
$(this).parent().css('background-image', 'url(http://via.placeholder.com/150x150)');
}
})
})
.inner-wrapper{
width:100px;
height:100px;
background-size: cover;
border:1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="inner-wrapper">
<div class="content-box firstBox">
Hello and Welcome!
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
<img src="" alt="">
</div>
</div>
</div>
<div class="row">
<div class="inner-wrapper">
<div class="content-box">
Box 1
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 2
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 3
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 4
</div>
</div>
</div>
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/)
I want to achieve these:
Computer view:
Tablet Portrait view:
Mobile Portrait view:
Currently I have this following code, where the "home-content" part will generate the items#1-items#X:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="../_lib/normalize.css/normalize.css">
<link rel="stylesheet" href="index.css">
<script src="../_lib/jquery/jquery.min.js"></script>
<script src="../_lib/jquery/jquery.fittext.js"></script>
<script src="../_lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="index.js"></script>
<title></title>
</head>
<body>
<script>
init();
</script>
<div class="home-bg"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="home-noti">
<div class="news-noti">
<div class="news-panel panel">
<div class="news-title panel-heading">
<h2 class="panel-title">NEWSFLASH!</h2>
</div>
<div class="news-items-wrapper">
<ul id="news-items" class="news-items list-group"></ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div id="home-content" class="home-content"></div>
</div>
</div>
</div>
</body>
</html>
This piece of code can achieve the "Computer view" and "Tablet Portrait view". I could have done it in using 4 of "col-md-3" but that will mean sometimes I might get Notifications col with 2 items on the same row OR Notifications col with 1 item on the same row, which is not what I want. How do I achieve the "Mobile Portrait view" without breaking the layout of the previous 2?
You can use nested columns for this.
row
col-*-*
row
col-*-*
row
col-*-*
Review the Docs and view working example at Full Screen then reduce the viewport.
/**FOR DEMO PURPOSES ONLY**/
html,
body {
margin-top: 50px;
text-align: center;
}
.alert.alert-info {
height: 100px;
border-radius: 0;
}
.alert.alert-info-tall {
height: 340px;
border-radius: 0;
}
/**FOR DEMO PURPOSES ONLY**/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="row">
<div class="col-sm-12">
<div class="alert alert-info alert-info-tall">Notifications</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-sm-4">
<div class="alert alert-info">1</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">2</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">3</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">4</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">5</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">6</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">7</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">8</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">9</div>
</div>
</div>
</div>
</div>
</div>
Try to figure out Bootstrap Gird Options and
you just Need to know when to use which class for which screen and you are good to go.
Here is the working structure for your reference.
<div class="row">
<div class="left-block col-lg-4 col-md-12 col-xs-12">
Aside Section
</div>
<div class="content-block col-lg-8 col-md-12 col-xs-12">
<div class="row" style="padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 1</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 2</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 3</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 4</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 5</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 6</div>
</div>
</div>
</div>
Use this :
<div class="container">
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="col-xs-12 notification">
<p>Notifications</p>
</div>
</div>
<div class="col-md-9 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 1</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 2</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 3</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 4</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 5</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 6</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 7</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 8</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 9</p>
</div>
</div>
</div>
</div>
</div>
And this style will help to get a better look :
.notification {
background-color:#000;
height:auto;
padding-top: 50px;
padding-bottom:50px;
margin-bottom:10px;
}
.item {
background-color:#333;
height: auto;
margin-bottom:10px;
}
p {
color:#ffffff;
}
Here is the fiddle : http://jsfiddle.net/xwmmfu0e/
You need to add an xs prefix. Try this adding col-xs-6 to both divs.
<div class="col-md-3 col-xs-6">
...
</div>
...
<div class="col-md-9 col-xs-6">
...
</div>
I'm trying to display the details of an email side by side (this is only a section of the full page) but the details from the row containing the from/to and date/cc/bcc information overlap a lot before stacking when the page resizes and I'd like them to stack before this problem arises. The following is the simplified version of what I have:
<div>
<div class="row">
<div class="col-xs-10">
<span style="font-weight:bold;" data-bind="text:Subject"></span>
</div>
<div class="col-xs-2">
<button class="btn btn-default" style="float:right; height:30px;">
<img src="..." style="max-height:20px; border:none;" />
</button>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">FromName</div>
<div class="col-xs-12">email</div>
<div class="col-xs-12">ToName</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">Date: </div>
<div class="col-xs-12">Cc: </div>
<div class="col-xs-12">Bcc: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">date</div>
<div class="col-xs-12">Cc address</div>
<div class="col-xs-12">Bcc address</div>
</div>
</div>
</div>
</div>
</div>
<div>
Bootply Example
Columns overlap because the col-xs-2 is too small for the content in it:
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
Inspect with Dev tools the <div class="col-xs-2"> which contains From: to see that when the text overlaps the content area is smaller than the text length.
To solve it you can change the col-xs-NUMBER for a bigger NUMBER (try with 4) also changing the detailed column (to 8, if you replace the previous with 4).
I'm trying to apply transitions as explained in here, but some cards fail to do a second transition/animation. Is it CSS, Semantic UI or me? You can try adding more cards to the test.
Edit:
As #niba requested, I made a jsfiddle to show what is
happening. Look that I named cards from "Card 0" to "Card 7". Run
several times and you may see some are missing.
Here is the code:
$(document)
.ready(function() {
$('.card')
.transition('fade')
.transition('fade', function() {
console.log('finished');
});
<div class="ui cards">
<div class="green card">
<div class="image">
<img src="img/1.jpg">
</div>
<div class="content">
<a class="header">Header</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">Description</div>
</div>
</div>
<div class="green card">
<div class="image">
<img src="img/2.jpg">
</div>
<div class="content">
<a class="header">Header</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">Description</div>
</div>
</div>
<div class="green card">
<div class="image">
<img src="img/3.jpg">
</div>
<div class="content">
<a class="header">Header</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">Description</div>
</div>
</div>
</div>