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