Level 75
@loomix Could you post your layout view? Propably there is something like .col-md-4 if it's bootstrap for example.
Apr 24, 2020
33
Level 1
Removing sidebar and correcting layout
Hey, I have a smaller project which is fine with the top navbar and does not need a sidebar. So I removed '@include(’layouts.navbars.sidebar’)' from 'auth.blade.php' to remove the sidebar. I expected the rest of the page to fill the area where the sidebar was (like when you hide the sidebar) but it doesn't. Could someone give me a hint how to get the site using the entire width of the page now? Thanks.
Level 1
Which layout view do you exactly mean, the \resources\views\layouts\app.blade.php?
Level 75
If you use it, so yes.
Level 75
@loomix Ok sorry post this file auth.blade.php. Btw all your js file connect with laravel-mix to one file.
Level 1
There are more than one, from which directory? Yes I know about Laravel mix but did not clean up yet.
Level 75
Level 1
Okay, so it's the one in \page_templates :
<div class="wrapper ">
<div class="main-panel">
@include('layouts.navbars.navs.auth')
@yield('content')
@include('layouts.footers.auth')
</div>
</div>
Level 75
It's really hard to help you, because you need to post more html of that for figure it out.
Level 1
Hm, the main content of a page is expanded when the user hits the sidebar hide button. I think this is a about CSS, no? Here is the HTML from the profile edit page, maybe there is a clue in it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="http://localhost/matpro/public/material/img/apple-icon.png">
<link rel="icon" type="image/png" href="http://localhost/matpro/public/material/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>
Material Dashboard PRO Laravel by Creative Tim
</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<!-- CSS Files -->
<link href="http://localhost/matpro/public/material/css/material-dashboard.css?v=2.1.2" rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="http://localhost/matpro/public/material/demo/demo.css" rel="stylesheet" />
</head>
<body class="">
<form id="logout-form" action="http://localhost/matpro/public/logout" method="POST" style="display: none;">
<input type="hidden" name="_token" value="VifJnrTfBKh0A48tVKviZGggSQmjoCIdFQC0dLQJ"> </form>
<div class="wrapper ">
<div class="main-panel">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
<div class="container-fluid">
<div class="collapse navbar-collapse justify-content-end">
<form class="navbar-form">
<div class="input-group no-border">
<input type="text" value="" class="form-control" placeholder="Search">
<button type="submit" class="btn btn-white btn-round btn-just-icon">
<i class="material-icons">search</i>
<div class="ripple-container"></div>
</button>
</div>
</form>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="http://localhost/matpro/public/dashboard">
<i class="material-icons">dashboard</i>
<p class="d-lg-none d-md-block">
Stats
</p>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">notifications</i>
<span class="notification">5</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mike responded to your email</a>
<a class="dropdown-item" href="#">You have 5 new tasks</a>
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
<a class="dropdown-item" href="#">Another Notification</a>
<a class="dropdown-item" href="#">Another One</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">person</i>
<p class="d-lg-none d-md-block">
Account
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
<a class="dropdown-item" href="http://localhost/matpro/public/profile">Profile</a>
<a class="dropdown-item" href="http://localhost/matpro/public/logout" onclick="event.preventDefault();document.getElementById('logout-form').submit();">Log out</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar --> <div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-header card-header-icon card-header-rose">
<div class="card-icon">
<i class="material-icons">perm_identity</i>
</div>
<h4 class="card-title">Edit Profile
</h4>
</div>
<div class="card-body">
<form method="post" enctype="multipart/form-data" action="http://localhost/matpro/public/profile" autocomplete="off" class="form-horizontal">
<input type="hidden" name="_token" value="VifJnrTfBKh0A48tVKviZGggSQmjoCIdFQC0dLQJ"> <input type="hidden" name="_method" value="put">
<div class="row">
<label class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-7">
<div class="form-group">
<input class="form-control" name="name" id="input-name" type="text" placeholder="Name" value="Roman" required="true" aria-required="true"/>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-7">
<div class="form-group">
<input class="form-control" name="email" id="input-email" type="email" placeholder="Email" value="[email protected]" required />
</div>
</div>
</div>
<button type="submit" class="btn btn-rose pull-right">Update Profile</button>
<div class="clearfix"></div>
</form>
</div>
</div>
<div class="card">
<div class="card-header card-header-icon card-header-rose">
<div class="card-icon">
<i class="material-icons">lock</i>
</div>
<h4 class="card-title">Change password</h4>
</div>
<div class="card-body">
<form method="post" action="http://localhost/matpro/public/profile/password" class="form-horizontal">
<input type="hidden" name="_token" value="VifJnrTfBKh0A48tVKviZGggSQmjoCIdFQC0dLQJ"> <input type="hidden" name="_method" value="put">
<div class="row">
<label class="col-sm-2 col-form-label" for="input-current-password">Current Password</label>
<div class="col-sm-7">
<div class="form-group">
<input class="form-control" input type="password" name="old_password" id="input-current-password" placeholder="Current Password" value="" required />
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 col-form-label" for="input-password">New Password</label>
<div class="col-sm-7">
<div class="form-group">
<input class="form-control" name="password" id="input-password" type="password" placeholder="New Password" value="" required />
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 col-form-label" for="input-password-confirmation">Confirm New Password</label>
<div class="col-sm-7">
<div class="form-group">
<input class="form-control" name="password_confirmation" id="input-password-confirmation" type="password" placeholder="Confirm New Password" value="" required />
</div>
</div>
</div>
<button type="submit" class="btn btn-rose pull-right">Change password</button>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
});
</script>
</body>
</html>
Level 75
@loomix Ok problem is this
<div class="row">
<div class="col-md-8">
...
</div>
</div>
You can remove it and of course also </div> for both of them, Or just set class col-md-8 to col-md-12.
Level 1
Okay, there is only 1 entry for this in the template's css:
.Col-Md-8 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
But width: 100% is what I want so I don't get it. I need to modify it in the css, because it should apply to all pages.
Level 75
@loomix It's bootstrap don't change behaviour of that css class, just remove it from your view file.
Level 1
I see. But thats weird, because in \resources\views\users\edit.blade.php it is already "col-md-12". So it is rendered by Laravel to col-md-8 because it thinks the sidebar is still there, I guess.
@extends('layouts.app', ['activePage' => 'user-management', 'menuParent' => 'laravel', 'titlePage' => __('User Management')])
@section('content')
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<form method="post" enctype="multipart/form-data" action="{{ route('user.update', $user) }}" autocomplete="off" class="form-horizontal">
@csrf
@method('put')
<div class="card ">
<div class="card-header card-header-rose card-header-icon">
(...)
So how do we tell Laravel that the sidebar is gone, so that it uses "col-md-12"?
Level 75
It's not rendered by Laravel somehow, it exits somewhere in your views.
Level 1
I did not mess with the col-md. The \resources\views\users\edit.blade.php is what's used for editing user profile. There is "col-md-12" in the view source but "col-md-8" in the browser. So what's happening between source and rendered browser view?
Level 75
Nothing, it's somewhere in your app. I don't see your code so I can't help you with that. In my opinion it's .col-md-8 why you don't have it on full width.
Level 1
"I don't see your code so I can't help you with that." Whch code do you want to see?
Level 75
I don't want to see, I just mean that I can't search in your code where is problem.
Level 1
My application is almost vanilla, I just removed the sidebar and the sidebar toggle in top navbar. Maybe someone else has an idea how to put the page on 100% width.
Level 28
@loomix have you done a global search for col-md-8 and inspected each context before assuming col-md-12 gets "overridden" by col-md-8 ?
Level 1
It seems I made a mistake yesterday: The profile edit view is ' \resources\views\PROFILE\edit.blade.php' and not ' \resources\views\USERS\edit.blade.php'. The latter contains "col-md-8" indeed. Nevertheless when I change it to "col-md-12", the cards (boxes) in the main panel with the user info fields are stretched to the right but the left side (where the sidebar was) remains with a large space to the left.
Level 75
You use there
<label class="col-sm-2 col-form-label" for="input-current-password">Current Password</label>
<div class="col-sm-7">
...
</div>
So 2 + 7 = 9, but layout is 12 so change col-sm-7 to col-sm-10 everywhere in your view when you need it.
Level 1
Hm, does not do anything to the left side. It only widens the form fields to the right border of the boxes. Here is my ' \resources\views\PROFILE\edit.blade.php' now:
@extends('layouts.app', ['activePage' => 'profile', 'menuParent' => 'laravel', 'titlePage' => __('User Profile')])
@section('content')
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header card-header-icon card-header-rose">
<div class="card-icon">
<i class="material-icons">perm_identity</i>
</div>
<h4 class="card-title">{{ __('Edit Profile') }}
</h4>
</div>
<div class="card-body">
<form method="post" enctype="multipart/form-data" action="{{ route('profile.update') }}" autocomplete="off" class="form-horizontal">
@csrf
@method('put')
<div class="row">
<label class="col-sm-2 col-form-label">{{ __('Name') }}</label>
<div class="col-sm-10">
<div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
<input class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="name" id="input-name" type="text" placeholder="{{ __('Name') }}" value="{{ old('name', auth()->user()->name) }}" required="true" aria-required="true"/>
@include('alerts.feedback', ['field' => 'name'])
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 col-form-label">{{ __('Email') }}</label>
<div class="col-sm-10">
<div class="form-group{{ $errors->has('email') ? ' has-danger' : '' }}">
<input class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" id="input-email" type="email" placeholder="{{ __('Email') }}" value="{{ old('email', auth()->user()->email) }}" required />
@include('alerts.feedback', ['field' => 'email'])
</div>
</div>
</div>
<button type="submit" class="btn btn-rose pull-right">{{ __('Update Profile') }}</button>
<div class="clearfix"></div>
</form>
</div>
</div>
<div class="card">
<div class="card-header card-header-icon card-header-rose">
<div class="card-icon">
<i class="material-icons">lock</i>
</div>
<h4 class="card-title">{{ __('Change password') }}</h4>
</div>
<div class="card-body">
<form method="post" action="{{ route('profile.password') }}" class="form-horizontal">
@csrf
@method('put')
<div class="row">
<label class="col-sm-2 col-form-label" for="input-current-password">{{ __('Current Password') }}</label>
<div class="col-sm-10">
<div class="form-group{{ $errors->has('old_password') ? ' has-danger' : '' }}">
<input class="form-control{{ $errors->has('old_password') ? ' is-invalid' : '' }}" input type="password" name="old_password" id="input-current-password" placeholder="{{ __('Current Password') }}" value="" required />
@include('alerts.feedback', ['field' => 'old_password'])
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 col-form-label" for="input-password">{{ __('New Password') }}</label>
<div class="col-sm-10">
<div class="form-group{{ $errors->has('password') ? ' has-danger' : '' }}">
<input class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" id="input-password" type="password" placeholder="{{ __('New Password') }}" value="" required />
@include('alerts.feedback', ['field' => 'password'])
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 col-form-label" for="input-password-confirmation">{{ __('Confirm New Password') }}</label>
<div class="col-sm-10">
<div class="form-group">
<input class="form-control" name="password_confirmation" id="input-password-confirmation" type="password" placeholder="{{ __('Confirm New Password') }}" value="" required />
</div>
</div>
</div>
<button type="submit" class="btn btn-rose pull-right">{{ __('Change password') }}</button>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
It seems there is some part of the app that "thinks" that the sidebar is still there and places the layout around the former sidebar.
Level 75
@loomix Ok post you layouts/app.blade.php. Something wrong is in that file.
Level 1
--}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="{{ asset('material') }}/img/apple-icon.png">
<link rel="icon" type="image/png" href="{{ asset('material') }}/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>
Material Dashboard PRO Laravel by Creative Tim
</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<!-- CSS Files -->
<link href="{{ asset('material') }}/css/material-dashboard.css?v=2.1.2" rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="{{ asset('material') }}/demo/demo.css" rel="stylesheet" />
</head>
<body class="{{ $class ?? '' }}">
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
@if (auth()->check() && !in_array(request()->route()->getName(), ['welcome', 'page.pricing', 'page.lock', 'page.error']))
@include('layouts.page_templates.auth')
@else
@include('layouts.page_templates.guest')
@endif
<!-- Core JS Files -->
<script src="{{ asset('material') }}/js/core/jquery.min.js"></script>
<script src="{{ asset('material') }}/js/core/popper.min.js"></script>
<script src="{{ asset('material') }}/js/core/bootstrap-material-design.min.js"></script>
<script src="{{ asset('material') }}/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<!-- Plugin for the momentJs -->
<script src="{{ asset('material') }}/js/plugins/moment.min.js"></script>
<!-- Plugin for Sweet Alert -->
<script src="{{ asset('material') }}/js/plugins/sweetalert2.js"></script>
<!-- Forms Validations Plugin -->
<script src="{{ asset('material') }}/js/plugins/jquery.validate.min.js"></script>
<!-- Plugin for the Wizard, full documentation here: https://github.com/VinceG/twitter-bootstrap-wizard -->
<script src="{{ asset('material') }}/js/plugins/jquery.bootstrap-wizard.js"></script>
<!-- Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
<script src="{{ asset('material') }}/js/plugins/bootstrap-selectpicker.js"></script>
<!-- Plugin for the DateTimePicker, full documentation here: https://eonasdan.github.io/bootstrap-datetimepicker/ -->
<script src="{{ asset('material') }}/js/plugins/bootstrap-datetimepicker.min.js"></script>
<!-- DataTables.net Plugin, full documentation here: https://datatables.net/ -->
<script src="{{ asset('material') }}/js/plugins/jquery.dataTables.min.js"></script>
<!-- Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs -->
<script src="{{ asset('material') }}/js/plugins/bootstrap-tagsinput.js"></script>
<!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
<script src="{{ asset('material') }}/js/plugins/jasny-bootstrap.min.js"></script>
<!-- Full Calendar Plugin, full documentation here: https://github.com/fullcalendar/fullcalendar -->
<script src="{{ asset('material') }}/js/plugins/fullcalendar.min.js"></script>
<!-- Vector Map plugin, full documentation here: http://jvectormap.com/documentation/ -->
<script src="{{ asset('material') }}/js/plugins/jquery-jvectormap.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="{{ asset('material') }}/js/plugins/nouislider.min.js"></script>
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
<!-- Library for adding dinamically elements -->
<script src="{{ asset('material') }}/js/plugins/arrive.min.js"></script>
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Chartist JS -->
<script src="{{ asset('material') }}/js/plugins/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="{{ asset('material') }}/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="{{ asset('material') }}/js/material-dashboard.js?v=2.1.0" type="text/javascript"></script>
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
<script src="{{ asset('material') }}/demo/demo.js"></script>
<script src="{{ asset('material') }}/js/application.js"></script>
<script>
$(document).ready(function () {
@if (session('status'))
$.notify({
icon: "done",
message: "{{ session('status') }}"
}, {
type: 'success',
timer: 3000,
placement: {
from: 'top',
align: 'right'
}
});
@endif
});
</script>
@stack('js')
</body>
</html>
Level 75
@loomix Ok next what is here layouts.page_templates.auth.blade.php
Level 1
Already posted yesteday (see above), but here it is, still the same:
<div class="wrapper ">
<div class="main-panel">
@include('layouts.navbars.navs.auth')
@yield('content')
@include('layouts.footers.auth')
</div>
</div>
Level 75
@loomix Check you source code in browser, maybe is something wrong in css, open devtools and try to find which element is there. Then check your code and css and maybe you can find where is the problem.
Level 1
Question: Is it possible that the bootstrap template "Material Dashboard PRO" I am using is not meant to be used without sidebar by design? I did not touch the CSS at all, so maybe it would be wise to ask the creators of this template if they even thought of the case that someone would like to switch the sidebar off?
Level 75
Please or to participate in this conversation.