i have the following html code with a dropdown-toggle
<div class="col-md-12">
<div class="box collapsed-box">
<div class="box-header with-border">
<div class="box-tools pull-right">
<button data-widget="collapse" class="btn btn-box-tool"><i class="fa fa-plus"></i></button>
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-box-tool dropdown-toggle"><i class="fa fa-wrench"></i></button>
</div>
<button data-widget="remove" class="btn btn-box-tool"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body" style="display: none;">
<div class="row">
<div class="col-md-8">
<div class="chart-responsive">
<canvas height="200" id="salesChart" style="width: 675px; height: 200px;" width="675"></canvas>
page 2
</div>
</div>
</div>
</div>
</div>
</div>
you can open and close the dropdown-toogle.
after clicking on a href-link and a full page refresh the dropdown-toogle should be opened/closed as it was before.
1) how can i get the right values of the divs?
e.g,. when it is closed and when it is opened
2) how can i set the status of the dropdown-toogle back to the one before the page was refreshed?
Related
I am bit struggling to make spaces in between, I am using ml-auto. What I want to achieve is separate each control have its using spaces in between, "Core Status label" should be far each other and be on horizontal line between the two. This is what I have so far on the bootstrap;
<div class="row">
<div class="col-xs-3 ml-md-auto"></div>
<label for="Core Status" class="col-form-label">Core Status</label>
</div>
<!--Viewing button/modules-->
<div class="form-group row">
<div class="col-xs-3 ml-auto"></div>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#formModal">
<i class="fas fa-plus"></i>
Module
</button>
<div class="col-xs-5 ml-2">
</div>
</div>
If you want your controls to be in horizontal, within one row add controls and add mr-auto.
<div class="container-fluid">
<div class="row">
<label for="Core Status" class="col mr-auto">Core Status</label>
<div class="col">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#formModal">
<i class="fas fa-plus"></i>
Module
</button>
</div>
</div>
</div>
Please find the demo
I have a collapsible box in adminlte. by default when page loads, it's expanded. How to make it collapsed by default?
Here is what I have used to make box:
https://adminlte.io/docs/2.4/js-box-widget
My HTML:
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Collapsible Box Example</h3>
<div class="box-tools pull-right">
<!-- Collapse Button -->
<button type="button" class="btn btn-box-tool" data-widget="collapse">
<i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="box-body">
The body of the box
</div>
<div class="box-footer">
The footer of the box
</div>
</div>
My script:
<script>
$('.box').boxWidget({
animationSpeed: 500,
collapseTrigger: '#my-collapse-button-trigger',
removeTrigger: '#my-remove-button-trigger',
collapseIcon: 'fa-minus',
expandIcon: 'fa-plus',
removeIcon: 'fa-times',
hide: true
})
Try boxWidget('collapse')
$('.box').boxWidget({
animationSpeed: 500,
collapseTrigger: '#my-collapse-button-trigger',
removeTrigger: '#my-remove-button-trigger',
collapseIcon: 'fa-minus',
expandIcon: 'fa-plus',
removeIcon: 'fa-times',
hide: true
})
$('.box').boxWidget('collapse')
OR add collapsed-box class
<div class="box collapsed-box">
...
</div>
First, add collapsed-box class to <div class="box">.
Then, add display: none inline style to <div class="box-body"> and <div class="box-footer">.
Like this:
<div class="box collapsed-box">
<div class="box-header with-border">
<h3 class="box-title">Collapsible Box Example</h3>
<div class="box-tools pull-right">
<!-- Collapse Button -->
<button type="button" class="btn btn-box-tool" data-widget="collapse">
<i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="box-body" style="display: none">
The body of the box
</div>
<!-- /.box-body -->
<div class="box-footer" style="display: none">
The footer of the box
</div>
</div>
It should work.
I'm trying to make a card of ship information for a game, but for each ship there are multiple veriations. e.g "Large Clipper" and a "Festive Large Clipper".
But on the dropdown menu my list items work once, and then don't return to an inactive state.
JSFiddle
<div class="p-0">
<div class="container">
<div class="row">
<div class="col-md-12" style="">
<div class="tab-content">
<div class="tab-pane fade show active" id="adventure" role="tabpanel">
<div class="card" style="">
<div class="card-header"><img src="http://eversong.ivyro.net/SHIP/00000024.png" height="50" width="50">
<h4 style="display:inline-block">Large Clipper</h4>
<div class="btn-group float-right">
<button class="btn btn-primary dropdown-toggle" id="variationsDropdown" type="button" aria-haspopup="true" aria-expanded="true" data-toggle="dropdown"> Variations </button>
<div class="dropdown-menu" aria-labelledby="variationsDropdown">
<a class="dropdown-item" href="#large-clipper" data-toggle="tab">Large Clipper</a>
<a class="dropdown-item" href="#festive-large-clipper" data-toggle="tab">Festive Large Clipper</a>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade show active" id="large-clipper">
<div class="card-body">
<h6 class="text-muted">
Just a big and fast clipper.
</h6>
<p class=" p-y-1">
<span style="font-style:italic">Level requirements: </span>
<span>Adventure: 30 </span>
<span>Trade: 56 </span>
<span>Maritime: 75</span>
</p>
<div class="row">
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Selling: <span>5</span> </a></div>
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Buying: <span>10</span> </a></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="festive-large-clipper">
<div class="card-body">
<h6 class="text-muted">
A large clipper but with fancy plating.
</h6>
<p class=" p-y-1">
<span style="font-style:italic">Level requirements: </span>
<span>Adventure: 30 </span>
<span>Trade: 56 </span>
<span>Maritime: 75</span>
</p>
<div class="row">
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Selling: <span>5</span> </a></div>
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Buying: <span>10</span> </a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can see what I mean when you press on the items from the "Variations" dropdown.
Apparently it's a bug, found my solution here (github).
had to add
$(".nav-pills .nav-item .nav-link:not(.nav-pills .nav-item.dropdown .nav-link), .dropdown-item").click(function()
{
$(".dropdown-item.active").removeClass('active');
});
I'm using bootstrap for an easy responsive design. However, I moved computer today and was going to work on my project some more and my design is acting up (See attached figures). I have tested to see if I changed width, would it act up; no it did not. I then played with the height of my browsers to see if it did and yes it did act up and displayed improperly. I am fairly new-ish to bootstrap, but I am not sure what is causing this or could be on something on my computer end. I used Chrome for both viewing. I also tested with Edge and it displayed properly.
Look top-right for view port
This is what it should look like
This is what I get when changing resolution
At request, another part of the code which is loaded via JS.
<body>
<div id="interfaceNaviation" style="position:relative;top:0;left:0;right:0;background-color:green;">
<div class="navBar"><span class="navLink">Home</span> <span class="navLink">Presentation</span> <span class="navLink">Schedules</span> <span class="navLink">Display</span></div>
<br>
<div id="loginInfo">
<button id="signinButton" type="button" class="btn btn-primary btn-fixed-width navbar-btn" style="visibility: visible; display: inline;">
Sign in <i class="fa fa-white fa-sign-in icon-right"></i>
</button>
<a href="javascript:void(0);" id="signoutButton" class="navbar-nav" style="visibility: hidden; display: none;">
<span>Sign Out</span>
<i class="fa fa-blue-custom fa-sign-out"></i>
</a>
<div style="display:inline;" id="signinText">Authorize requests using OAuth 2.0:</div>
</div>
</div>
<div id="pres_interface" class="container-fluid" style="height:90%;">
<div id="pres_options" class="row" style="height:5%;">
<div id="add-placeholder" class="col-xs-2"><button id="btn_add-placeholder" class="btn btn-success fa-1.2x">Add Placeholder</button></div>
</div>
<!--style="left:0px;width:20%;height:100%;position:relative;"-->
<div id="pres_editor_panel" class="row" style="height:95%">
<div class="col-xs-2">
<div id="editor_display">
<div id="placeholderContainer"><span class="header fa-1.2x">Placeholders</span></div>
<li><span name="placeholders-change" class="fa-1.2x" data-id="ph1">ph1 <i data-id="void" class="fa fa-trash-o"></i></span></li>
<li><span name="placeholders-change" class="fa-1.2x" data-id="ph2">ph2 <i data-id="void" class="fa fa-trash-o"></i></span></li>
<li><span name="placeholders-change" class="fa-1.2x" data-id="ph04">ph04 <i data-id="void" class="fa fa-trash-o"></i></span></li>
<li><span name="placeholders-change" class="fa-1.2x" data-id="Test">Test <i data-id="void" class="fa fa-trash-o"></i></span></li>
<li><span name="placeholders-change" class="fa-1.2x" data-id="Test1">Test1 <i data-id="void" class="fa fa-trash-o"></i></span></li>
</div>
</div>
<!-- style="width:79.9%;height:100%" -->
<div class="col-xs-10 fa-padless-left">
<iframe id="fake_view" src="fake_view.html" style="width:100%;height:100%;border:1px solid #081D79;"></iframe>
</div>
</div>
</div>
<div id="pres_options-lower" style="background-color:purple;left:0;right:0;text-align:right;bottom:0;">
<button>Restore</button>
<button>Save</button>
<button>Publish</button>
</div>
<div id="window_mask" class="mask hidden"></div>
<div id="popup_display" class="hidden"></div>
<div id="sub_popup_display" class="hidden"></div>
<div id="sub_window_mask" class="mask hidden"></div>
</body>
This is my body code WITHOUT being edited via JS:
<body>
<div id="interfaceNaviation" style="position:relative;top:0;left:0;right:0;background-color:green;">
<div class="navBar"><span class="navLink">Home</span> <span class="navLink">Presentation</span> <span class="navLink">Schedules</span> <span class="navLink">Display</span></div>
<br /><div id="loginInfo">
<button id="signinButton" type="button" class="btn btn-primary btn-fixed-width navbar-btn">
Sign in <i class="fa fa-white fa-sign-in icon-right"></i>
</button>
<a href="javascript:void(0);" id="signoutButton" class="navbar-nav">
<span>Sign Out</span>
<i class="fa fa-blue-custom fa-sign-out"></i>
</a>
<div style="display:inline;" id="signinText"></div>
</div>
</div>
<div id="pres_interface" class="container-fluid" style="height:90%;" >
<div id="pres_options" class="row" style="height:5%;">
<div id="add-placeholder" class="col-xs-2"><button id="btn_add-placeholder" class="btn btn-success fa-1.2x">Add Placeholder</button></div>
</div>
<!--style="left:0px;width:20%;height:100%;position:relative;"-->
<div id="pres_editor_panel" class="row" style="height:95%">
<div class="col-xs-2">
<div id="editor_display" >
</div>
</div>
<!-- style="width:79.9%;height:100%" -->
<div class="col-xs-10 fa-padless-left">
<iframe id="fake_view" src="fake_view.html" style="width:100%;height:100%;border:1px solid #081D79;" ></iframe>
</div>
</div>
</div>
<div id="pres_options-lower" style="background-color:purple;left:0;right:0;text-align:right;bottom:0;">
<button>Restore</button>
<button>Save</button>
<button>Publish</button>
</div>
<div id="window_mask" class="mask hidden"></div>
<div id="popup_display" class="hidden"></div>
<div id="sub_popup_display" class="hidden"></div>
<div id="sub_window_mask" class="mask hidden"></div>
</body>
Thanks for any help! I am stumped at this right now.
I want my div col-md-9 to have a height the same as the content in my first div col-md-3's contents.
I also want my div col-md-9's button inside to be the same height as the col-md-3's content.
I'd like the text on the button to fill the button also.
How do I accomplish this?
<div class="row" style="height:300px;">
<div class="col-md-3">
<div class="thumbnail">
<a href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<img src="#(Url.Content("~/Images/LIJayCow-135.png"))" alt="Download Timer App" />
</a>
<div class="caption">
<p>Run the Timer App on your computer to keep track of your time.</p>
<a class="btn btn-primary" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-download"></span> Download
</a>
</div>
</div>
</div>
<div class="col-md-9" style="height:300px; background: #f0e68c">
<div class="thumbnail" style="width:100%; height:300px">
<a class="btn btn-block btn-primary" style="display: block; width: 100%; height:100%; font-size:large" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-share"> LIRA</span>
</a>
</div>
</div>
</div>
All you have to do is change the div with the class "row" to the height you want.
<div class="row" style="height:300px;">
<div class="col-md-3" style="height:100%">
<div class="thumbnail" style="width:100%; height:100%">
<a href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<img src="#(Url.Content("~/Images/LIJayCow-135.png"))" alt="Download Timer App" />
</a>
<div class="caption">
<p>Run the Timer App on your computer to keep track of your time.</p>
<a class="btn btn-primary" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-download"></span> Download
</a>
</div>
</div>
</div>
<div class="col-md-9" style=" background: #f0e68c;height:100%">
<div class="thumbnail" style="width:100%; height:100%;">
<a class="btn btn-primary" style="" href="#(Url.Content('~/ProjectTimer/LITL.DesktopTimer.application'))">
<span class="glyphicon glyphicon-share"> LIRA</span>
</a>
</div>
</div>
</div>
Are you looking for a result like this?
Codepen: link
<div class="row" style="height:300px;">
<div class="col-md-3">
<div class="thumbnail">
<a href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))" >
</a>
<div class="caption" style="height:300px;">
<p>Run the Timer App on your computer to keep track of your time.</p>
<a class="btn btn-primary" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-download"></span> Download
</a>
</div>
</div>
</div>
<div class="col-md-9" style="height:300px; background: #f0e68c">
<div class="thumbnail" style="width:100%; height:300px">
<a class="btn btn-block btn-primary" style="display: block; width: 100%; height:100%; font-size:large" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-share" style="font-size: 300px;">LIRA</span>
</a>
</div>
</div>
</div>
Just use the btn-block class, like this:
<div class="col-md-3"><button class="btn btn-block" >Show Details</button></div>
The issue is that the button is 100% height when using h-100, the solution is to set the form element to 100% also.
So it'll look like this:
#using(Html.BeginForm("Action","Controller", FormMethod.Post, new { #class = "h-100" }) {
<button class="h-100">Button</button>
}