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
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 ?
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.
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>
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
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>