Alert taking up space when hidden

[Marc]

OS info

• Operating System : Windows 10.0.19042
• Wappler Version : 4.0.1

Problem description

I have a Nodejs Bootstrap 5 project, and when hiding alert in my form the form space is still occupied

Steps to reproduce

I have an “Add user” button with dynamic click event

Clicking the “Add User” button shows “Add User” modal with a form and alert, with alert set to fade

As part of testing the alert I create an error condition to make alert appear at bottom of form, which works.

Next I close the modal
Next I click “Add User” button again
“Add User” modal displays again, and alert is hidden, but its space on the form is still occupied.
I note style display none is missing?

When I repeat the test with my alert fade disabled, everything works fine

[Teodor]

How are you hiding the alert? Please paste the alert code with the condition here.

[Marc]

My 1st screenshots shows how I am hiding it, maybe not clear with naming
It is part of the Add User button click event
Pasted code below
Add User

[Teodor]

Your first screenshot shows the alert code rendered in the browser. I want to see how are you hiding in Wappler?

[Teodor]

Maybe just check:

How to format code in your posts

Code Formatting When pasting code in your posts, please use the following formatting options, in order to be sure your code is readable and well formatted for the rest of the users. Inline code formatting Surround a section of code with backticks (`) inline code formatting. Typing: `var x = 10;` Results in: var x = 10; This can also be done as var x = 10; inline. Multi-Line Blocks of Code Surrounding code with three backticks ``` will allow for code to span multiple lines Typing: ``` f…

[Marc]

Tried pasting code again, looks like worked this time.

<button id="btn_user_add" class="btn btn-primary mt-3 mb-3" dmx-on:click="mod_user_add.frm_user_add.reset();mod_user_add.frm_user_add.alert_user_add.hide();mod_user_add.show()">Add User</button>

Forgot to mention that I have already removed the fade property, so you’ll need to add that

[Teodor]

I just tested the dynamic event for show/hide alert and it works as expected, the alert is hidden and the display: none is applied to it:

Screen Recording 2021-08-20 at 10.04.29

I am using the same alert.show() and alert.hide() methods as in your example.

[Marc]

My Add User button is on the main form, and the alert is the last element in my form, which is in a modal.

If you can’t get it to fault with that setup then I will have another go tomorrow as some of other elements might be interacting with it. I definitely got an issue as my screen shots show, just have to find the combination.

[Marc]

<div class="container">
    <div class="row">
        <div class="col">
            <button id="btnShowModal" class="btn btn-primary" dmx-on:click="modal1.alert1.hide();modal1.show()">Show Modal</button>
            <div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Modal title</h5>
                            <button id="btnShowAlert" class="btn btn-primary" dmx-on:click="modal1.alert1.show()">Show Alert</button><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>Modal body text goes here.</p>
                            <div class="alert fade" id="alert1" is="dmx-bs5-alert" role="alert">
                                <p>This is a nice alert!</p>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@Teodor can you try this code, as shown with fade I have the issue, when I remove the alert fade it is ok.

[Teodor]

Ok, one thing that is not clear to me is - when does the alert need to be hidden exactly? On modal close or on some other event?

[Marc]

Thanks for your assistance Theodor, in this instance the alert doesn’t need to be hidden as part of the modal opening, it is just another way of doing it, and being a relatively new Wappler user who can only spend a few hours a week with Wappler this was the 1st way I found to do it.
I am sure you would agree that there is an issue, as with “alert fade disabled” it works fine, hence why I logged it as a bug.

Since then further investigation revealed the modal hide event, which in fairness is a better way to trigger what I need and also works with fade without any issues.

So to me yes this is a bug, albeit a very low priority, am just trying to do my bit to improve Wappler as we move forward. Once again thank you for your time Teodor.