Feature ? Documentation Required PR-5.0-dev Pending

User tests: Successful: Unsuccessful:

avatar sergeytolkachyov
sergeytolkachyov
23 May 2023

The Bootstrap 5 Modal documentation has sections Optional sizes and Fullscreen modal. These sections describe CSS classes that are added to <div class="modal-dialog">. Using these classes, you can change the size of the modal window, taking into account responsive breakpoints.
So, using the .modal-sm, .modal-lg or .modal-xl class, you can set the size of the modal window. Using the .modal-fullscreen classset, you can set the full-screen size of the modal window.

In Joomla 4, the default layout of a modal window has the .modal-lg class, and the window dimensions are described by the optional parameters bodyHeight and modalWidth, each of which is a number. Units of measurement - viewport units. For example, if 'modalWidth' => 70 is specified in the array of parameters when calling LayoutHelper, then the CSS class jviewport-width70 will be added to the <div class="modal-dialog modal-lg">.
The set of jviewport-width* classes is defined in the CSS files of the Atum and Cassiopeia template.

Situation: the frontend template uses Bootstrap 5, the module wants to use a ready-made modal layout and you need to specify the .modal-fullscreen class for it. However, this is not possible with the current layout implementation. Therefore, you either need to copy a set of jviewport-width* classes into your template, or copy the HTML code of the modal window into the module and specify all the necessary CSS classes in it. But why do this if there is a ready-made modal window layout in the Joomla 4 core?

Summary of Changes

Change file layouts/libraries/html/bootstrap/modal/main.php.
An optional modalCss (string) parameter has been added to the params array. In this parameter, you can specify the necessary CSS classes. If the parameter is omitted, then by default <div class="modal-dialog"> has the .modal-lg class, just as it was before. If the modalWidth and modalCss parameters are specified at the same time, then the modalCss parameter has a higher priority. <div class="modal-dialog"> will be rendered with the modalCss parameter. modalWidth will be ignored. Thus, nothing will change for the Joomla core, since this parameter is not used, backward compatibility is not broken.

Testing Instructions

  1. Try to render a modal window by default Joomla core way and see then nothing is changed:
<?php 
    $ModalData = [
        'selector' => 'AnySelectorModal',
        'params'   => [
            'title'      => 'Modal header text',
            'footer'     => 'Modal footer text',
            'height'     => '400px', // height of the <iframe> containing the remote resource
            'width'      => '800px', // width of the <iframe> containing the remote resource
            'bodyHeight' => 70, // Optional height of the modal body in viewport units (vh)
            'modalWidth' => 80, // Optional width of the modal in viewport units (vh)
        ],
        'body' => 'Modal body content'
    ];
   
    echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $ModalData); 
    ?>

We got output HTML with <div class="modal-body jviewport-height70">.
2. Then try to use modalCss instead modalWidth or modalCss only:

<?php 
    $ModalData = [
        'selector' => 'AnySelectorModal',
        'params'   => [
            'title'      => 'Modal header text',
            'footer'     => 'Modal footer text',
            'height'     => '400px', // height of the <iframe> containing the remote resource
            'width'      => '800px', // width of the <iframe> containing the remote resource
            'bodyHeight' => 70, // Optional height of the modal body in viewport units (vh)
            'modalCss' => 'modal-fullscreen',
        ],
        'body' => 'Modal body content'
    ];
   
    echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $ModalData); 
    ?>

And find <div class="modal-dialog modal-fullscreen"> has rendered.
3. Try to use both parameters together.

<?php 
    $ModalData = [
        'selector' => 'AnySelectorModal',
        'params'   => [
            'title'      => 'Modal header text',
            'footer'     => 'Modal footer text',
            'height'     => '400px', // height of the <iframe> containing the remote resource
            'width'      => '800px', // width of the <iframe> containing the remote resource
            'bodyHeight' => 70, // Optional height of the modal body in viewport units (vh)
            'modalWidth' => 80, // Optional width of the modal in viewport units (vh)
            'modalCss' => 'modal-fullscreen',
        ],
        'body' => 'Modal body content'
    ];
   
    echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $ModalData); 
    ?>

We got a <div class="modal-dialog modal-fullscreen"> . modalWidth parameter was ignored.

Actual result BEFORE applying this Pull Request

We cannot specify Bootstrap CSS classes for optional sizes and fullscreen mode to modal window layout.

Expected result AFTER applying this Pull Request

Now we can do it and backward compatibility is not broken.

avatar joomla-cms-bot joomla-cms-bot - change - 23 May 2023
Category Layout
avatar sergeytolkachyov sergeytolkachyov - open - 23 May 2023
avatar sergeytolkachyov sergeytolkachyov - change - 23 May 2023
Status New Pending
avatar sergeytolkachyov sergeytolkachyov - change - 23 May 2023
The description was changed
avatar sergeytolkachyov sergeytolkachyov - edited - 23 May 2023
avatar sergeytolkachyov sergeytolkachyov - change - 23 May 2023
The description was changed
avatar sergeytolkachyov sergeytolkachyov - edited - 23 May 2023
avatar sergeytolkachyov sergeytolkachyov - change - 23 May 2023
Labels Added: PR-4.3-dev
avatar sergeytolkachyov sergeytolkachyov - change - 4 Jun 2023
Labels Added: Feature
avatar sergeytolkachyov
sergeytolkachyov - comment - 20 Jun 2023

@Quy @HLeithner Build is failing, but I only update the branch. What could have happened?

avatar Quy
Quy - comment - 20 Jun 2023

@sergeytolkachyov It is not necessary to keep updating the branch unless there are conflicts as it resets test results resulting in maintainers having to manually set them back.

avatar Quy Quy - test_item - 30 Jun 2023 - Tested successfully
avatar Quy
Quy - comment - 30 Jun 2023

I have tested this item ✅ successfully on 7c44cec


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40650.

avatar sergeytolkachyov sergeytolkachyov - test_item - 2 Jul 2023 - Tested successfully
avatar sergeytolkachyov
sergeytolkachyov - comment - 2 Jul 2023

I have tested this item successfully on 7c44cec


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40650.

avatar richard67 richard67 - change - 2 Jul 2023
Status Pending Ready to Commit
avatar richard67
richard67 - comment - 2 Jul 2023

RTC


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40650.

avatar alikon
alikon - comment - 3 Jul 2023

i've removed the RTC staus cause the 2nd test has been made by the pr author

avatar sergeytolkachyov
sergeytolkachyov - comment - 3 Jul 2023

i've removed the RTC staus cause the 2nd test has been made by the pr author
Can you test it too?

avatar progreccor
progreccor - comment - 4 Jul 2023

test successful.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40650.

avatar obuisard obuisard - change - 14 Jul 2023
Title
Update bootstrap modal layout - add modalCss optional parameter
[5.0] Update bootstrap modal layout - add modalCss optional parameter
avatar obuisard obuisard - edited - 14 Jul 2023
avatar obuisard
obuisard - comment - 14 Jul 2023

Rebased to 5.0 as it will change the default behavior for modals. Good PR, but it cannot be included in 4.3. Thanks @sergeytolkachyov

avatar richard67 richard67 - change - 16 Jul 2023
Status Ready to Commit Pending
avatar richard67
richard67 - comment - 16 Jul 2023

Back to pending due to rebase, @Quy @progreccor Could you test again with 5.0-dev, e.g. a recent nightly build? Thanks in advance.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40650.

avatar richard67 richard67 - alter_testresult - 16 Jul 2023 - Quy: Not tested
avatar richard67 richard67 - alter_testresult - 16 Jul 2023 - sergeytolkachyov: Not tested
avatar richard67 richard67 - change - 16 Jul 2023
Build 4.3-dev 5.0-dev
avatar Quy Quy - test_item - 20 Jul 2023 - Tested successfully
avatar Quy
Quy - comment - 20 Jul 2023

I have tested this item successfully on 7c44cec


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40650.

avatar progreccor
progreccor - comment - 21 Jul 2023

I have tested this item successfully


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40650.

avatar richard67 richard67 - alter_testresult - 21 Jul 2023 - progreccor: Tested successfully
avatar richard67
richard67 - comment - 21 Jul 2023

@progreccor A comment with a green check mark is not sufficient. It needs to use the blue "Test this" button at the top left corner of the in the issue tracker so that the test is properly counted by our tools. This just for information for the next time, this time I will set your test result manually. Thanks for testing.

avatar richard67 richard67 - change - 21 Jul 2023
Status Pending Ready to Commit
avatar richard67
richard67 - comment - 21 Jul 2023

RTC


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40650.

avatar Quy Quy - change - 21 Jul 2023
Labels Added: ? Documentation Required PR-5.0-dev
Removed: PR-4.3-dev
avatar HLeithner HLeithner - change - 26 Jul 2023
Status Ready to Commit Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 2023-07-26 17:57:10
Closed_By HLeithner
avatar HLeithner HLeithner - close - 26 Jul 2023
avatar HLeithner HLeithner - merge - 26 Jul 2023
avatar HLeithner
HLeithner - comment - 26 Jul 2023

thanks

Add a Comment

Login with GitHub to post a comment