I am looking to implement a toggle switch in the header of my Odoo template. I came across this Bootstrap code snippet:
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
The toggle switch works fine on laptops, but disappears when viewed on a tablet.
On Laptop : view image here
On Tablet : view image here
I haven't applied any CSS. Can anyone explain why the header vanishes on tablets?
Tested with Google Chrome on Samsung Galaxy TAB lite tablet, running Android version 4.4.4
I also tried using a different toggle switch code, but encountered the same issue.
The problem persists when tested on an iPad as well.
Here is the complete code:
<div id="top_menu_collapse" class="collapse navbar-collapse ml-lg-3">
<t t-call="website.navbar_nav">
<t t-set="_nav_class" t-valuef="flex-grow-1"/>
<!-- Menu -->
<t t-foreach="website.menu_id.child_id" t-as="submenu">
<t t-call="website.submenu">
<t t-set="item_class" t-valuef="nav-item"/>
<t t-set="link_class" t-valuef="nav-link"/></t>
</t>
<!--Toggle Swith-->
<span style="margin-top: -15px; margin-left: 10px" >
<center>
<b>Prix</b>
</center>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1"/>
<label id="custom-switch-on-off" class="custom-control-label" for="customSwitch1"></label>
</div>
</span>
<!-- Sign In -->
<t t-call="portal.placeholder_user_sign_in">
<t t-set="_item_class" t-valuef="nav-item ml-lg-auto"/>
<t t-set="_link_class" t-valuef="nav-link"/></t>
<!-- User Dropdown -->
<t t-call="portal.user_dropdown">
<t t-set="_user_name" t-value="True"/>
<t t-set="_user_name_class" t-valuef="font-weight-bold"/>
<t t-set="_item_class" t-valuef="nav-item dropdown ml-lg-auto"/>
<t t-set="_link_class" t-valuef="nav-link"/></t>
</t>
<!-- Language Selector -->
<t t-call="website.placeholder_header_language_selector">
<t t-set="_div_classes" t-valuef="my-auto ml-lg-2 align-self-lg-center"/></t>
<!-- Call To Action -->
<t t-call="website.placeholder_header_call_to_action">
<t t-set="_div_classes" t-valuef="d-none d-lg-block ml-3"/></t>
</div>