Custom button placement on bottombar on smartphones

DownPW

Hi,

I have a JS code function who adds a bootstrap form-switch button depending on the resolution
What I'm worried about is the placement of the button on Smarphone in the bottombar. The button appears, but it changes location depending on the harvest. It is not fixed. Of course, I'd also like this button to disappear with the bottombar when it disappears when reading the topic.

Here the beggining of the function :

function material() {
    $(document).ready(function () {
        var $buttonContainer = null;

        // Check if the screen width is 460px or more
        if ($(window).width() >= 991) {
            // Check if the custom thread view button already exists in the right sidebar
            $buttonContainer = $('[component="sidebar/right"]');
        } if ($(window).width() <= 991) {
            // Check if the custom thread view button already exists in the bottom bar
            $buttonContainer = $('[component="bottombar"]');
        }

        if ($buttonContainer.length > 0) {
            // Create the button for custom thread view mode with custom IDs
            if ($('#materialThreadViewButton').length === 0) {
                var threadViewButton = $('<div class="material-threads-wrapper"><form class="form"><div class="form-check form-switch form-switch-sm material-threads-wrapper"> \
                    <input class="form-check-input" id="materialThreadViewButton" type="checkbox" data-field="materialThreadView"> \
                    <label class=" d-none d-md-inline fw-semibold" for="materialThreadViewButton"></label> \
                </div></form></div>');

                // Append the button to the selected container
                $buttonContainer.append(threadViewButton);
            }

........

Here the CSS I used :

@media (min-width:991px) {
#materialThreadViewButton {
    border-radius: 7px; /* Add rounded corners */
    cursor: pointer; /* Add pointer cursor */
    position: relative !important; /* Fixed positioning */
    z-index: 999; /* Ensure it's on top of other content */
    display: flex;
    left: 10px !important;
    transform: rotate(90deg) !important;
}
#enablematerialThreadViewButton.form-check-input:checked, #materialThreadViewButton.form-check-input:checked {
    background-color: var(--bs-link-color) !important;
    border-color: var(--bs-link-color) !important;
}
.form-switch.form-switch-sm .form-check-input {
  height: 1rem;
  width: calc(1rem + 0.75rem);
  border-radius: 2rem;
} 
}


@media (max-width:991px) {
#materialThreadViewButton {
    display: flex;
    left: 20px !important; 
    position: relative !important;
    bottom: 50px !important;
    position: fixed;

}
}

I'd like the result to look like this and for the button to stop moving regardless of the resolution (up to 991px) I'd also like to remove that unnecessary blank underneath

If someone or @baris has an idea, I'm all for it because I'm not a dev by trade.

DownPW

While waiting for version 3.5.0 which will add the new containers, we have solved the problem like this (with the help of @phenomlab )

        if ($(window).width() <= 991) {
            // Check if the custom thread view button already exists in the bottom bar
            //$buttonContainer = $('.bottombar-nav.p-2.text-dark.bg-light.d-flex.justify-content-between.align-items-center.w-100');
            if ($("#logged-in-menu").length > 0) {
            var buttonContainer = $('.bottombar-nav ul#logged-in-menu');
            }
            else {
                var buttonContainer = $('.bottombar-nav ul#logged-out-menu'); 
            }
                        // Prepend the button to the selected container
            buttonContainer.prepend(threadViewButton);
        }

<baris>

Seems like you are adding the toggle button as a child of the bottombar component, it might be better if you add it right before the search button so it behaves as part of that list.

Not sure about the empty area underneath that is not something we add as far as I can see.

<baris>

I've added some containers so it is easier to place buttons in the bottom bar for 3.5.0.

There are two new containers under bottombar. You can add your buttons in .bottombar-nav-left or .bottombar-nav-right.

PitaJ

You should probably add it to both places and just change whether it's displayed based on the screen size in CSS.

DownPW

While waiting for version 3.5.0 which will add the new containers, we have solved the problem like this (with the help of @phenomlab )

        if ($(window).width() <= 991) {
            // Check if the custom thread view button already exists in the bottom bar
            //$buttonContainer = $('.bottombar-nav.p-2.text-dark.bg-light.d-flex.justify-content-between.align-items-center.w-100');
            if ($("#logged-in-menu").length > 0) {
            var buttonContainer = $('.bottombar-nav ul#logged-in-menu');
            }
            else {
                var buttonContainer = $('.bottombar-nav ul#logged-out-menu'); 
            }
                        // Prepend the button to the selected container
            buttonContainer.prepend(threadViewButton);
        }