search

palcarazm / bootstrap5-toggle

Bootstrap 5 Toggle is a bootstrap plugin/widget that converts checkboxes into toggles.
https://palcarazm.github.io/bootstrap5-toggle/
MIT License
41 stars 4 forks source link

[HELP] Incorrect Height #192

Closed SoftCircuits closed 2 months ago

SoftCircuits commented 2 months ago

I have the following markup.

<div class="row">
    <div class="col-md-12">
        <div class="mb-3">
            <label asp-for="AddTransfer.IsStorage"></label>
            <input asp-for="AddTransfer.IsStorage" type="checkbox" class="form-control" data-toggle="toggle"
                    data-offlabel="Railcar" data-onlabel="Storage"
                    data-offstyle="success" data-onstyle="danger"
                    data-width="100%" />
        </div>
    </div>
</div>

Here's the generated HTML.

<div class="row">
    <div class="col-md-12">
        <div class="mb-3">
            <label id="AddTransfer_IsStorageLabel" for="AddTransfer_IsStorage">Source Type</label>
            <div class="toggle btn btn-success off" data-toggle="toggle" role="button" tabindex="0"
                style="width: 100%; min-height: 0px;">
                <input type="checkbox" class="form-control" data-toggle="toggle"
                    data-offlabel="Railcar" data-onlabel="Storage"
                    data-offstyle="success" data-onstyle="danger"
                    data-width="100%" data-val="true"
                    data-val-required="The IsStorage field is required." id="AddTransfer_IsStorage"
                    name="AddTransfer.IsStorage" value="true">
                <div class="toggle-group">
                    <span class="btn btn-danger toggle-on">Storage</span>
                    <span class="btn btn-success toggle-off">Railcar</span> 
                    <span class="toggle-handle btn"></span>
                </div>
            </div>
        </div>
    </div>
</div>

It functions correctly, but the control height is not tall enough.

image

I have a similar button elsewhere in my project. I copied that code. So it should work. It seemed like I may have had the same issue with the other code but can't remember how I resolved it.

If you look at the div created by the control, you can see style="width: 100%; min-height: 0px;" On the other version that works, it has min-height set to 38px. But I don't understand why.

Why doesn't it set the correct height? And what do I need to do about it?

Note: I was using bootstrap5-toggle v5.0.6, but upgraded to v5.1.1 and there was no difference.

SoftCircuits commented 2 months ago

@palcarazm Is there anyone that could look at this issue? It seems like I'm just doing basic functionality here. I would have thought this would be rock solid.

palcarazm commented 2 months ago

Hi you can use rerender method from JavaScript to set correct height to toggle.

In fact this occurs when toggle is render in a not visible section.

SoftCircuits commented 2 months ago

@palcarazm

Hi you can use rerender method from JavaScript to set correct height to toggle.

In fact this occurs when toggle is render in a not visible section.

Thanks. In fact, this is on a modal popup. So it is not visible when the page is displayed.

I am not familiar with rerender, and I seem to be having trouble finding it. Do you happen to have a link?

palcarazm commented 2 months ago

@palcarazm

Hi you can use rerender method from JavaScript to set correct height to toggle.

In fact this occurs when toggle is render in a not visible section.

Thanks. In fact, this is on a modal popup. So it is not visible when the page is displayed.

I am not familiar with rerender, and I seem to be having trouble finding it. Do you happen to have a link?

Is a bootstrap-toggle method https://github.com/palcarazm/bootstrap5-toggle#methods

SoftCircuits commented 2 months ago

@palcarazm Yes, I got that working. Thanks.