CSS Distance Between Divs - javascript

I have these bootstrap HTML divs:
<div class="row">
<div class="col-md-3 text-center mypanel"><h3>6<br></h3>BIDS:</div>
<div class="col-md-3 text-center mypanel"><h3>47.5<br></h3>LOWEST:<br></div>
<div class="col-md-3 text-center mypanel"><h3>49<br></h3>AVERAGE:<br></div>
<div class="col-md-3 text-center mypanel"><h3 class="text-bold">51<br></h3>HIGHEST:<br></div>
</div>
Now I try to make the distance between the divs so I add to .mypanel class - margin-left, so:
.mypanel{
margin-bottom: 20px;
background-color: #fbfbfb;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
margin-right: 15px;
margin-left: 15px;
}
But now I can't put it into one row, because 4 divs go below other divs... how I can fix that?

A good way to solve this is to put another div inside your .mypanel and give it a margin. This way, you can style your elements within the bootstrap grid, but without disrupting the bootstrap structure itself.
Demo
Something like this:
.mypanel{
...
}
.mypanel > div {
margin: 0 15px;
...
}
You can now adjust the margin by just changing this value.
Check the full demo below:
.mypanel{
margin-bottom: 20px;
}
.mypanel > div {
margin: 0 15px;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
background-color: #fbfbfb;
}
<div class="row">
<div class="col-md-3 text-center mypanel">
<div>
<h3>6<br></h3>BIDS:
</div>
</div>
<div class="col-md-3 text-center mypanel">
<div>
<h3>47.5<br></h3>LOWEST:<br>
</div>
</div>
<div class="col-md-3 text-center mypanel">
<div>
<h3>49<br></h3>AVERAGE:<br>
</div>
</div>
<div class="col-md-3 text-center mypanel">
<div>
<h3 class="text-bold">51<br></h3>HIGHEST:<br>
</div>
</div>
</div>

Related

How to prevent div move to a next line during jQuery animation effect?

I have 6 small circles live in div with class .col-sm-2
I tried to apply the shake effect to my next div, but CSS seems to move my div to a new line during the jQuery shake effect.
HTML
<div class="row text-center ">
<div class="col-sm-2 client">
<span class="fa fa-mobile circle-icon fa-5x"></span>
<div class="options">
<p class="option" id="MBNPrivate">MBNPrivate</p>
<p class="option" id="SPWifiCmst">SPWifiCmst</p>
<p class="option" id="GuestCmst">GuestCmst</p>
</div>
<div class="selected"></div>
</div>
<div class="col-sm-2 agent">
<span class="fa fa-bicycle circle-icon fa-5x"></span>
<div class="options">
<p class="option" id="BenuAgent1">BenuAgent1</p>
<p class="option" id="BenuAgent1">BenuAgent1</p>
<p class="option" id="CTAgent">CTAgent</p>
</div>
<div class="selected"></div>
</div>
</div>
CSS
option {
font-style: 14px !important;
}
.circle-icon {
background: #8B8A8B;
padding:70px 0px 0px 0px;
border-radius: 50%;
margin:30px;
width: 200px;
height: 200px;
}
p.option {
border-radius: 5px;
border: 1px solid white;
padding: 15px;
}
p.option:hover {
border: 3px solid white;
}
div.selected {
border-radius: 5px;
border: 3px solid white;
background: #FBC800;
padding: 15px;
}
JS - jQuery
<script type="text/javascript">
$('div.options').hide();
$('div.selected').hide();
$('div.col-sm-2').hide();
$('div.col-sm-2').fadeIn(5000);
$('.fa-mobile').click(function() {
let self = $(this);
$('div.options').fadeOut('fast');
$(this).animate({ backgroundColor: "#4BB7E8" }, 1400);
$(this).next('.options').slideDown(1000);
$(this).next('.options').click(function(event) {
let selectedText = event.target.id;
console.log(selectedText);
$(this).slideUp("slow", function() {
$(this).next('.selected').text(selectedText).fadeIn(3000);
$('.agent').effect( "shake", { direction: "up", times: 2, distance: 10}, 1000 );
});
});
});
</script>
How do I stop this ?

CSS Grid two rows nested in a single column

I am looking for a way to allow two rows within a single column while the other two columns to the right of it are equal/flexible to the height of those two rows. The width should be 100% when looking at all three columns (so around 33% each column). Here is an example of how I want it to look:
https://i.imgur.com/lLPzXhS.png
I will be filling those boxes with clickable boxes like shown below:
https://i.imgur.com/uyyDbL7.png
I have tried using display: row, display: cell, but I am not able to add any margins to it so this is the product I get:
https://i.imgur.com/Ok6EgT0.png
You can see that I have somewhat of the grid system set up, but not as ideally as I want it. There are no margins that can be set between the red and orange box, even though I am able to add margins to the turqoise and blue box.
Here is the code I have:
HTML:
<div class='d-table'>
<div class='t-row'>
<div class='t-cell one-third'>
<div class='turqoisebox'>
Turqoise box here
</div>
<div class='bluebox'>
Blue box here
</div>
</div>
<div class='t-cell one-third redbox'>
Red box here
</div>
<div class='t-cell one-third orangebox'>
Orange box here
</div>
</div>
</div>
CSS:
.d-table {
display: table;
}
.t-row {
display: table-row;
}
.t-cell {
display: table-cell;
margin-left: unset;
margin-right: unset;
/*border: 1px solid tomato;*/
}
.one-third {
width: 30%;
}
.two-thirds {
width: 200px;
}
.bluebox {
background-color: #9dd8dd;
margin: 25px;
border-radius: 25px;
border: solid #7dacb0;
border-width: 3px;
box-shadow: 2px 4px 8px 2px rgba(0,0,0,0.4);
transition: 0.3s;
text-align: center;
}
.bluebox:hover {
box-shadow: 2px 8px 16px 2px rgba(0,0,0,0.8);
}
Any thoughts on how to replicate the second image results neatly?
You could use flexbox. Take a look at this simplified example:
.content {
background: orange;
margin: 1rem;
padding: 1rem;
flex: 1;
color: white;
display: flex;
}
.content > span {
margin: auto;
}
.row {
display: flex;
flex-direction: row;
background-color: blue;
flex: 1
}
.col {
display: flex;
flex-direction: column;
flex: 1;
background-color: red;
}
<div class="row">
<div class="col">
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
<div class="col">
<div class="content">
<span>This is centered</span>
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
</div>
<div class="col">
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
You could also use a minimal flexbox-based grid library like Flexbox Grid.
Margin is used for setting where elements should start so instead use padding between those 2 elements to get the space you want.

Issue getting fadeIn element to raise

I have four boxes that are displayed in a single row (in a larger viewport). The boxes then fadeIn will going up the page. My issue is I cannot figure out how to get these boxes to go up the page without affecting the parent div and the sections of code below it (#contact-social). I want the other to divs to stay in their finished place that they are supposed to be in (after the boxes have went up the page).
How can I only change the positioning of the boxes as they go up the page without affecting anything else?
The position I have in my
function contactBox() {
$('.contact-connect-box').delay(600).animate({
'opacity' : 1,
'margin' : "0px 20px"
}, 800);
};
contactBox();
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
}
.contact-connect-box {
width: 22%;
margin: 60px 20px 0 20px;
display: inline-block;
border: 1px solid black;
vertical-align: top;
opacity: 0;
}
#contact-social {
width: 100%;
height: 200px;
background: #F5F5F5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contact-connect">
<div class="contact-connect-box">
<h2 class="contact-connect-title">fda</h2>
<div class="contact-connect-description">fdsaf</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdsa</h2>
<div class="contact-connect-description">
Reach out to us
<br>
<div id="scroll" class="contact-connect-link">fdsaf</div>
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Visit</h2>
<div class="contact-connect-description">
fdsaf
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdf</h2>
<div class="contact-connect-description">
<div class="contact-connect-link">fds</div>
<div class="contact-connect-link">fdsfe</div>
<div class="contact-connect-link"></div>
</div>
</div>
</div>
<div id="contact-social">
</div>
To prevent other elements move - making a margin top smaller, you should also increase the bottom margin respectively...
Or, instead of animating the margin, add a CSS class that will transition your styles :
function contactBox() {
$('.contact-connect-box').addClass("fadeShow");
};
setTimeout(contactBox, 600);
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
}
.contact-connect-box {
width: 22%;
margin: 60px 20px 0 20px;
display: inline-block;
border: 1px solid black;
vertical-align: top;
opacity: 0;
transition:2s; -webkit-transition:2s; /* ADD THIS */
}
.contact-connect-box.fadeShow{ /* AND ALL OF THIS */
opacity:1;
transform:translateY(-30px); -webkit-transform:translateY(-30px);
}
#contact-social {
height: 200px;
background: #F5F5F5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contact-connect">
<div class="contact-connect-box">
<h2 class="contact-connect-title">fda</h2>
<div class="contact-connect-description">fdsaf</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdsa</h2>
<div class="contact-connect-description">
Reach out to us
<br>
<div id="scroll" class="contact-connect-link">fdsaf</div>
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Visit</h2>
<div class="contact-connect-description">
fdsaf
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdf</h2>
<div class="contact-connect-description">
<div class="contact-connect-link">fds</div>
<div class="contact-connect-link">fdsfe</div>
<div class="contact-connect-link"></div>
</div>
</div>
</div>
<div id="contact-social">
</div>

Dynamic view on a sliding panel with jQuery

Have you ever seen someone's code and just laughed? Be ready to do so with my jQuery as it may not make any sense to you, but I'm trying :)
Anyway, what I need is simple and I've gotten some inspiration from other questions here such as Slide Panel up and down but they don't do exactly what I need. At least methinks.
I have a panel immediately below my header (BOOTSTRAP). This panel needs to be there but the user must have a choice to close it a little, not the whole way. Just enough to still have the fa-chevron icon available to click it and slide it back down as well as some information (I'll provide images below).
So in a nutshell, the requirements are:
Starts open, fa-chevron-up
On icon click, the panel slides up (sort of slowish), hides the photo and second row of information, and switches the icon to fa-chevron-down.
On click of fa-chevron down (collapsed view) everything returns to the initial full view.
Here is the HTML
<div id="header" class="header navbar navbar-fixed-top navbar-inverse" data-current-theme="navbar-inverse">
</div>
<div class="row">
<div class="col-xs-12">
<div class="banner clearfix">
<div class="collapser">
<i class="fa fa-chevron-up fa-fw collapse-icon"></i>
</div>
<div class="banner-info clearfix">
<div class="col-sm-12 col-md-2">
<div class="circle-container">
<img class="img-responsive" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTGjucaoN3fabOcumnr7RKTB3ICTJFLuLClnpiQUIR9oW4a11wb" alt="offender-img">
</div>
</div>
<div class="col-sm-12 col-md-10">
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Full Name</label>
<span>Floyd "Money" Mayweather</span>
</div>
<div class="form-group">
<label class="control-label">Some Label</label>
<span>Something Here</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Offender ID#</label>
<span>123569863</span>
</div>
<div class="form-group">
<label class="control-label">Longer Label Example</label>
<span>Something Here with an ellipsis</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Institution</label>
<span>Graterford</span>
</div>
<div class="form-group">
<label class="control-label">Some Link</label>
<span>Something Here</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Institution</label>
<span>Graterford</span>
</div>
<div class="form-group">
<label class="control-label">Some Link</label>
<span href="#"><p>Something Here</p></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the CSS
.navbar {
border: none;
border-bottom: 2px solid #30373e;
font-size: 14px;
-webkit-box-shadow: 0 1px rgba(0,0,0,0.025);
box-shadow: 0 1px rgba(0,0,0,0.025);
z-index: 1040;
margin-bottom: 0;
height: 55px;
}
.banner {
border: none;
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.07);
box-shadow: 0 2px 0 rgba(0,0,0,0.07);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px;
position: relative;
background: #101113;
padding: 20px;
display: block;
top: 55px;
}
.banner .collapser {
position: absolute;
bottom: 10px;
color: #bbb;
}
.banner .circle-container {
position: relative;
left: 35px;
text-align: center;
width: 110px;
height: 110px;
display: flex;
overflow: hidden;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
border-radius: 100%;
border: 3px solid #bbb;
}
.banner .banner-info label {
color: rgba(248,151,29,0.77);
}
.banner .banner-info span {
display: block;
color: #bbb;
white-space: nowrap;
width: 85%;
overflow: hidden;
text-overflow: ellipsis;
}
and the very vague and probably useless JS
$('.collapser').click(function () {
$collapser = $(this);
$banner = $collapser.parent().find('.banner');
$banner.slideToggle(500, function () {
$collapser.find('.collapse-icon').toggleClass('fa-chevron-up fa-chevron-down');
});
});
Here are both views for visual references
Initial view
collapsed view
And here is CODEPEN
No .banner elements appears as child of $collapser.parent() ?
Try changing .banner to .banner-info at $banner = $collapser.parent().find(".banner-info");
codepen http://codepen.io/anon/pen/WrXYGx
Is there a way to slide it up less than that? or would that be a whole
different deal? Because I can hide the photo and the second row if I
mess with it long enough, but I still need the first row to remain
visible.
Use selector $banner = $collapser.parent().find('.banner-info .circle-container, .col-md-10 > .col-md-3 > .form-group:nth-of-type(2)') as $banner collection
$('.collapser').click(function() {
$collapser = $(this);
$banner = $collapser.parent()
.find('.banner-info .circle-container\
, .col-md-10 > .col-md-3 > .form-group:nth-of-type(2)');
$banner.slideToggle(500, function() {
$collapser
.find('.collapse-icon')
.toggleClass('fa-chevron-up fa-chevron-down');
});
});
codepen http://codepen.io/anon/pen/WrXYGx

Add scrollbar to table in angular

I have following code for table in angular. I want a vertical scroll bar only for table body (table rows excluding header) how can I do that?
Since All rows are generated by ng-repeat. I don't know how to add overflow style.
html:
<div class="nu-table">
<div class="nu-table-row nu-header">
<div class="nu-table-cell">A</div>
<div class="nu-table-cell" style="width: 33%">B</div>
<div class="nu-table-cell" style="width: 34%">C</div>
</div>
<div class="nu-table-row nu-striped pointer-cursor" ng-repeat=" map in mapList">
<div class="nu-table-cell" ng-bind="map.A"></div>
<div class="nu-table-cell">{{map.B}}</div>
<div class="nu-table-cell" ng-bind="map.C"></div>
</div>
</div>
Following is the CSS content:
.nu-border-table{
border: solid 1px #ccc;
}
.nu-border{
border: solid 1px #ccc;
}
.nu-table{
background-color: #fff;
padding: 5px;
overflow: scroll;
display: table;
table-layout: fixed;
width: 100%;
}
.nu-table-row{
display: table-row;
position: relative;
width: 100%;
}
.nu-table-row:hover{
background-color: #cee6fa;
}
.nu-table-row.nu-striped.selected{
background-color: #cee6fa;
}
.nu-table-row:last-child{
border-bottom: none;
}
.nu-margin{
margin:5px;
}
.nu-table-cell{
display: table-cell;
border-right: solid 1px #ccc;
border-top: solid 1px #ccc;
min-height: 2em;
padding-top: .3em;
position: relative;
word-wrap: break-word;
padding-left: 2px;
}
.nu-table-cell:last-child{
border-right: none;
}
.nu-striped:nth-child(even) {
background-color: #f9f9f9;
}
.nu-striped:nth-child(even):hover{
background-color: #cee6fa;
}
.nu-header {
background-color: #dedede;
border-bottom: solid 2px #bebebe;
font-weight: bold;
}
Try to add a div around the rows (not tested):
<div class="nu-table">
<div class="nu-table-row nu-header">
<div class="nu-table-cell">A</div>
<div class="nu-table-cell" style="width: 33%">B</div>
<div class="nu-table-cell" style="width: 34%">C</div>
</div>
<div class="nu-table-body">
<div class="nu-table-row nu-striped pointer-cursor" ng-repeat=" map in mapList">
<div class="nu-table-cell" ng-bind="map.A"></div>
<div class="nu-table-cell">{{map.B}}</div>
<div class="nu-table-cell" ng-bind="map.C"></div>
</div>
</div>
</div>
and css (set the height you want)
.nu-table-body {
overflow-y:auto;
max-height:500px;
}
You can place two div where 1st div (Header) will have transparent scroll bar and 2nd div will be have data with visible/auto scroll bar. Sample has angular code snippet for looping through the data.
Below code worked for me -
<div id="transparentScrollbarDiv" class="container-fluid" style="overflow-y: scroll;">
<div class="row">
<div class="col-lg-3 col-xs-3"><strong>{{col1}}</strong></div>
<div class="col-lg-6 col-xs-6"><strong>{{col2}}</strong></div>
<div class="col-lg-3 col-xs-3"><strong>{{col3}}</strong></div>
</div>
</div>
<div class="container-fluid" style="height: 150px; overflow-y: auto">
<div>
<div class="row" ng-repeat="row in rows">
<div class="col-lg-3 col-xs-3">{{row.col1}}</div>
<div class="col-lg-6 col-xs-6">{{row.col2}}</div>
<div class="col-lg-3 col-xs-3">{{row.col3}}</div>
</div>
</div>
</div>
Additional style to hide header scroll bar -
<style>
#transparentScrollbarDiv::-webkit-scrollbar {
width: inherit;
}
/* this targets the default scrollbar (compulsory) */
#transparentScrollbarDiv::-webkit-scrollbar-track {
background-color: transparent;
}
/* the new scrollbar will have a flat appearance with the set background color */
#transparentScrollbarDiv::-webkit-scrollbar-thumb {
background-color: transparent;
}
/* this will style the thumb, ignoring the track */
#transparentScrollbarDiv::-webkit-scrollbar-button {
background-color: transparent;
}
/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
#transparentScrollbarDiv::-webkit-scrollbar-corner {
background-color: transparent;
}
/* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
</style>

Categories