Here is a jsfiddle of some tabs I have in bootstrap that I have added an 'x' button to. I already have all my js working fine to actually close tabs with the button.. I'm a little weak with css though still. How can I move the button 'x' to the top right of the tab?? Below is my code(using default bootstrap css for all of this)
<nav class="navbar navbar-default">
<ul class="nav nav-tabs nav-justified">
<li id="shellstab" class="active"><a role="tab" data-toggle="tab" href="#shells" aria-expanded="true">Shell<button class="close closeTab" type="button" >×</button></a>
<li id="wikitab"><a role="tab" data-toggle="tab" href="#wiki" aria-expanded="true">Wiki<button class="close closeTab" type="button">×</button></a>
<li id="querytab"><a role="tab" data-toggle="tab" href="#query" aria-expanded="true">Query<button class="close closeTab" type="button">×</button></a>
</ul>
</nav>
I would recommend to create a external css file.
But... put this in the "X" Button
style="position: absolute; top:0; right:0;"
Look at this jsFiddle:
Related
On the main webpage, I am using tabs to display and organize images. After clicking on one of the images and opening up to the webpage for that image, I want to make it so clicking on one of the tabs from that webpage returns to the original main webpage and goes directly to that tab.
<ul class="nav nav-pills mb-3 sticky-top shadow-sm p-2 bg-body rounded" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-all-tab" data-bs-toggle="pill" data-bs-target="#all-tab-pane" type="button" role="tab" aria-controls="all-tab" aria-selected="true">All</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-second-tab" data-bs-toggle="pill" data-bs-target="#second-pane" type="button" role="tab" aria-controls="second-tab" aria-selected="false">Watercolor</button>
</li>
I thought that by changing the data-bs-target on the individual page to mainpage.php#second-pane it would take me to that specific content. I then tried adding an anchor tag linking it to a href = "mainpage.php#second-pane" as the parent element outside the list item and button, but that only takes me to the tab I have set to active on mainpage.php and not the tab I am trying to go to. I have also tried using section and linking it to its ID but that also does not work.
https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior
I have the following bootstrap nav tabs:
<div class="container">
<ul class="nav nav-tabs" id="projectTabStrip" role="tablist">
<li class="nav-item" id="projectDetailsTab">
<a class="nav-link">Project Details</a>
</li>
<li class="nav-item" id="projectStatusTab">
<a class=nav-link>Status</a>
</li>
<li class="nav-item" id="projectDocumentsTab">
<a class=nav-link>Documents</a>
</li>
</ul>
</div>
I removed all of the href tags for brevity and to make it easier to read.
My problem is that the tabs are displaying like this:
By default, the tabs should be on the left side of the page, correct? What is causing this issue?
My goal is to get the tabs to align to the left side of the page, something like this:
Based on the code you've provided it would appear that your container is the problem. The container element applies a fixed width to everything within it, centering itself to the viewport.
The code that you have provided doesn't suggest that this component is required, but given that you've provided a minimal example you may expect unforeseen issues with its removal.
As mister #Robert already wrote, the align left problem caused by .container div. Although lets write your code more correct. You misses .active class in first li a. And a href attribute you will need anyway. Minimal it should be href='#' for the correct work of Bootstrap tabs.
<div class="any-class-not-container">
<ul class="nav nav-tabs" id="projectTabStrip" role="tablist">
<li class="nav-item" id="projectDetailsTab">
<a class="nav-link active" href="#">Project Details</a>
</li>
<li class="nav-item" id="projectStatusTab">
<a class="nav-link" href="#">Status</a>
</li>
<li class="nav-item" id="projectDocumentsTab">
<a class="nav-link" href="#">Documents</a>
</li>
</ul>
</div>
More about Nav tabs in Bootstrap 4 you can read here https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior
My navbar works really well and it is fully responsible, but when I open confirm dialog in background my navbar width goes to 800px even if screen has 1480px making an empty space on the right side like you can notice on the screen.
I really don't have idea how to fix it, this is my navbar:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" routerLink="">frontend</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link menu-item dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Vehicles</a>
<div class=" dropdown dropdown-menu">
<a class="dropdown-item menu-item" routerLink="/topic"> Vehicles list </a>
<a class="dropdown-item menu-item" routerLink="/add-topic"> Add vehicle </a>
</div>
</li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
I use default confirm dialog from primeNg without any changes:
confirm dialog
Maybe I could somehow make additional css to navbar to make position allways on 100% of screen? Any ideas how could I do that?
You are using bootstrap navbar and primeng so some css are getting conflict. If you write below css in style.css so navbar working normal.
.ui-overflow-hidden {
position: unset !important;
}
I am following the example to use the Navbar from http://getbootstrap.com/components/#navbar-default, however, I am having problem to make it display horizontally like in the example. The code below is the same from the page. What am I missing to make it to display horizontally?
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body id="bs-example-navbar-collapse-1">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</body>
</html>
Try using ul class="nav nav-pills navbar-right".
I am not 100% sure that "my" problem was exactly the same as the original posters, but it looks very similar and the same solution could apply.
In my case, the problem manifested when the navbar was used within an Angular application with the "developer tools" on the side. This was reducing the width of the page made available to bootstrap, below a certain threshold (see below), which in turn made the navbar items to show on a column instead of a row.
The outermost navbar definition, as of the documentation sample, looked like this:
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
...
</div>
</nav>
After I checked the various element classes / styles in the browser, as well as the Bootstrap documentation, it seems that the following constraints apply:
The layout of the li elements is not directly controlled by the parent ul, but by the main nav element.
This one may bear a flex-direction: row style, and in this case the navbar items are shown horizontally, exactly as in the documentation samples. However, this style is conditioned by a minimum page width.
If the page is not wide enough, this style is not applied, the navbar is shown as collapsed and the "Toggle collapse" button is shown.
When expanding the navbar via the "Toggle collapse" button, the navbar items are always shown vertically, no matter how wide the page is.
Now the anomaly seems to be related to Bootstrap mistakenly deciding that the navbar items won't fit within a given page width, while common sense says they will. (In my case, it switched to collapsed navbar when the items would only need 40% of the available page width).
As stated by the documentation page, this is controlled (in the snippet above) via the navbar-expand-lg class, and more specifically the "lg" suffix. This explicitly refers to a specific display width. Changing this suffix (towards lower widths) triggers the presentation switch - from expanded to collapsed - in a way more appropriate for the actual navbar content. Concretely, in my case changing to navbar-expand-sm made the navbar behave as expected as the page gets wider or narrower.
At first view, this solution could affect the page portability across devices. However, I don't think this is the case because it is not about specifying an expected page with, but a minimum page width to accommodate the navbar - which does not depend on the device.
From the way I had read your question, I get that you are trying to get it vertically instead of horizontally. It's at least an assumption from your code example that is already horizontal. :)
A nav list with the class flex-column should to the trick for the list itself. Found this over at the Bootstrap documentation itself under there available styles. An example of this list itself could look something like this:
<ul class="nav flex-column nav-link">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<form class="my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</ul>
Most of the things bootstrap has for a navbar seem to work with this. This is at least with the things I have used until now.
I'm using Angular 2 with Bootstrap 4. I can get the active tab to change using the following code:
navbar.component.html
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="navbar">
<div class="container">
<a class="navbar-brand" [routerLink]="['']">My App</a>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
true}">
<a class="nav-link" [routerLink]="['']">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
<a class="nav-link" [routerLink]="['/about']">About</a>
</li>
<li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
<a class="nav-link" [routerLink]="['/example']">Example</a>
</li>
</ul>
</div>
</div>
</nav>
The line:
[routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
works well at changing to the currently active tab, but when I navigate to a component using something like:
this.router.navigate(['']);
The active tab doesn't change. Is there a way to change the active tab when navigating like above?
So basically you want to make your high-lighting in a service and call that service to apply your style when your URL equals a specific state. this is done by using
this.router.url === '/myroute'
here is my plunker. NOTE that the active tab will change whether you use the links or the buttons. The buttons are what use the this.router.navigate(['']); like you asked in the question