Disable Bootstrap for One Element

Disable bootstrap for one element

Just override the Bootstrap style. As long as Bootstrap is included on your page before your custom CSS then your CSS should override Bootstrap as the specificity of the selector would be the same. Add this to your custom CSS and override the styles accordingly:

input.login_button {
    box-shadow: none;
    border: none;
    line-height: initial;
    /* Etc. */
}

Here input.login_button has a specificity score of 011 whereas Bootstrap's input[type="text"] only has a specificity score of 010, meaning your custom style will be strong enough to override Bootstrap's regardless of the order of your CSS.

Disable (exclude) bootstrap for one div on a page

I think you should use this class for reseting all the CSS under email_container. In the CSS it says .reset-this * so for the elements under .reset_this will get reseted, then you can add what you want.

This was not created by me, it was taken from the link resetting CSS

JSFiddle Demo

HTML

<div class="email_container reset-this">
<!-- bootstrap CSS shouldn't apply here
<div class="email">
<!-- neither here-->
</div>
</div>

CSS:

.reset-this * {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

/* basic modern patch */

#reset-this-root {
    all: initial;
    * {
        all: unset;
    }
}

Removing bootstrap styling from certain elements

You have to edit some of your existing css to overwrite bootstrap css

.pkmn-pc {

  color: white;

  margin: 10px;

  display: inline-block;

}

.pkmn-summary, .pkmn-info {

  display: table-cell;

  vertical-align: middle;

  height: 60px;

}

.pkmn-summary {

  width: 193px;

  background: #745fb5;

  background: linear-gradient(15deg, #745fb5, #9a6dbb);

  border-radius: 5px 0 0 5px;

  box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55);

  white-space: nowrap;

  border-bottom: solid 5px grey;

  text-align: left;

  padding-left: 5px;

}

.pkmn-summary:after {

    content: '';

    position: relative;

    left: -197px;

    bottom: -35px;

    height: 5px;

    background: green;

    /**width: 73%;**/

    display: inline-block;

    border-radius: 0 0 0 5px;

}

.pkmn-summary:after {

  width: 73%;

}

.pkmn-info {

  background: #333538;

  border-radius: 0 5px 5px 0;

  width: 70px;

  text-align: center;

}

.pkmn-outer {

  padding-bottom: 2px;

}

.pkmn-inner {

  display: inline-block;

  width: 3px;

}

.pkmn-sprite {

  vertical-align: middle;

}

.pkmn-name {

  font-size: 1em;

  background-color: transparent !important;

  color: white;

}

.pkmn-lvl {

  font-size: 0.6em;

  display: block;

  background-color: transparent;

  color: white;

}

.crown {

  padding-top: 5px;

}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="pkmn-pc">

  <div class="pkmn-summary">

      <img class="pkmn-sprite" src="https://cdn.bulbagarden.net/upload/e/ea/113MS.png" />

  <code class="pkmn-name">15Characterssss</code>

  </div>

  <div class="pkmn-info">

  <img class="crown" src="https://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" />

    <div class="pkmn-outer">

      <img class="heart" src="https://image.ibb.co/kB8vi6/heart.png">

      <div class="pkmn-inner"></div>

      <img class="star" src="https://image.ibb.co/e7w4bR/Shiny_VIStar.png">

    </div>

    <code class="pkmn-lvl">lvl 100</code>

  </div>

</div>

Disable bootstrap switch html element without toggling status

You can try this code. I specified the element ID so that the function will not be mislead.

Let me know if problem still occur. I'd be glad to help you.

$('#statusToggler').bootstrapSwitch('disabled', true);

You can refer to this code snippet

$(function() {

  $("input.conf-switch-state").bootstrapSwitch({

    onSwitchChange: function(event, state) {

      alert('This is a sample notification');

      $(this).bootstrapSwitch('disabled', true);

      return false;

    }

  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://unpkg.com/bootstrap-switch@3.3.4/dist/js/bootstrap-switch.js"></script>

<link href="https://unpkg.com/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet" />

<div>

  <input type="checkbox" id="statusToggler" class="form-control switch conf-switch-state" data-label-text="Status" checked="true" data-inverse="true" data-size="small" data-off-color="warning" data-on-text="Active" data-off-text="Disabled">

Disable bootstrap switch after onswitchchange

UPDATE: When using the Bootstrap Switch, you can use one of 2 functions:

$(this).bootstrapSwitch("toggleDisabled"); // toggles whether `this` is disabled

$(this).bootstrapSwitch("disabled",true); // just disables the `this` element

So in your onSwitchChange handler, you can use the bootstrapSwitch("disabled", true) method:

onSwitchChange:function(event, state) {
  $(this).bootstrapSwitch('disabled', true);
}

There's no real point in "toggling", as it's in a handler for when it changes - when it's disabled, it shouldn't change again.

Previous answer - for those wanting to use jQuery to disable elements

If you want to set a form element to disabled, you need to declare its disabled attribute.

There is controversy whether this should be set to true, just declared, or set to disabled.

Personally (and the most favourable/compatible) is to set disabled=disabled.

To set element attributes using jQuery, you can use the attr() function (first argument is attribute, second argument is value):

onSwitchChange:function(event, state) {
  $(this).attr('disabled', 'disabled'); // set the element's disabled attribute
}

NOTE: Since you are disabling the checkbox - this means the value of it won't get posted with a form.

If you need the value to be POSTed with a form, use the readonly attribute and set it to readonly:

onSwitchChange:function(event, state) {
  $(this).attr('readonly', 'readonly'); //checkbox is readonly, but still POSTed 
}

Here's a great answer explaining the differences between disabled and readonly: https://stackoverflow.com/a/7357314/6240567

EDIT: The above code only disables/readonly the checkbox itself. In order to disable the container, or other elements within that you will need to use the .closest() selector.

Top tip on selectors, and which ones you need:

  • div matches on element type - in this case it selects div elements.
  • .some-class matches on class - in this case any element that has "some-class" as the class
  • #someId matches on element's id - in this case it selects the element with the id of "someId"

With that said, you can then select the closest element that you're looking to disable (or the container for it)

For example:

  // set the checkbox's closest element with "bootstrapSwitch" class, to disabled
  $(this).closest('.bootstrapSwitch').attr('disabled', 'disabled');

Hope this helps! :)


Related Topics

Css3Pie in MVC, Where to Place the Pie.Htc File

Bootstrap: Center Some Navbar Items

Apply Only to Ie 11 Within Media Query for Screen Size

Wrapping a Text Around a Circular Element

How to Override Gwt Obfuscated Style for Datagrid Header

Different Behavior of Flexbox with (Overflow-Y) Scroll on Safari, Firefox and Edge VS Chrome

Why Does a ::Before Pseudoelement with Content Have Only Leading Spaces Stripped in a 'Display: Flex' Container

Fluid Container in Bootstrap 3

How to Set a CSS Border on One Side Only

How to Create a "Tooltip Tail" Using Pure Css

Google Chrome, Flash and Z-Index Wrong Behaviour

Controlling CSS Cube Rotation(Transform) and Extracting Values from 3D Matrix

Compile Less Files with Source Maps

Css: Height- Fill Out Rest of Div

Z-Index Between Children and Parents

Cross-Browser Support of 'Page-Break-Inside: Avoid;'

Achieving This Hr Element with CSS Styling - Pseudo Elements

CSS Box Shadow - Top and Bottom Only


Leave a reply



Submit