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;
Related
I am currently working on a HTML dropdown with Accordion & jQuery. For example in the snippet below, I have AU Controls with different levels. I want to organize parent rows with the level rank, and then the appropriate controls under each Level Parent row.
$(document).ready(function() {
$('.ui.accordion').accordion();
/* Alternative way to change color of accordion */
//$(".drop").css("color", "yellow");
});
/* this doesn't work*/
.ui.styled.accordion .accordion .title,
.ui.styled.accordion .title {
color: black;
background-color: #eee;
cursor: pointer;
padding: 18px;
width: 100%;
height: auto;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.5s;
}
.ui.styled.accordion .accordion .title,
.ui.styled.accordion .title:hover {
color: #f2711c;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.3.1/dist/semantic.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.3.1/dist/semantic.min.css">
<div class="ui stackable grid container">
<div class="one column row">
<div class="column">
<div class="ui styled accordion">
<!-- Accordion parent -->
<div class="title"><i class="dropdown icon"></i>Level 2</div>
<div class="content">
<div class="ui divider"></div>
<div class="ui stackable grid container">
<div class="three column row">
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.041 Ensure that the actions of individual system users can be uniquely traced to those users so they can be held accountable for their actions.</div>
<div class="content">
hi
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.042 Create and retain system audit logs and records to the extent needed to enable the monitoring, analysis, investigation, and reporting of unlawful or unauthorized system activity.</div>
<div class="content">
hi
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.043 Provide a system capability that compares and synchronizes internal system clocks with an authoritative source to generate time stamps for audit records.</div>
<div class="content">
hi
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.044 Review audit logs.</div>
<div class="content">
hi
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
UPDATE:
I have figured out the nesting issue and was able to fix that. Now the issues I am having, is what I presume to be with the jQuery. When I run my test case in JSFiddle, the parent row opens, and contains all of the correct child rows that I wanted in it. When I try to open the child rows, they open for a half a second, then immediately collapse.
Ok after testning and reading the documentation, I found the problem.
You are bounding multiple nested divs with accordion
Now lets see your html and try to figure out the problem.
This is your original Html
<div class="ui stackable grid container">
<div class="one column row">
<div class="column">
<div class="ui styled accordion"> <!-- Accordion parent -->
<div class="title"><i class="dropdown icon"></i>Level 2</div>
<div class="content">
<div class="ui divider"></div>
<div class="">
<div class="three column row">
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.041 Ensure that the actions of individual system users can be uniquely traced to those users so they can be held accountable for their actions.</div>
<div class="content">
hi
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Now if you look closely, you will see more then one div that containe .ui.accordion
which trigger the problem.
the best solution is to give the div(ui stackable grid container) a new class or Id and try to bind it with this id instead.
Here is the result
$(document).ready(function(){
$('.retro').accordion();
/* Alternative way to change color of accordion */
//$(".drop").css("color", "yellow");
});
/* this doesn't work*/
.ui.styled.accordion .accordion .title, .ui.styled.accordion .title {
color: black;
background-color: #eee;
cursor: pointer;
padding: 18px;
width: 100%;
height: auto;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.5s;
}
.ui.styled.accordion .accordion .title, .ui.styled.accordion .title:hover {
color: #f2711c;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.3.1/dist/semantic.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.3.1/dist/semantic.min.css">
<div class="ui stackable grid container retro">
<div class="one column row">
<div class="column">
<div class="ui styled accordion"> <!-- Accordion parent -->
<div class="title"><i class="dropdown icon"></i>Level 2</div>
<div class="content">
<div class="ui divider"></div>
<div class="ui stackable grid container">
<div class="three column row">
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.041 Ensure that the actions of individual system users can be uniquely traced to those users so they can be held accountable for their actions.</div>
<div class="content">
hi
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.042 Create and retain system audit logs and records to the extent needed to enable the monitoring, analysis, investigation, and reporting of unlawful or unauthorized system activity.</div>
<div class="content">
hi
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.043 Provide a system capability that compares and synchronizes internal system clocks with an authoritative source to generate time stamps for audit records.</div>
<div class="content">
hi
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.044 Review audit logs.</div>
<div class="content">
hi
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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 have a lots of boxes with different content.
If you click on the first box, you can see a popup-box with more details.
If you click on the second, third, etc. boxes you have to see the details of the boxes.
My problem: If I click on box no. 2 I see the details of box no. 1.
HTML:
<div id="fade" class="black_overlay"></div>
<div id="openDiv" class="openDiv case1 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50/ffffff/000000" alt="#" />
</div>
<div class="col-xs-12 content">
<p>Some Stuff here</p>
</div>
<div id="light" class="white_content">
<p>Case 1! More Stuff. Say Hello!</p>
Close
</div>
q</div>
<div id="openDiv" class="openDiv case2 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50" alt="#" />
</div>
<div class="col-xs-12 content">
<p>Some Stuff here</p>
</div>
<div id="light" class="white_content">
<p>Case 2! More Stuff. Say Hello!</p>
Close
</div>
</div>
Jquery:
function clickCase() {
$(".openDiv").click(function() {
$("#light").toggle();
$("#fade").toggle();
});
$("#closeDiv").click(function() {
$("#light").toggle();
$("#fade").toggle();
});
}
Here is the whole code: http://jsfiddle.net/jvynbq1u/
Just update function
function clickCase() {
$(".openDiv").click(function() {
$(this).find("#light").toggle();
$("#fade").toggle();
});
$(".closeDiv").click(function() {
$(this).find("#light").toggle();
$("#fade").toggle();
}); }
and change classes in HTML to close
<div id="openDiv" class="openDiv case1 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50/ffffff/000000" alt="#" />
</div>
<div class="col-xs-12 content">
<p>Some Stuff here</p>
</div>
<div id="light" class="white_content">
<p>Case 1! More Stuff. Say Hello!</p>
Close
</div>
</div>
<div id="openDiv" class="openDiv case2 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50" alt="#" />
</div>
<div class="col-xs-12 content">
<p>Some Stuff here</p>
</div>
<div id="light" class="white_content">
<p>Case 2! More Stuff. Say Hello!</p>
Close
</div>
</div>
and don't forget to add "closeDiv" into class of elements with this ID. It is working for me on JSFiddle. http://jsfiddle.net/jvynbq1u/9/
Please also use classes, when you want to add one function on more elements, not id. One specific ID should be only for one element on page.
You should be use with different id. those id's are same as unique id.
Try this code and check with my demo:
<div id="fade" class="black_overlay"></div>
<div id="openDiv1" class="openDiv case1 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50/ffffff/000000" alt="#" />
</div>
<div class="col-xs-12 content">
<p>Some Stuff here</p>
</div>
<div id="light1" class="white_content">
<p>Case 1! More Stuff. Say Hello!</p>
Close
</div>
</div>
<div id="openDiv2" class="openDiv case2 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50" alt="#" />
</div>
<div class="col-xs-12 content">
<p>Some Stuff here</p>
</div>
<div id="light2" class="white_content">
<p>Case 2! More Stuff. Say Hello!</p>
Close
</div>
</div>
function clickCase() {
$("#openDiv1").click(function() {
$("#light1").toggle();
$("#fade").toggle();
});
$("#openDiv2").click(function() {
$("#light2").toggle();
$("#fade").toggle();
});
}
jQuery(document).ready(function() {
clickCase();
});
Demo jsfiddle
You can use conditional ternary operator.
function clickCase() {
$(".openDiv").click(function() {
($(this).attr('id') == "openDiv") ? $("#light").toggle() : $("#light1").toggle();
$("#fade").toggle();
});
$("#closeDiv, #closeDiv1").click(function() {
($(this).attr('id') == ("openDiv" || "closeDiv")) ? $("#light").toggle() : $("#light1").toggle();
$("#fade").toggle();
});
}
jQuery(document).ready(function() {
clickCase();
});
.openDiv {
width: 200px;
height: 200px;
float: left;
margin: 5px;
padding: 5px;
}
.case1 {
background-color: #00b5b5;
}
.case2 {
background-color: #4c4c4c;
color: white;
}
.black_overlay {
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1001;
opacity: 0.8;
}
.white_content {
color: #292929;
display: none;
position: fixed;
top: 15%;
left: 10%;
width: 80%;
height: 70%;
padding: 5px 10px;
background-color: white;
z-index: 1002;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fade" class="black_overlay"></div>
<div id="openDiv" class="openDiv case1 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50/ffffff/000000" alt="#" />
</div>
<div class="col-xs-12 content">
<p>Some Stuff here</p>
</div>
<div id="light" class="white_content">
<p>Case 1! More Stuff. Say Hello!</p>
Close
</div>
</div>
<div id="openDiv1" class="openDiv case2 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50" alt="#" />
</div>
<div class="col-xs-12 content">
<p>Some Stuff here</p>
</div>
<div id="light1" class="white_content">
<p>Case 2! More Stuff. Say Hello!</p>
Close
</div>
</div>
In the case of multiple elements you can use ternary chaining
Example:
$(this).attr('id') == "openDiv") ? $("#light").toggle() :
$(this).attr('id') == "openDiv1" ? $("#light1").toggle() :
$(this).attr('id') == "openDiv2" ? $("#light2").toggle() :
$("#light3").toggle();// keep expanding till you reach enough.
It is also a good idea to save $(this).attr('id') in a variable if you need to check multiple elements.
Alternatively you could use a switch case.
Example:
switch($(this).attr('id')){
case "openDiv": $("#light").toggle(); break;
case "openDiv1": $("#light1").toggle(); break;
//go on for how many you would need.
}
Note: I have made the id's unique.
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>
I am making a custom template in which i have two divs and both have title .
I wanted to detect if there is less then 15px left between two divs then break the content into another line for both divs . Is this possible ? I have made a fiddle with css and html
#content .title
{
display:inline-block;
float:left;
text-align:left;
}
#content .sub-title {
display:inline-block;
float:right;
text-align:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content" class="full">
<div class="full">
<div class="title">
<h2>Roberts Roberts & Patrirty Smith</h2>
</div>
<div class="sub-title"><h2>THE EXAMPLE ON THE FLY</h2></div>
</div>
</div>
If you know the size of the elements you can do this with CSS media queries:
*
{
padding: 0;
margin: 0;
}
#content .title
{
display:inline-block;
float:left;
text-align:left;
border: solid 1px;
margin-right: 15px;
width: 400px;
}
#content .sub-title
{
display:inline-block;
float:right;
text-align:right;
border: solid 1px;
width: 400px;
}
#media (max-width: 815px)
{
#content .sub-title
{
float: left;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content" class="full">
<div class="full">
<div class="title">
<h2>Roberts Roberts & Patrirty Smith</h2>
</div>
<div class="sub-title"><h2>THE EXAMPLE ON THE FLY</h2></div>
</div>
</div>
Try using a little Bootstrap with your custom CSS.
Have a look at this Fiddle, I have two options for you to test.
In the Result Fiddle window, try resizing the frame on the left side to see how it works.
When using the Bootstrap cdn link please make sure you place the link above your custom CSS, so that your css has priority.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" > <div class="container col-xs-12 block">
<div class="block-first bg-info col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-9 col-xs-offset-1">
Roberts Roberts & Patrirty Smith
</div>
<div class="block-second bg-success col-lg-4 col-lg-push-1 col-md-4 col-md-offset-1 col-md-push-1 col-sm-4 col-sm-offset-1 col-sm-push-1 col-xs-9 col-xs-offset-1 col-xs-push-0">
THE EXAMPLE ON THE FLY
</div>
</div>
<div class="container col-xs-12 bg-primary space-around"><br></div>
<div class="container col-xs-12 block">
<div class="block-first2 bg-primary col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-9 col-xs-offset-1">
Roberts Roberts & Patrirty Smith
</div>
<div class="block-second bg-danger col-lg-4 col-md-4 col-sm-4 col-xs-9 col-xs-offset-1">
THE EXAMPLE ON THE FLY
</div>
</div>