User tests: Successful: Unsuccessful:
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?
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.
<?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.
We cannot specify Bootstrap CSS classes for optional sizes and fullscreen mode to modal window layout.
Now we can do it and backward compatibility is not broken.
Category | ⇒ | Layout |
Status | New | ⇒ | Pending |
Labels |
Added:
PR-4.3-dev
|
Labels |
Added:
Feature
|
@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.
I have tested this item ✅ successfully on 7c44cec
I have tested this item
Status | Pending | ⇒ | Ready to Commit |
RTC
i've removed the RTC staus cause the 2nd test has been made by the pr author
i've removed the RTC staus cause the 2nd test has been made by the pr author
Can you test it too?
test successful.
Title |
|
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
Status | Ready to Commit | ⇒ | Pending |
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.
Build | 4.3-dev | ⇒ | 5.0-dev |
I have tested this item
I have tested this item
@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.
Status | Pending | ⇒ | Ready to Commit |
RTC
Labels |
Added:
?
Documentation Required
PR-5.0-dev
Removed: PR-4.3-dev |
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 |
thanks
@Quy @HLeithner Build is failing, but I only update the branch. What could have happened?