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.
Related
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*#
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
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 trying to make my dashboard app more dynamic by adding a collapsable navbar. The nav should resize to only icons, and the main area should expand. But I'm kind of stuck on how to expand it from now on.
The project is based on the PHP Laravel framework 5.6.
I have tried different setups with grid columns.
<div class="container-fluid" id="wrapper">
<div class="row">
#include("test.components.sidenav")
<main class="col-xs-12 col-sm-8 col-lg-9 col-xl-10 pt-3 pl-4 ml-auto">
<div class="container-fluid" id="expandable">
<nav class="sidebar col-xs-12 col-sm-4 col-lg-3 col-xl-2" id="collapseId">
<h1 class="site-title">
<a href="{{ route('home') }}">
<em class="fab fa-accessible-icon"></em>
<span>Ready4It</span>
</a>
</h1>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">
<em class="fas fa-bars"></em>
</a>
<ul class="nav nav-pills flex-column sidebar-nav">
<li class="nav-item">
<a class="nav-link active" href="">
<em class="fas fa-home"></em>
<span>Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fas fa-ticket-alt nav-bar-icon"></em>
<span>Ticket overzicht</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-chart-line"></em>
<span>Statistieken</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-envelope"></em>
<span>Mail monitoring</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-clock"></em>
<span>Uren invoer</span>
</a>
</li>
</ul>
<a href="#" class="logout-button" id="logout-button">
<em class="fa fa-power-off"></em>
<span>Logout</span>
</a>
</nav>
<section class="row">
<div class="col-sm-12">
<div class="row">
#yield("content")
</div>
</div>
</section>
</div>
</main>
</div>
</div>
<script>
/* This script is for the mobile navbar collapse */
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$("#menu-collapse").click(function (e) {
e.preventDefault();
$("#collapseId").toggleClass("icons-only");
$("#logout-button").toggleClass("logout-button").toggleClass("logout-button-collapsed")
})
</script>
The nav should resize to only icons, and the main area should expand.
Try this one,
Add a fixed width to the class icons-only also adjust transform translate if needed
.icons-only {
width: some-width;
}
and also make sure you added same width as margin-left for main section ( apply this only if the icons-only class is added to nav )
I'm building a site with Bootstrap 2, and I'd like to add a dropdown menu to one item in the navbar.
Simple enough. However, when the dropdown is expanded, it appears underneath the incorrect item in the navbar:
Notice in the above screenshot that the dropdown renders underneath "Admin" (the leftmost navbar element) instead of "Locator" (the element that activates the dropdown).
How do I fix this so that the dropdown appears underneath the correct navbar element?
Here is the HTML for the navbar:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="...">Dashboard</a>
<div class="nav-collapse collapse pull-right">
<ul class="nav">
<li>Admin</li>
<li>Find Trips</li>
<!-- Locator Dropdown -->
<li>
<a id="nav-locator-dropdown" class="dropdown-toggle" href="..."
data-toggle="dropdown" data-target="#">
Locator
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="nav-locator-dropdown">
<li>My Trips</li>
<li>Create Trip</li>
</ul>
</li>
<li>My Profile</li>
<li>Log Out</li>
</ul>
</div>
</div>
</div>
</div>
Your dropdown is appearing on the wrong spot because you're missing the class that defines the relative position for your dropdown. To fix this, just add the .dropdown class to your menu item with a submenu like so:
<li class="dropdown"> ... </li>
Here is your fixed markup:
HTML
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="...">Dashboard</a>
<div class="nav-collapse collapse pull-right">
<ul class="nav">
<li>Admin</li>
<li>Find Trips</li>
<!-- Locator Dropdown -->
<li class="dropdown">
<a id="nav-locator-dropdown" class="dropdown-toggle" href="..."
data-toggle="dropdown" data-target="#">
Locator
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="nav-locator-dropdown">
<li>My Trips</li>
<li>Create Trip</li>
</ul>
</li>
<li>My Profile</li>
<li>Log Out</li>
</ul>
</div>
</div>
</div>
</div>