I am using bootstrap, and I have a tabbed navigation system within a modal pop up, I want buttons on the page, that will trigger the pop up, and then go to a specific tab within the pop up.
To be more complicated, the tabs I want to reach are within the main tabbed navigation system in the modal (Tabs within a tab). I want a button that will trigger "section 4" below
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" 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>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
<div class="span8">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="active">Section 3</li>
<li>Section 4</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab3">
<p>I'm in Section 3.</p>
</div>
<div class="tab-pane" id="tab4">
<p>I'm in Section 4.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Related
I am trying to add a side menu to a webpage, which acts responsive similar to a navbar (unfortunately I have still a navbar on top).
In https://jsfiddle.net/ralfavatar/crve8nxb/ I posted the code and if you size up the result window you should see on the left side (yellow) a menu, which is hidden down to a certain screen size --> good.
But I want to have instead a toggle button (like the hamburger button from the navbar), which shows me this menu like a dropdown.
I didn't find any hints and I have no idea how I can connect a toggle button with a menu to the existing menu, or, which I would appreciate, to toggle the existing menu with this button.
Does anybody an idea for this?
Here is the code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Content -->
<section class="mainsection">
<div class="container-fluid">
<div class="row">
<div class="col-xs-1 col-sm-3" id="debug1">
<nav class="nav nav-pills flex-column d-none d-lg-block">
<a class="nav-item nav-link active" href="#aboutme" data-toggle="pill">Über mich</a>
<a class="nav-item nav-link" href="#location" data-toggle="pill">Location</a>
<a class="nav-item nav-link" href="#products" data-toggle="pill">Dinge</a>
<a class="nav-item nav-link" href="#interestingthings" data-toggle="pill">Interessantes</a>
</nav>
</div>
<div class="col-xs-pull-12 col-sm-9" id="debug2">
<div class="maincontent align-content-lg-center">
<div class="tab-content">
<div class="tab-pane active fade in" id="aboutme">
Hallo 1
</div>
<div class="tab-pane active fade in" id="location">
Hallo 2
</div>
<div class="tab-pane fade" id="products">
Hallo 3
</div>
<div class="tab-pane fade" id="interestingthings">
Hallo 4
</div>
</div>
</div>
</div>
</div>
</div>
</section>
The way to influence yellow placeholder for sidebar with toggle (hamburger) button is simply to change data-target html attribute for that button with target id (#debug1).
This way you can move menu to sidebar in yellow area and toggle it.
In your example case yellow area will appear/disappear but you can build menu sidebar on top of that.
Moin
<button type="button" class="navbar-toggler ml-auto"
data-toggle="collapse" data-target="#debug1" aria-expanded="false"
aria-controls="navbarResponsive" aria-label="Toogle navigation">
UPDATE :
I have added (copy/paste) hamburger button from navbar and placed it in yellow section and targeted red area that should simulate dropdown menu. Reordering of HTML you can place it inside of yellow section too. I hope this helps.
<!-- Content -->
<section class="mainsection">
<div class="container-fluid">
<div class="row">
<div class="col-xs-1 col-sm-3" id="debug1">
<button type="button" class="navbar-toggler ml-auto"
data-toggle="collapse" data-target="#debug2" aria-expanded="false" aria-controls="navbarResponsive" aria-label="Toogle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<nav class="nav nav-pills flex-column d-none d-lg-block">
<a class="nav-item nav-link active" href="#aboutme" data-toggle="pill">Über mich</a>
<a class="nav-item nav-link" href="#location" data-toggle="pill">Location</a>
<a class="nav-item nav-link" href="#products" data-toggle="pill">Dinge</a>
<a class="nav-item nav-link" href="#interestingthings" data-toggle="pill">Interessantes</a>
</nav>
</div>
<div class="col-xs-pull-12 col-sm-9" id="debug2">
<div class="maincontent align-content-lg-center">
<div class="tab-content">
<div class="tab-pane active fade in" id="aboutme">
Hallo 1
</div>
<div class="tab-pane active fade in" id="location">
Hallo 2
</div>
<div class="tab-pane fade" id="products">
Hallo 3
</div>
<div class="tab-pane fade" id="interestingthings">
Hallo 4
</div>
</div>
</div>
</div>
</div>
</div>
</section>
UPDATE 2 (I have now targeted sidebar menu to toggle with button inside yellow section sidebar) :
<!-- Content -->
<section class="mainsection">
<div class="container-fluid">
<div class="row">
<div class="col-xs-1 col-sm-3">
<button type="button" class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#debug3" aria-expanded="false" aria-controls="navbarResponsive" aria-label="Toogle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<nav class="nav navbar-collapse collapse nav-pills flex-column d-none d-lg-block" id="debug3">
<a class="nav-item nav-link active" href="#aboutme" data-toggle="pill">Über mich</a>
<a class="nav-item nav-link" href="#location" data-toggle="pill">Location</a>
<a class="nav-item nav-link" href="#products" data-toggle="pill">Dinge</a>
<a class="nav-item nav-link" href="#interestingthings" data-toggle="pill">Interessantes</a>
</nav>
</div>
<div class="col-xs-pull-12 col-sm-9" id="debug2">
<div class="maincontent align-content-lg-center">
<div class="tab-content">
<div class="tab-pane active fade in" id="aboutme">
Hallo 1
</div>
<div class="tab-pane active fade in" id="location">
Hallo 2
</div>
<div class="tab-pane fade" id="products">
Hallo 3
</div>
<div class="tab-pane fade" id="interestingthings">
Hallo 4
</div>
</div>
</div>
</div>
</div>
</div>
</section>
UPDATE 3 :
<!-- Content -->
<section class="mainsection">
<div class="container-fluid">
<div class="row">
<div class="col-xs-1 col-sm-3" style="background-color: #000">
<button type="button" class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#debug3" aria-expanded="false" aria-controls="navbarResponsive" aria-label="Toogle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="row">
<div class="col-xs-1 col-sm-3" id="debug3">
<nav class="nav navbar-collapse collapse nav-pills flex-column d-none d-lg-block">
<a class="nav-item nav-link active" href="#aboutme" data-toggle="pill">Über mich</a>
<a class="nav-item nav-link" href="#location" data-toggle="pill">Location</a>
<a class="nav-item nav-link" href="#products" data-toggle="pill">Dinge</a>
<a class="nav-item nav-link" href="#interestingthings" data-toggle="pill">Interessantes</a>
</nav>
</div>
<div class="col-xs-pull-12 col-sm-9" id="debug2">
<div class="maincontent align-content-lg-center">
<div class="tab-content">
<div class="tab-pane active fade in" id="aboutme">
Hallo 1
</div>
<div class="tab-pane active fade in" id="location">
Hallo 2
</div>
<div class="tab-pane fade" id="products">
Hallo 3
</div>
<div class="tab-pane fade" id="interestingthings">
Hallo 4
</div>
</div>
</div>
</div>
</div>
</div>
</section>
i am using tabs in bootstrap modal bootstrap tab get data from database
when i use onclick="javascript:$('#myModal').modal('show');" here () i get id from database and show content against that id but i am facing issue that first model with tabs working fine but when open second model their tabs not switching.
sample code is bellow...
<button class="btn btn-default" onclick="javascript:$('#myModal<?php echo $cid;?>').modal('show');">Click Me</button>
<div id="myModal<?php echo $cid;?>" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab"
data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab"
data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="messages">Messages</div>
<div role="tabpanel" class="tab-pane" id="settings">Settings</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Remove tabindex="-1" from modal. Then it will work.
In bootstrap 4.5, the css classes "nav nav-tabs" need to add for ul like this:
<ul class="nav nav-tabs">
<li>.........
</ul>
I have a Bootstrap Navbar that works fine in desktop but when shrunk down at about 425px the contact button starts to work as the login button as well, which it's never have done before.
The code I have is this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navtop navbar-nav pull-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Contact Us <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Advertising</li>
<li>Contact the Council </li>
<li>Report a Problem</li>
</ul>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<p class="modalfooter discoverthesecret">discover the secret...</p>
</div>
</div>
</div>
</div>
So when I click on the contact us, it loads up the login modal?
Thank you.
Your second list item (login btn) is over the first so you are triggering the the second instead of first
add the following:
.nav>li {
width: 50%;
float: right;
}
I use Bootstrap nav-tabs. With the example below I have no problem if the page's URL is mypage
($stateProvider.state('ide', {url: '/mypage',...)
but I must have an id parameter
($stateProvider.state('ide', {url: '/mypage/:id',...)
that no longer works. I am redirected to the homepage of the site . Do you know how to change my code to make it work?
<div>
<ul class="nav nav-tabs">
<li class="active">
Tab 1
</li>
<li class="">
Tab 2
</li>
<li class="">
Tab 3
</li>
</ul>
<div class="tab-content">
<div class="active tab-pane fade in" id="tab1">
<div id="editorA"></div>
</div>
<div class="tab-pane fade in" id="tab2">
<div id="editorB"></div>
</div>
<div class="tab-pane fade in" id="tab3">
<div id="editorC"></div>
</div>
</div>
</div>
My link go to http://localhost:8080/#/mypage#tab2 instead of http://localhost:8080/#/mypage/1063#tab2
I find the solution:
In my AngularJS controller I add:
$scope.keepId=id;
In my HTML page, I add #/mypage/{{keepId}} in link:
<div>
<ul class="nav nav-tabs">
<li class="active">
Tab 1
</li>
<li class="">
Tab 2
</li>
<li class="">
Tab 3
</li>
</ul>
<div class="tab-content">
<div class="active tab-pane fade in" id="tab1">
<div id="editorA"></div>
</div>
<div class="tab-pane fade in" id="tab2">
<div id="editorB"></div>
</div>
<div class="tab-pane fade in" id="tab3">
<div id="editorC"></div>
</div>
</div>
</div>
Here's the fiddle
I am trying to make a simple 'recent posts' container similar to wordpress widget like this
The problem is I can't get the tabs to occupy full width and there some space left on the right side of each tab, I've tried to increase the padding but it's not accurate, also tried adding but even that didn't work.
Any help would be appreciated.
HTML Code:
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-5">
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#popular" role="tab" data-toggle="tab">
Popular
</a>
</li>
<li>
<a href="#recent" role="tab" data-toggle="tab">
Recent
</a>
</li>
<li>
<a href="#comments" role="tab" data-toggle="tab">
Comments
</a>
</li>
</ul><!-- /.nav-tabs -->
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="popular">
<ul class="popular-list list-normal">
<li>
<div class="text">
Sample Title for a Post
<p class="meta">
</div><!-- /.text -->
<div class="image">
</div><!-- /.image -->
</li>
</ul><!-- /.popular-list -->
</div><!-- /.tab-pane -->
<div class="tab-pane fade" id="recent">
Some Content Will obviously come here
</div><!-- /.tab-pane -->
<div class="tab-pane fade" id="comments">
Some Content Will obviously come here
</div><!-- /.tab-pane -->
</div><!-- /.tab-content -->
</div><!-- /.col-5 -->
</div><!-- /.row -->
</div><!-- /.container -->
Try this:
Use <ul class="list-group">,<li class="list-group-item">
DEMO
HTML:
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-5">
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#popular" role="tab" data-toggle="tab">Popular
</a>
</li>
<li>
<a href="#recent" role="tab" data-toggle="tab">Recent
</a>
</li>
<li>
<a href="#comments" role="tab" data-toggle="tab">Comments
</a>
</li>
</ul>
<!-- /.nav-tabs -->
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="popular">
<ul class="list-group popular-list list-normal">
<li class="list-group-item">
<div class="text">
Sample Title for a Post
<p class="meta">
</div>
<!-- /.text -->
<div class="image">
</div>
<!-- /.image -->
</li>
</ul>
<!-- /.popular-list -->
</div>
<!-- /.tab-pane -->
<div class="tab-pane fade" id="recent">
Some Content Will obviously come here
</div>
<!-- /.tab-pane -->
<div class="tab-pane fade" id="comments">
Some Content Will obviously come here
</div>
<!-- /.tab-pane -->
</div>
<!-- /.tab-content -->
</div>
<!-- /.col-5 -->
</div>
<!-- /.row -->
</div>