AdminLTE is based on Bootstrap: https://github.com/almasaeed2010/AdminLTE
Live Preview: http://almsaeedstudio.com/preview/
But I'm unsure as to how to make the collapsable boxes collapsed by default.
I'm assuming since it is built on Bootstrap, this should be rather straightforward. I've tried fellow implementations such as setting the id to "collapsedOne" and attempting to treat the divs as accordions, but to no avail.
On the AdminLTE/app.js ~line 45 there is code that implements slide up/slide down to collapse boxes. Ideally, what we'd want is to have the boxes be in the "slide up" state by default with the class "collapsed-box" so that when the icon is clicked, it executes "slide down".
/*
* Add collapse and remove events to boxes
*/
$("[data-widget='collapse']").click(function() {
//Find the box parent
var box = $(this).parents(".box").first();
//Find the body and the footer
var bf = box.find(".box-body, .box-footer");
if (!box.hasClass("collapsed-box")) {
box.addClass("collapsed-box");
bf.slideUp();
} else {
box.removeClass("collapsed-box");
bf.slideDown();
}
});
Any suggestions?
Thanks in advance.
When the page loads in its initial state, why not just add the collapsed-box class to box element?
The below will render in the collapsed state and function without modifying AdminLTE:
<!-- Default box -->
<div class="box box-solid collapsed-box">
<div class="box-header">
<h3 class="box-title">Default Solid Box</h3>
<div class="box-tools pull-right">
<button class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-plus"></i></button>
<button class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div style="display: none;" class="box-body">
Box class: <code>.box.box-solid</code>
<p>bla bla</p>
</div><!-- /.box-body -->
</div><!-- /.box -->
$("[data-widget='collapse']").click() Add that to a JavaScript file that runs at the bottom
Here are the steps:
Change the minus icon to plus .
Add explicit style "display:none" to box-body
Add the class "collapsed-box" to the box
For those who are using AdminLTE 2.1.1
just simply add sidebar-collapse class on the <BODY>
Before:
<body class="skin-blue sidebar-mini">
After:
<body class="skin-blue sidebar-mini sidebar-collapse">
An open box:
<div class="box">
A collapsed box:
<div class="box collapsed-box">
And then ofcourse change the icon on the button
In Admin LTE 3 collapse by default by using the class collapsed-card on the main card.
Like this
<div class="col-md-3">
<div class="card collapsed-card">
<div class="card-header" >
<h3 class="card-title">Expandable</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i>
</button>
</div>
</div>
<div class="card-body" >
The body of the card
</div>
</div>
</div>
You should change the icon to a fas fa-plus then the initial box starts with a plus
$("[data-widget='collapse']").click(function() {
//Find the box parent........
var box = $(this).parents(".box").first();
//Find the body and the footer
var bf = box.find(".box-body, .box-footer");
if (!$(this).children().hasClass("fa-plus")) {.
$(this).children(".fa-minus").removeClass("fa-minus").addClass("fa-plus");
bf.slideUp();
} else {
//Convert plus into minus
$(this).children(".fa-plus").removeClass("fa-plus").addClass("fa-minus");
bf.slideDown();
}
});
and use in section div
for one specify div
$(function() { $('your-button-id').click(); })
for all
$(function() { $("[data-widget='collapse']").click(); })
Simply add "collapsed-box" to the box and change this:
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
to
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
This should work for me
The correct tested Steps which worked for me are :
Add explicit style "display:none" to box-body
You are done :)
<div class="box ">
<div class="box-header with-border bg-yellow">
<h3 class="box-title">Box Title Here</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body" style="display: none;">
<div class="table-responsive">
<!--Your content here -->
</div><!-- /.table-responsive -->
</div><!-- /.box-body -->
</div>
<div class="box box-default collapsed-box">
<div class="box-header with-border">
<h3 class="box-title">Expandable</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div class="box-body">
The body of the box
</div><!-- /.box-body -->
</div><!-- /.box -->
This soluction worked for me:
I added "collapse-left" class for the menu and added the "strech" class for the main content.
I use the version 1 for the AdminLTE. It is divided in aside class="left-side" for the left menu and aside class="right-side" for the main content.
So, this is the final code:
<aside class="left-side collapse-left">
<!-- put the left menu here -->
</aside>
<aside class="right-side strech">
<!-- put the main content here -->
</aside>
I added this to the boxWidget object:
setInitialCollapseStatus: function (container) {
var _this = this;
var collapsedBoxes = container.find('.box.collapsed-box .btn-box-tool > i');
collapsedBoxes.each(function (index) {
var box = $(this);
//Convert minus into plus
box
.removeClass(_this.icons.collapse)
.addClass(_this.icons.open);
});
}
and called it during initializiation:
activate: function (_box) {
var _this = this;
if (!_box) {
_box = document; // activate all boxes per default
}
//Listen for collapse event triggers
$(_box).on('click', _this.selectors.collapse, function (e) {
e.preventDefault();
_this.collapse($(this));
});
//Listen for remove event triggers
$(_box).on('click', _this.selectors.remove, function (e) {
e.preventDefault();
_this.remove($(this));
});
// Set initial collapseStatus
_this.setInitialCollapseStatus($(_box));
},
Add css classes into body tag in the index.html file:
sidebar-closed sidebar-collapse
<body class="hold-transition sidebar-mini sidebar-closed sidebar-collapse layout-fixed layout-navbar-fixed layout-footer-fixed">
With Adminlte 3:
Card Parent add ID: <div class="card card-default" id="a">
Change <i class="fas fa-minus"></i> TO => <i class="fas fa-plus"></i>
Add Display:none <div class="card-body" style="display:none">
Add jquery $('#a').CardWidget('toggle');
Related
I am loading cards and there modals dynamically and the problem I am facing is that the dynamically added cards aren't triggering the dynamically added modals.
The cards are this
data.forEach(eve => {
console.log(eve.data());
event = eve.data();
pastEventCards+=`
<li class="cards_item">
<div class="card">
<div class="card_image">
<img src="images/posters/cpp_2021.jpeg" />
</div>
<div class="card_content card-body d-flex flex-column">
<h2 class="card_title">${event.title}</h2>
<p class="card_text">
</p>
**<button data-modal-trigger="past-event-modal-${event.eventNo}" class="mt-auto demo__btn demo__btn--secondary">
Read More
</button>**
</div>
</div>
</li>
`
pastEventModals+=`
<div class="modal" data-modal-name="past-event-modal-${event.eventNo}">
<div class="modal__dialog">
<button class="modal__close" data-modal-dismiss>×</button>
<header class="modal__header">
<h2 class="modal__title">${event.title}</h2>
</header>
<div class="modal__content">
<h4 class="modal_description">Description</h4>
</p>
<p>${event.description}</p>
<p class="modal_description">
${event.date}
</p>
<p class="modal_description">Attendees : ${event.attendee}
</p>
<p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-modal-dismiss>Close</button>
</div>
</div>
</div>
`
});
cardsList.innerHTML = pastEventCards ;
modalList.innerHTML = pastEventModals ;
I have tried referring to other stack overflow questions related to this and couldnt find a understandable solution to why this is happening , can anyone tell why the buttons cant trigger the modals ?
**EDIT :: **
The button that triggers the modal is inside this ** ** in the pastEventCards variable and the modal is in pastEventModals and when i use "data-modal-trigger = "something" " it will trigger the modal with modal name "something" right ? So y isnt it happening. If I dont add this modals and trigger cards dynamically and add it in the html template then it works fine but after adding dynamically it doesnt work
I implemented a modal popup as a part of the header.cshtml file in MVC project. the issue is that it does not show the dialog box (not working)
The only way I was able to make work is when I put the both the button and the modal container in the header file.
The modal body is a long text and it should not be a part of the header file.
I tried several tutorials, read modal documentation, and applied fixes from stackoverflow nothing worked for me.
I must be missing something very simple and trivial I just can't see it.
Below is the code in the Roles.cshtml file where the modal container is created and the text is written
#{
Layout = "~/Views/Shared/SubLayout.cshtml";
}
#{
ViewBag.Title = "Roles";
}
<div class="container">
<div class="styleguide-spacer-modals"></div>
</div>
<div class="modal" id="modal-active" aria-hidden="true">
<div class="modal__overlay bg-modal" tabindex="-1"
data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true"
aria-labelledby="modal-title-1">
<header class="modal__header">
<h1 class="modal__title h2" id="modal-title-1">
<h2>Roles</h2>
<br />
</h1>
</header>
<main class="modal__content">
BLABLA......
</main>
<footer class="modal__footer">
<button class="button button-primary"
aria-label="submit">
close
</button><button class="button button-secondary" data-
micromodal-close
aria-label="closing">
close
</button>
</footer>
</div>
</div>
</div>
Then the Header.cshtml file look like this: where I added "btnTrigger" and AJAX script to call and show the modal
#model TR.Service.Web.ViewModels
<header class="header" role="banner">
<!--1A: Portal header -->
<div class="portal-header">
<div class="container portal-header-inner">
<button class="button button-tertiary button-menu-open js-menu-
open ml-auto" aria-haspopup="menu" title="mobil menu">Menu</button>
<a href="#" class="button button-secondary" role="button">
login
</a>
</div>
<button class="button button-primary" id="btnTrigger"
data-micromodal-trigger="modal-passive">
Read me
</button>
<div id="divContainer"></div>
</div>
<div class="solution-header">
blabla........
</div>
</header>
#section scripts
{
<script>
$(function () {
$('#btnTrigger').unbind();
$('#btnTrigger').on('click', function () {
$.ajax({
url: '#Url.Action("Betingelser", "Rolles")',
type: 'POST',
data: { },
success: function (arr) {
$('#divContainer').html(arr); //Load your HTML to DivContainer
$('#exampleModal').modal('show'); //Once loaded, show the modal
},
error: function (err) {
console.log(err);
}
});
});
});
</script>
}
Then in my Home controller I have the actionResult that should return the
partial view
public ActionResult Roles()
{
return PartialView("Roles");
}
I can't see why this is not working. Please help.
Pupop should appear when click on the button with id =btnTrigger
Here is a working code
First since the Header.cshtml is part of the SubLayout.cshtml, move the #section scripts to the Roles.cshtml like below, you cna also put it in your Layout but without the #section scripts tag. I did'nt use the modal you had in your question. But this is a working modal
#{
Layout = "~/Views/Shared/SubLayout.cshtml";
}
#{
ViewBag.Title = "Roles";
}
<div class="container">
<div class="styleguide-spacer-modals"></div>
</div>
<div id="exampleModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Roles</h4>
</div>
<div class="modal-body">
<p>Content</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#section scripts
{
<script>
$(function () {
$('#btnTrigger').unbind();
$('#btnTrigger').on('click', function () {
$.ajax({
url: '#Url.Action("Betingelser", "Rolles")',
type: 'POST',
data: { },
success: function (arr) {
$('#divContainer').html(arr); //Load your HTML to DivContainer
$('#exampleModal').modal('show'); //Once loaded, show the modal
},
error: function (err) {
console.log(err);
}
});
});
});
</script>
}
Then your Header.cshtml now looks like this
<header class="header" role="banner">
<!--1A: Portal header -->
<div class="portal-header">
<div class="container portal-header-inner">
<button class="button button-tertiary button-menu-open js-menu-
open ml-auto" aria-haspopup="menu" title="mobil menu">
Menu
</button>
<a href="#" class="button button-secondary" role="button">
login
</a>
</div>
<button class="button button-primary" id="btnTrigger"
data-micromodal-trigger="modal-passive">
Read me
</button>
<div id="divContainer"></div>
</div>
<div class="solution-header">
</div>
</header>
Also change the Home controller method to
public ActionResult Roles()
{
return View();
}
I have a small accordion on one of my site's pages and I cannot seem to toggle properly between the plus and the minus signs.
it toggles fine if I open and close the same accordion item but the problem is when I click on another item while this one is active, it leaves the minus sign on.
<div class="accordion">
<div class="accordion-item item1 verde">
<div class="title"><i class="plusminus fas fa-plus" aria-hidden="true"></i>item1</div>
<div class="content"><p>content for item 1</p></div>
</div>
<div class="accordion-item item2 verde">
<div class="title"><i class="plusminus fas fa-plus" aria-hidden="true"></i>item2</div>
<div class="content"><p>content for item 2</p></div>
</div>
</div>
$('.accordion-item .heading').on('click', function(e) {
e.preventDefault();
// Add the correct active class
if($(this).closest('.accordion-item').hasClass('active')) {
// Remove active classes
$('.accordion-item').removeClass('active');
} else {
// Remove active classes
$('.accordion-item').removeClass('active');
// Add the active class
$(this).closest('.accordion-item').addClass('active');
}
if($(this).closest('.accordion-item').hasClass('active')) {
$(this).find(".plusminus").removeClass('fa-plus').addClass('fa-minus');
} else {
$(this).find(".plusminus").removeClass('fa-minus').addClass('fa-plus');
}
// Show the content
var $content = $(this).next();
$content.slideToggle(100);
$('.accordion-item .content').not($content).slideUp('fast');
});
You only need to reset the fa-minus and fa-plus classes at the begining of the event.
Change every plusminus class to fa-plus and at the end of the event handler you set as you are already doing.
$('.accordion-item .heading').on('click', function (e) {
e.preventDefault();
$(".plusminus").removeClass('fa-minus').addClass('fa-plus');
// Add the correct active class
if ($(this).closest('.accordion-item').hasClass('active')) {
// Remove active classes
$('.accordion-item').removeClass('active');
} else {
// Remove active classes
$('.accordion-item').removeClass('active');
// Add the active class
$(this).closest('.accordion-item').addClass('active');
}
if ($(this).closest('.accordion-item').hasClass('active')) {
$(this).find(".plusminus").removeClass('fa-plus').addClass('fa-minus');
} else {
$(this).find(".plusminus").removeClass('fa-minus').addClass('fa-plus');
}
// Show the content
var $content = $(this).next();
$content.slideToggle(100);
$('.accordion-item .content').not($content).slideUp('fast');
});
<div class="accordion">
<div class="accordion-item item1 verde">
<a href="#" class="heading">
<div class="title"><i class="plusminus fas fa-plus" aria-hidden="true"></i>item1</div>
</a>
<div class="content">
<p>content for item 1</p>
</div>
</div>
<div class="accordion-item item2 verde">
<a href="#" class="heading">
<div class="title"><i class="plusminus fas fa-plus" aria-hidden="true"></i>item2</div>
</a>
<div class="content">
<p>content for item 2</p>
</div>
</div>
</div>
I am trying to make a list of buttons appear, and once selected for the appropriate div underneath the button to be shown, I have used similar code before:
<li><button class="w3-button w3-grey w3-hover-dark-grey w3-round-xxlarge" ng-click="section = !section">Structure and function of the processor</button></li>
Which works fine so I am guessing it has something to do with $index
Do you have any idea how I could achieve this?
<div class="w3-panel" ng-show="section">
henlo content
</div>
<div ng-app="tApp" ng-controller="tController">
<ul class="w3-ul">
<div ng-repeat="x in items">
<li>
<button class="w3-button w3-grey w3-hover-dark-grey w3-round-xxlarge" ng-click="section{{$index}} = !section{{$index}}">{{x.name}}</button>
</li>
<div class="w3-panel" ng-show="section{{$index}}">
{{x.content}}
</div>
</div>
</ul>
</div>
<script>
var app=angular.module("tApp", []);
app.controller("tController", function($scope)
{
$scope.items=[{name:"first",content:"henlo first"},{name:"second", content:"henlo second"}];
});
</script>
you can initialise a property with ng-init and use that property to show/hide content
<div ng-repeat="x in items" ng-init="x.displayContent = false">
<li>
<button class="w3-button w3-grey w3-hover-dark-grey w3-round-xxlarge" ng-click="x.displayContent = !x.displayContent">{{x.name}}</button>
</li>
<div class="w3-panel" ng-show="x.displayContent">
{{x.content}}
</div>
</div>
I want to remove the footer from my modal. But it is only removing the contents and not the space acquired by it.
Here is my code...
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
</div>
If you don't use '<div class="modal-footer">' in your modal template then bootstrap will made it for you. I think this is why you see the footer with your code.
My solution is hidding the footer in the template (last line) :
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer" style="display:none"></div>
</div>
Try this
<div class="modal-footer" hidden="true"></div>
I'm pretty sure the "extra space" is the <p> margin. Try this css :
.modal .modal-body p {
margin-bottom: 0;
}
I think its because of the padding given to modal-footer class. Try overriding it
.modal .modal-footer {
padding: 4px;
}
I have kept it as 4px to preserve round corners
You can override modal-header, modal-footer of the bootstrap modal.
Add the following code.
.modal-footer{display: none;}
This can be achievable using jQuery
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
buttons: []
};
$('#approvalsModal').modal(options,{
closed: function(){
// Do some action when modal closed
}
});
$(".approvalsModal").click(function(){
$("#approvalsModal").modal('openModal');
});
}
);