I'm building a Intranet Blazor server app. I've added Bootstrap nav-tabs which work as expected launching the Blazor project in Visual Studio. However, the tabs do not work when published to the IIS server. All other Bootstrap classes appear to be working ok.
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-1" target="_self" role="tab" aria-controls="nav-1" aria-selected="true">General Details</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-2" target="_self" role="tab" aria-controls="nav-2" aria-selected="false">Stationery</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-3" target="_self" role="tab" aria-controls="nav-3" aria-selected="false">Final Details</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-1" role="tabpanel" aria-labelledby="nav-home-tab">Some text</div>
<div class="tab-pane fade" id="nav-2" role="tabpanel" aria-labelledby="nav-2-tab">...</div>
<div class="tab-pane fade" id="nav-3" role="tabpanel" aria-labelledby="nav-3-tab">...</div>
</div>
#*Stationery shows ... run from visual studio, but goes to the homepage displaying /#nav-2 in the address bar*#
Related
I have implemented an Offcanvas sidebar. It displays fine but none of the links in the sidebar actually work.
When I clicked on the links, nothing happens. I don't think I understand the mechanism well enough so any guidance here would be appreciated.
I'm using Laravel so this code is inside a view that is loaded for every page (like app.blade.php).
The sidebar works fine and can be properly toggled with the button but the links don't take me anywhere. What am I missing?
Here's the code. Link1 and Link2 are valid Laravel routes in my test app.
<body class="d-flex flex-column min-vh-100">
<a class="btn btn-primary float-end" data-bs-toggle="offcanvas" href="#offcanvas" role="button" aria-controls="offcanvas">
Toggle Menu
</a>
<nav class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" data-bs-keyboard="false" data-bs-backdrop="true" data-bs-scroll="true">
<div class="offcanvas-header border-bottom">
<a href="/" class="d-flex align-items-center text-decoration-none offcanvas-title d-sm-block">
<h4>
My site
</h4>
</a>
</div>
<div class="offcanvas-body px-0" data-bs-target="experience-collapse" data-bs-toggle="collapse">
<ul class="list-unstyled ps-0">
<li class="mb-1">
<button
class="btn btn-toggle align-items-center rounded"
data-bs-toggle="collapse"
data-bs-target="#experience-collapse"
aria-expanded="true"
aria-controls="experience-collapse"
>
<i class="bi bi-list-ol"></i> Links
</button>
<div class="collapse show" id="experience-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><i class="bi bi-arrow-down-up"></i> Link 1</li>
<li><i class="bi bi-search"></i> Link2</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</body>
Plain navbar from bootstrap 5 docs is used.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">¿qué es?</a></li>
<li class="nav-item"><a class="nav-item nav-link" href="#">Acciones subvencionables</a></li>
<li class="nav-item"><a class="nav-item nav-link" href="#">Nuestro equipo</a></li>
<li class="nav-item"><a class="nav-item nav-link" href="#">Contacta con nosotros</a></li>
<li class="nav-item"><a class="nav-item nav-link" href="#">Recursos y más información</a></li>
</ul>
</div>
</div>
</nav>
Bootstram.min.css at top of page. No extra css used, and jquery is placed at the bottom of my page.
There are no console errors.
By the way, using laravel.
I cant seem to find any reason for not dropping down/collapse my hamburger.
Thanks in advance
Sorry if anyone got on research it was a dumb error.
bootstrap css was placed prior to styles.css
Thanks anyway
The navbar that I'm creating has its brand showing, however the links will not appear. The toggle button appears when shrinking the screen, but still no links appear when I click the button.
import React from "react";
function Navbar()
{
return(
<div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" >Demo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="navbarText" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse nabar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Menu<span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
);
}
export default Navbar;
Never mind I was missing a "v", insert facepalm.
I have already read some links regarding Bootstrap tab in Laravel but none of them is working for me.
I have 3 views (movies, scheduled_movies, group_movies) each view has its respective controller. Now I want to show all these views using bootstrap tab component. I tried a lot, but tabs don't work properly or sometimes all the data of three view shown in the first tab and sometimes only tabs are shown but not the data.
Here is my code-
app.blade.php
#include('components.navbar')
#yield('base')
base.blade.php
#extends('layouts.app')
#section('base')
<div class="container-fluid">
<div class="row">
<div class="col-2 d-none d-md-block bg-light sidebar" >
#include('components.sidebar')
</div>
<main id="main" class="col-10 ml-sm-auto col-lg-10 px-3">
#yield('content')
</main>
</div>
</div>
#endsection
I have separate tab.blade.php where all my bootstrap tab code is written. and I have included all 3 views using #include
tab.blade.php
#extends('layouts.base')
#section('content')
<div class="p-3">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="movies-tab" data-toggle="tab" href="#movies" role="tab" aria-controls="movies"
aria-selected="true">All movies</a>
</li>
<li class="nav-item">
<a class="nav-link" id="scheduled-movies-tab" data-toggle="tab" href="#scheduled-movies" role="tab"
aria-controls="scheduled-movies" aria-selected="false">Scheduled Movies</a>
</li>
<li class="nav-item">
<a class="nav-link" id="group-movies-tab" data-toggle="tab" href="#group-movies" role="tab" aria-controls="group-movies"
aria-selected="false">Group Movies</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show" id="movies" role="tabpanel" aria-labelledby="movies-tab">
#include('movies.all_movies.index')
</div>
<div class="tab-pane fade" id="scheduled-movies" role="tabpanel" aria-labelledby="scheduled-movies-tab">
#include('movies.scheduled-movies.index')
</div>
<div class="tab-pane fade" id="group-movies" role="tabpanel" aria-labelledby="group-movies-tab">
#include('movies.group-movies.index')
</div>
</div>
</div>
#endsection
MoviesController
class MoviesController extends Controller
{
public function index()
{
$movies = Movie::all();
return view('movies.all_movies.index')->with('movies', $movies);
}
}
The same code is written in ScheduledMoviesController.
This is my web.php file
Route::get('movies', 'MoviesController#index');
Route::get('scheduled-movies', 'ScheduledMoviesController#index');
Route::get('group-videos', 'GroupMoviesController#index')->middleware('verified');
Till now I have figured out some cases
Maybe my blade syntax #yield or #include is wrong.
Maybe routing is wrong (because of the first page of the tab showing data from all three).
I'm using jqGrid JS 5.3.0 with styleUI set to Bootstrap. The grid displays fine without bootstrap tabs, but with this html (below copied from getbootstrap.com with mygrid "embedded") the content area is blank with no grid.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
<div><table id="mygrid"></table><div id="mygrid_pager"></div></div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
How can I make it work inside a "tab-pane"? TIA.
(can't include javascript code of creating "mygrid" right now)
You need to change your code from
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
<div><table id="mygrid"></table>
to
<div class="tab-pane fade in" id="home" role="tabpanel" aria-labelledby="home-tab"> <table id="mygrid"></table></div>
adding the in class to your #home will show it on load (judging from <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> you want it to show on load)
and moving <table id="mygrid"></table> into div#home will show your grid inside the tab.