Post Content
When trying panel fullscreen, the height doesn't expand. I think that voyager-resize-full or related panel-action is not working.
Hey!
Oh that is an interesting finding!
Here is a very quick fix:
- Edit the
public/wave/css/admin.cssfile, and add the following:
.panel.is-fullscreen .panel-body {
height: 90%;
}
.panel.is-fullscreen .mce-statusbar {
visibility: hidden;
}
That is the additional custom CSS file that wave uses to define some custom classes for the Voyager admin as per the docs here:
https://voyager-docs.devdojo.com/customization/additional-css-js
Let me know how it goes!
1
Thank you for the quick reply. Unfortunately, it didn't work.
Fullscreen

edit-add.blade.php
...
@section('css')
<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
.panel .mce-panel {
border-left-color: #fff;
border-right-color: #fff;
}
.panel .mce-toolbar,
.panel .mce-statusbar {
padding-left: 20px;
}
.panel .mce-edit-area,
.panel .mce-edit-area iframe,
.panel .mce-edit-area iframe html {
padding: 0 10px;
min-height: 350px;
}
.mce-content-body {
color: #555;
font-size: 14px;
}
.panel.is-fullscreen .mce-statusbar {
position: absolute;
bottom: 0;
width: 100%;
z-index: 200000;
}
.panel.is-fullscreen .mce-tinymce {
height:100%;
}
.panel.is-fullscreen .mce-edit-area,
.panel.is-fullscreen .mce-edit-area iframe,
.panel.is-fullscreen .mce-edit-area iframe html {
height: 100%;
position: absolute;
width: 99%;
overflow-y: scroll;
overflow-x: hidden;
min-height: 100%;
}
</style>
@stop
...
<div class="panel-body">
@include('voyager::multilingual.input-hidden', [
'_field_name' => 'body',
'_field_trans' => get_field_translations($dataTypeContent, 'body')
])
@php
$dataTypeRows = $dataType->{($edit ? 'editRows' : 'addRows' )};
$row = $dataTypeRows->where('field', 'body')->first();
@endphp
{!! app('voyager')->formField($row, $dataType, $dataTypeContent) !!}
</div>
...
admin.css
.voyager .navbar.navbar-default .navbar-header .navbar-brand, .voyager .navbar .navbar-header .navbar-brand{
background: #046afe;
}
.panel.is-fullscreen .panel-body {
height: 90%;
}
.panel.is-fullscreen .mce-statusbar {
visibility: hidden;
}
Also, I ran php artisan optimize:clear
Hey there,
After adding that custom CSS to the admin.css file, I would suggest clearing the cache of your browser or doing a hard refresh, so that you could load the new CSS changes.
Let me know how it goes!
Yes! Testing with Incognito confirmed your suggestion. Thank you
1
That is perfect! Happy to hear that it is all working now!
