I have a panel heading and a panel body having a description by default when the page reloads. when I click on the + symbol then there are some contents to be displayed and that description to be removed.
everything is working fine. but when I slideup then the description is appeared but it appears suddenly with a kind of stroke.
I can do it using time unit but it adds fade-in effect to it. which i don't want.
$('.add_discount_plus_minus').on('click', function () {
if($(this).text() === "+" ) {
$(this).text("-");
$('.club_registration_plus_minus').text("+");
$('.settings_plus_minus').text("+");
$('.add_discount_one_line_description').hide();
$('.show_hide_add_discount_panel').slideDown();
} else {
$(this).text("+");
/*$(this).css('font-size' , '20px');*/
$('.show_hide_add_discount_panel').slideUp();
$('.add_discount_one_line_description').show();
}
})
.add_discount_plus_minus {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-100%);
font-size: 20px;
}
.show_hide_add_discount_panel {
display: none;
}
.set_padding_0 {
padding: 0 !important;
}
.set_margin_0 {
margin: 0 !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="panel panel-default set_padding_0">
<div class="panel-heading text-left">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-10">
<span>Add Discount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<span class="pull-right cursor_pointer add_discount_plus_minus font-bold font_size_17">+</span>
</div>
</div>
</div>
<div class="panel-body ">
<div class="row set_margin_0">
<span class="add_discount_one_line_description"> Code, Offer Name, Discount Amount, Uses Per Offer, Group Discounts </span>
</div>
<div class="show_hide_add_discount_panel ">
<div class="row margin_top_10 set_margin_0">
<span>Some contents to be displayed</span>
</div>
<div class="row margin_top_10 set_margin_0">
<span>Some contents to be displayed</span>
<div></div>
</div>
</div>
</div>
</div>
Here is JSFiddle
When you slide up the panel body then the description gets displayed suddenly.
How can i solve it?
Any help would b great.
Thank You.
You don't need to use timeout, it will be hard to match exactly the time it takes to slide. The slideUp() method has a callback function to call once the animation is complete, show your default content there
$('.show_hide_add_discount_panel').slideUp(function(){
$('.add_discount_one_line_description').show();
});
https://jsfiddle.net/hbxqsxjp/2/
Then you should try to add some timeout before you see the default content.
Fiddle : https://jsfiddle.net/qaeed/hbxqsxjp/1/
$('.add_discount_plus_minus').on('click', function () {
if($(this).text() === "+" ) {
$(this).text("-");
$('.club_registration_plus_minus').text("+");
$('.settings_plus_minus').text("+");
$('.add_discount_one_line_description').hide();
$('.show_hide_add_discount_panel').slideDown();
} else {
$(this).text("+");
/*$(this).css('font-size' , '20px');*/
$('.show_hide_add_discount_panel').slideUp();
setTimeout(function(){
$('.add_discount_one_line_description').show();
}, 1000);
}
})
.add_discount_plus_minus {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-100%);
font-size: 20px;
}
.show_hide_add_discount_panel {
display: none;
}
.set_padding_0 {
padding: 0 !important;
}
.set_margin_0 {
margin: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="panel panel-default set_padding_0">
<div class="panel-heading text-left">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-10">
<span>Add Discount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<span class="pull-right cursor_pointer add_discount_plus_minus font-bold font_size_17">+</span>
</div>
</div>
</div>
<div class="panel-body ">
<div class="row set_margin_0">
<span class="add_discount_one_line_description"> Code, Offer Name, Discount Amount, Uses Per Offer, Group Discounts </span>
</div>
<div class="show_hide_add_discount_panel ">
<div class="row margin_top_10 set_margin_0">
<span>Some contents to be displayed</span>
</div>
<div class="row margin_top_10 set_margin_0">
<span>Some contents to be displayed</span>
<div></div>
</div>
</div>
</div>
</div>
Related
I have posted the same question two days earlier but didn't get any
answer so I'm posting again this question. May be I get lucky this time.
My slider buttons are working fine with static data, but they don't
work with the dynamic data. And unable to show the next or previous
slide.
My HTML Code
<section class="browse-cat u-line section-padding">
<div class="container">
<div class="row">
<div class="col-12">
<div class="swiper-wrapper">
<div class="swiper-slide myreward-slider-item col-md-4" *ngFor="let reward of readableRewards; let i = index">
<a href="javascript:void(0);">
<div class="myreward-slider-img">
<img
src="{{reward?.Image}}"
class=""
alt="rewards">
</div>
</a>
<div class="row">
<div class="col-md-6 text-left padding-20">
<span class="text-light-black cat-name"><b>{{reward?.Title}}</b></span>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
</section>
My CCS Code
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 14px;
font-weight: 900;
color: #ff0018;
background: #ff0018;
}
.swiper-button-next {
right: 10px;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-disabled {
display: none;
}
I'm working with bootstraps cards. I have card-header and card-footer and they are working great. In the card-body I have a card-title. This title can take up 1 or 2 lines in the card-body. Also inside this card-body I have some information in a div. I want to align this informational div to the card-body bottom as I use row/col to align things nicely but because 1 card-title is 1 line and another is 2 lines when you look across cards in the page this additional information doesn't line up exactly between cards and bottom aligning would solve that I think.
So basically I want the orangered divs to line up at the bottom of their cards because then visually across cards they would look to line up.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
</style>
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>
I did a few things:
added position:absolute with some (24%) clearance from the bottom;
the container class implemented a width of 100%, which is why the box now went outside the boundary;
card-body class implemented a 20px padding
To get the exact styling, we removed the width 20px from the 100% width (from the cowntainer)
complete snippet below:
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
.orangeRedClass {
position: absolute;
bottom: 24%;
width: calc(100% - 40px) !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>
what is the best way to make in bootstrap a hide/show element like in the picture??
I started with something like this:
<div class="container-fluid no-padding-left">
<div class="row">
<div class="col-md-4 no-padding-left">
<div class="row">
<div class="col-md-12 background-azul-claro">
<div class="col-md-2 text-left">
<img src="assets/images/ic_close_white_36dp_1x.png" alt="">
</div>
<div class="col-md-8 text-center" style="">
<h3>Nueva incidencia</h3> </div>
<div class="col-md-2 text-right">
<img src="assets/images/ic_done_white_36dp_1x.png" alt="">
</div>
</div>
</div>
<div class="col-md-12 no-padding-left"> <img src="assets/images/default-image.jpg" alt="" class="img-responsive"> </div>
<div class="col-md-12 no-padding-left background-azul-oscuro"> <img src="" alt=""> </div>
<!-- form div with form field -->
<!-- checkbox Mostrar otras incidencias -->
</div>
</div>
</div>
styles.css
.background-azul-oscuro {
background-color: #009688;
}
.background-azul-claro {
background-color: #00BFA5;
}
.no-padding-left {
padding-left: 0px;
}
h3 {
color: white;
}
It´s nested columns the best way to do it ???
Im using angular in the front end, should i use normal bootstrap or angular ui bootstrap???
I would like totally responsible element with the hide and show functionality..
Since you would have to use custom width, margin and padding for the default bootstrap col's, there isn't much sense in using them.
You could have something like this in my opinion:
<div class="container">
<div class="background-azul-claro">
// position:relative;
width: calc(100% - 40px);
margin-right: 40px;
float: left;
</div
<div class=" background-azul-oscuro">
// position: relative;
width: 40px;
float: right;
</div>
</div>
*In case you would want one div to hover above the other, you should use position: absolute;
I'm trying to create a footer with bootstrap rows and columns, and I want to make the footer smaller by reducing the space between rows. I've tried changing the margin and padding of the rows to no avail.
<footer class="footerClass">
<div class="row footerRow">
<div class="col-md-4">
<b>Content</b>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
</div>
</div>
<div class="row footerRow">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
<div class="row footerRow">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-2">
<p><b>Content</b></p>
</div>
<div class="col-md-3">
<p><b>Content</b></p>
</div>
</div>
<div class="row footerRow table-condensed">
<div class="col-md-4">
<p> </p>
</div>
<div class="col-md-3">
<p>www.Content.org</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
</footer>
It's likely that your additional classes have caused the spacing issues that you're seeing. I would rewrite your footer in the following way to see if it resolves your issue:
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<b>Content</b>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
</div>
</div>
<div class="row">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-2">
<p><b>Content</b></p>
</div>
<div class="col-md-3">
<p><b>Content</b></p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<p> </p>
</div>
<div class="col-md-3">
<p>www.Content.org</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
</div>
</footer>
Also, typically when using bootstrap grids, your column width would add up to 12 for each row. This may have been intentional.
I use the following classes to handle vertical spacing in my designs:
.voffset { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }
.boffset { margin-bottom: 2px; }
.boffset1 { margin-bottom: 5px; }
.boffset2 { margin-bottom: 10px; }
.boffset3 { margin-bottom: 15px; }
.boffset4 { margin-bottom: 30px; }
.boffset5 { margin-bottom: 40px; }
.boffset6 { margin-bottom: 60px; }
.boffset7 { margin-bottom: 80px; }
.boffset8 { margin-bottom: 100px; }
.boffset9 { margin-bottom: 150px; }
The minimum width of the media query "col-md-xx" is 992px , Try to apply class with "col-sm-xx". May be You are asking this.
I'm looking for a way to change the background color of multiple columns based on a range of numeric values. I know of the Colorjizz PHP library but not sure if it's what I need for my purpose. I need the columns in the code below to change their background color to the respective shade of green/red/orange based on a range of numeric values. For example from 1-100 or 0.1 to 10.0.
.green-bg {
background-color: green!important;
color: white;
}
.red-bg {
background-color: red!important;
color: white;
}
.orange-bg {
background-color: orange!important;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well green-bg">1
</div>
</div>
<div class="col-md-12">
<div class="well red-bg">3
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well orange-bg">2
</div>
</div>
<div class="col-md-12">
<div class="well green-bg">4
</div>
</div>
</div>
</div>
</div>
</div>
You could try grabbing the innerHTML of each div with the "well" class and then assuming that is a number between 0 and 10, set the opacity of the div to be that number divided by 10. So if the innerHTML is 2, then the opacity is set to 0.2.
I've added some Javascript to your snippet to make this happen.
You could change the math in this to make it 1-100 or something else.
function wellColorShade() {
var wells = document.getElementsByClassName("well");
for(var i = 0; i < wells.length; i++) {
var well = wells[i];
well.style.opacity = (well.innerHTML / 10);
}
};
wellColorShade();
.green-bg {
background-color: green!important;
color: white;
}
.red-bg {
background-color: red!important;
color: white;
}
.orange-bg {
background-color: orange!important;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well green-bg">1
</div>
</div>
<div class="col-md-12">
<div class="well red-bg">3
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well orange-bg">2
</div>
</div>
<div class="col-md-12">
<div class="well green-bg">4
</div>
</div>
</div>
</div>
</div>
</div>