Bootstrap switch height automatically changes after postback

Question

I have bootstrap switch control that opens and closes some panel in asp.net project. My code as follows:

<div class="bootstrap-switch-container" id="div_pin_bscont" style="height: 34px!important">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary"></span>
    <span class="bootstrap-switch-label">&nbsp;</span>
    <span class="bootstrap-switch-handle-off bootstrap-switch-info"></span>
    <input type="checkbox" class="make-switch" data-on-color="primary" data-off-color="info" id="chx_pin_data" data-size="mini">
 </div>

After build, my markup code looks like:

<div class="bootstrap-switch-container" id="div_pin_bscont" style="height: 34px!important">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary"></span>
    <span class="bootstrap-switch-label">&nbsp;</span>
    <span class="bootstrap-switch-handle-off bootstrap-switch-info"></span>
    <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-mini bootstrap-switch-id-chx_pin_data bootstrap-switch-off bootstrap-switch-animate" style="width: 64px;"><div class="bootstrap-switch-container" style="width: 93px; margin-left: -31px;"><span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 31px;">ON</span><span class="bootstrap-switch-label" style="width: 31px;">&nbsp;</span><span class="bootstrap-switch-handle-off bootstrap-switch-info" style="width: 31px;">OFF</span><input type="checkbox" class="make-switch" data-on-color="primary" data-off-color="info" id="chx_pin_data" data-size="mini"></div></div>
 </div>

But after postback, this control's height automatically increases.

I tried to access the control via markup or code behind, but the height controlled by the element which added up by build. Also I digged css files, but appeared nowhere.

Appreciate for your help.

Answer 1

thats sounds weird one solutions should be define a static height for that element in your css like

div.bootstrap-switch-container {
    height: 25px;
}
.bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-label  {
    padding: 3px 12px;
}
div.bootstrap-switch {
    margin-top: -4px;
}

as referenced on this post height issue in bootstrap switch, also you can inspect the element and deactivate classes in browser then when you identify which is making it, you can search for that class in your css files