i have GroupBy:Threat name and potential impect drop-down button but when data get loaded from server in a div having id "listThreat",drop-down menu not get displayed.when data not get displayed dropdown works fine but when i click on any Dropdown menu option element it shows effect on all button in the page like potential impect button name get changed to element.
below is my code
<div class="panel" style="border: 1px solid black; height: 100vh"
id="ThreatList">
<header class="panel-heading">
<div class="row">
<!--first row of column -->
<div class="col-sm-6">
<div>Threat List</div>
</div>
<div class="col-sm-6">
<div>Total Threat:</div>
</div>
</div>
</header>
<div class="row">
<!--second row of column -->
<div class="col-sm-6">
<div class="dropdown">
<button class="btn btn-primary btn-xs dropdown-toggle"
type="button" data-toggle="dropdown">Group By:threat
Name</button>
<ul class="dropdown-menu">
<li>Element</li>
<li>Threat Name</li>
</ul>
</div>
</div>
<div class="col-sm-6">
<div class="dropdown">
<button class="btn btn-primary btn-xs dropdown-toggle"
type="button" data-toggle="dropdown">Sort By:Potential
Impect</button>
<ul class="dropdown-menu">
<li>Potential Impect</li>
<li>Mitigation</li>
<li>Validation</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="listThreat"></div>
<!-- end of second row -->
</div>
</div>
</div>
</div>
Related
so basically im doing this in angular and using bootstrap
I want the name and description on the left and img on the right but it isn't working , pls help
code link is below
here
<div class="row">
<div class="col-xs-12">
<button class='btn btn-success'>New bug</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item clearfix"
style="background:grey ; color:red;"
*ngFor="let bug of bugs">
<div class="pull-left">
<h4 class="list-group-item-headin">name</h4>
<p class="list-group-item-text">description</p>
<span class="list-group-item-text">type</span>
<span class="list-group-item-text">status</span>
<span class="list-group-item-text">priority</span> </div>
<div class="pull-right">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg"
alt="{{bug.name}}"
class="img-responsive"
style="max-height: 100px;">
</div>
</a>
<app-bugs-item></app-bugs-item>
</div>
</div>
I'm guessing you want the text to wrap around the image. If that is the case then only put the float class on the image, and reorder the image to above the text.
<div class="container">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success">New bug</button>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item clearfix" style="background: grey; color: red" *ngFor="let bug of bugs">
<div class="float-right">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg" alt="{{bug.name}}" class="img-responsive" style="max-height: 100px" />
</div>
<h4 class="list-group-item-headin">name</h4>
<p class="list-group-item-text">description</p>
<span class="list-group-item-text">type</span>
<span class="list-group-item-text">status</span>
<span class="list-group-item-text">priority</span>
</a>
<app-bugs-item></app-bugs-item>
</div>
</div>
</div>
If you want the text and image to be in 2 columns I would suggest using flexbox
<div class="container">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success">New bug</button>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item d-flex justify-content-between" style="background: grey; color: red" *ngFor="let bug of bugs">
<div>
<h4 class="list-group-item-headin">name</h4>
<p class="list-group-item-text">description</p>
<span class="list-group-item-text">type</span>
<span class="list-group-item-text">status</span>
<span class="list-group-item-text">priority</span>
</div>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg" alt="{{bug.name}}" class="img-responsive" style="max-height: 100px" />
</div>
</a>
<app-bugs-item></app-bugs-item>
</div>
</div>
</div>
i have a small issue concerning my bootstrap 4 tabs:
My intention is too switch between buttons like this example: https://codepen.io/anon/pen/vwQamK but with bootstrap.
<div id="tab" class="btn-group btn-group-justified" data-toggle="buttons">
<a href="#prices" class="btn btn-primary active" data-toggle="tab">
<input type="radio" />Prices
</a>
<a href="#features" class="btn btn-default" data-toggle="tab">
<input type="radio" />Features
</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="prices">Prices content</div>
<div class="tab-pane" id="features">Features Content</div>
</div>
Currently the toggle between the tab content is not working!
Here is my codepen:
https://codepen.io/user1010/pen/mYQvVo
With .nav-pills
You can use .nav-pills: https://getbootstrap.com/docs/4.3/components/navs/#pills
<div class="container">
<div class="nav nav-pills">
<a href="#prices" class="nav-link active" data-toggle="pill">
Prices
</a>
<a href="#features" class="nav-link" data-toggle="pill">
Features
</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="prices">Prices content</div>
<div class="tab-pane" id="features">Features Content</div>
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/dxzaufho/12/
With btn-group and custom styles
<div class="container">
<div class="nav btn-group">
<a href="#prices" class="btn active" data-toggle="tab">
Prices
</a>
<a href="#features" class="btn" data-toggle="tab">
Features
</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="prices">Prices content</div>
<div class="tab-pane" id="features">Features Content</div>
</div>
</div>
.btn-group.nav {
display: inline-flex;
}
.btn-group .btn.active {
background-color: var(--primary);
color: #fff;
}
demo: https://jsfiddle.net/davidliang2008/dxzaufho/19/
Regarding to your issue that your tab is not working, I've opened an issue in Github. Currently it looks like you need to have either .nav or .list-group as the tab's parent class, otherwise the tab won't work properly.
It looks like instead of being inputs that you can just use the text and it switches between content.
<div id="tab" class="btn-group btn-group-justified" data-toggle="buttons">
<a href="#prices" class="btn btn-primary active" data-toggle="tab">
Prices
</a>
<a href="#features" class="btn btn-default" data-toggle="tab">
Features
</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="prices">Prices content</div>
<div class="tab-pane" id="features">Features Content</div>
</div>
Bootstrap 4.3.1 working tabs as radio buttons - jsfiddle
$(document).ready(function () {
$('input[name="intervaltype"]').click(function () {
$(this).tab('show');
$(this).removeClass('active');
});
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="nav nav-tabs" role="tablist">
<div>
<input id="optDaily" checked name="intervaltype" type="radio" data-target="#scheduleDaily">
<label for="optDaily">Daily</label>
</div>
<div>
<input id="optWeekly" name="intervaltype" type="radio" data-target="#scheduleWeekly">
<label for="optWeekly">Weekly</label>
</div>
<div>
<input id="optMonthly" name="intervaltype" type="radio" data-target="#scheduleMonthly">
<label for="optMonthly">Monthly</label>
</div>
</div>
<div class="tab-content">
<div id="scheduleDaily" class="tab-pane active">Daily</div>
<div id="scheduleWeekly" class="tab-pane">Weekly</div>
<div id="scheduleMonthly" class="tab-pane">Montly</div>
</div>
I have the same problem. The group buttons worked very well on 4.31 but after I did an upgrade on bootstrap 4.4 or 4.4.1, on refresh they get active all and only after clicking each button they start to work properly.
I suggest you to try to use bootstrap 4.3.1 with the example from #Yevgeniy Afanasyev
I'm facing this problem with a Bootstrap-select (https://github.com/silviomoreto/bootstrap-select) dropdown list:
As you can see the dropdown is displayed behind the second element (the second div with green background).
This second div is created with this simple code:
<div class="col-md-7" style="height:100%">
<div id="prt-form-container" class="prt-vertical-align">
[...]
</div>
</div>
col-md-7 is a standard Bootstrap class.
The dropdown list code is:
<div class="btn-group bootstrap-select form-control prt-form-control open">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Indica la professione" aria-expanded="true"><span class="filter-option pull-left">Indica la professione</span> <span class="bs-caret"><span class="caret"></span></span></button>
<div class="dropdown-menu open" style="max-height: 178px; overflow: hidden;">
<div class="bs-searchbox"><input type="text" class="form-control" autocomplete="off"></div>
<ul class="dropdown-menu inner" role="menu" style="max-height: 130px; overflow-y: auto;">
[...]
</ul>
</div>
</div>
How can I correctly show the dropdown list?
I've tried to vertical align text in Bootstrap's list group (inside of tag li) with display: table-cell; line-height: 50px; vertical-align: middle;, but it doesn't work at all. Help me with it, please. ;)
<div class="row">
<div class="col-md-12">
<ul class="list-group">
<li class="list-group-item clearfix">Byl jsi pořádně prošťouchán uživatelem <strong>hakys</strong>.
<form action="my_pokes.php" method="post">
<span class="pull-right">
<button class="btn btn-success" name="poke_hakys">Šťouchnout zpět</button>
<button class="btn btn-danger" name="delete_hakys">Smazat šťouchnutí</button>
</span>
</form>
</li> </ul>
</div>
</div>
You can do something like this, and then you won't need to override the list-group-item style..
<div class="row">
<div class="col-md-12`">
<ul class="list-group">
<li class="list-group-item text-right">
<span class="pull-left">
Byl jsi pořádně prošťouchán uživatelem <strong>hakys</strong>.</span>
<form action="my_pokes.php" method="post" class="form-inline">
<span>
<button class="btn btn-success" name="poke_hakys">Šťouchnout zpět</button>
<button class="btn btn-danger" name="delete_hakys">Smazat šťouchnutí</button>
</span>
</form>
</li>
</ul>
</div>
</div>
Demo: http://codeply.com/go/6H4wBABPGw
I made some changes to your code. The biggest change is that instead of setting up one 12 span column I divided it into three. this makes it easier for laying out items in bootstrap.
Let me know if this helps you.
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-5">
<ul class="list-group">
<li class="list-group-item clearfix">Byl jsi pořádně prošťouchán uživatelem <strong>hakys</strong>.</div>
<div class="col-md-4">
<form action="my_pokes.php" method="post"> <span class="pull-right">
<button class="btn btn-success" name="poke_hakys">Šťouchnout zpět</button>
<button class="btn btn-danger" name="delete_hakys">Smazat šťouchnutí</button>
</span>
</form>
</li>
</ul>
</div>
</div>
</div>
How can I prevent some of the default mobile functionality? (c.f. Bootstrap - Creating a mobile nav that doesn't use collapse)
In particular, I want to get two rows of navbar:
the first with logo and page title;
the second with something that will toggle a sidebar, with a search box filling the rest of the space.
The first time I tried I ended up ignoring the nav-bar and building my own layout, but before abandoning again I thought I would check the community. The main problem is that the search box insists on being 100% width (on small screens).
Playing around with Chrome devtools, I can turn off width:100% in .form-control but I can't seem to get .form-group to contract
<div class="navbar navbar-default navbar-static-top" ng-controller="NavbarCtrl">
<div class="container">
<div class="navbar-header">
af
</div>
<div id="navbar-main">
{{page.title}}
</div>
</div>
<div class="container">
<div class="navbar-left">
<ul class="nav navbar-nav">
<li>Crieria</li>
</ul>
</div>
<div id="navbar-search" class="navbar-right">
<form class="navbar-form " role="search">
<div class="form-group">
<input type="text" size="20" class="form-control" placeholder="Search">
<!-- <button type="submit" class="btn btn-default">Submit</button> -->
</div>
</form>
</div>
</div>
</div>
Try this:
If you need full width in the md and lg view use container-fluid instead of container
DEMO
<div class="navbar navbar-default navbar-static-top" ng-controller="NavbarCtrl">
<div class="container">
<div class="navbar-header col-xs-6 col-sm-6 col-md-6 col-lg-6">
af
</div>
<div id="navbar-main col-xs-6 col-sm-6 col-md-6 col-lg-6">
{{page.title}}
</div>
</div>
<div class="container">
<div class="navbar-left col-xs-4 col-sm-4 col-md-2 col-lg-2">
<ul class="nav navbar-nav">
<li><a href="" data-toggle>Crieria</a></li>
</ul>
</div>
<div id="navbar-search" class="navbar-right col-xs-8 col-sm-8 col-md-10 col-lg-10">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
<!-- <button type="submit" class="btn btn-default">Submit</button> -->
</div>
</div>
</div>
</div>
Where ever you do not want Bootstrap behavior, just don't use bootstrap classes, rather define your own classes with the styling and behavior you do want it to have.
If you attempt to overwrite Bootstrap behavior for any page element of substantial size and complexity; you'll find it would have been far easier if you'd just avoided using the bootstrap classes on that element by the time you overwrite all of it's behavior.
If all you want is a navbar with two rows though you could do it with boostrap default classes if you wanted to.. jsFiddle (link)
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<img src="http://placehold.it/70x70" class="span1" style="position:relative;top:10px">
<div class="span10">
<div class="row">
<div class="span2 offset5" style="text-align:right">
<div class="navbar-text">
<p>Login</p>
</div>
</div>
<div class="span2 offset1">
<div class="pull-right">
<form class="navbar-form">
<div class="input-append">
<input class="span2" id="appendedInputButtons" type="text">
<button class="btn" type="button">Search</button>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="span10">
<ul class="nav pull-right">
<li>Page 1</li>
<li class="divider-vertical"></li>
<li>Page 2</li>
<li class="divider-vertical"></li>
<li>Page 3</li>
<li class="divider-vertical"></li>
<li>Page 4<li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>