Post Content

Horacio Rodriguez Visit User Profile
Solved
cyberekklesia ・

Dec 6th, 2022 08:51 AM

When trying panel fullscreen, the height doesn't expand. I think that voyager-resize-full or related panel-action is not working.

Report
DigitalOcean Laravel News Genesis
bobbyiliev ・

Dec 6th, 2022 09:31 AM

・

Best Answer

Hey!

Oh that is an interesting finding!

Here is a very quick fix:

  • Edit the public/wave/css/admin.css file, 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!

Report
1
cyberekklesia ・

Dec 6th, 2022 10:38 AM

Thank you for the quick reply. Unfortunately, it didn't work.

Fullscreen Capture.JPG

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

Report
bobbyiliev ・

Dec 7th, 2022 12:23 AM

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!

Report
cyberekklesia ・

Dec 7th, 2022 09:59 AM

Yes! Testing with Incognito confirmed your suggestion. Thank you

Report
1
bobbyiliev ・

Dec 7th, 2022 10:45 AM

That is perfect! Happy to hear that it is all working now!

Report