CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
chrisvdb
chrisvdb

Reputation: 2190

Hiding button in bootstrap

I'm trying to hide one or more radio buttons in bootstrap. See jsfiddle.

setTimeout(function () {
    $("input[value='other']").parent().hide();
}, 1000);

It works as expected except that removing either of the side buttons leaves the new side button incorrectly styled (no rounded corners). In the example removing 'female' works fine, but removing 'male' or 'other' results in an incorrectly styled button row.

What would be the easiest way to fix this? Note that I might have to unhide the buttons under circumstances so just removing it from the DOM is not desirable.

Upvotes: 0

Views: 650

Answers (3)

KALPAK CHAKRABORTY
KALPAK CHAKRABORTY

Reputation: 11

Just use the class "d-none" to make the button as diplay none

Upvotes: 0

sjm
sjm

Reputation: 5468

The CSS applies the style to the last element in the 'btn-group' the hide() method just adds 'display:none' to the element and the CSS still interprets it as the last element because it is still part of the DOM.

So you will need to remove it completely from the DOM

otherEl = $("input[value='other']").parent();
$("input[value='other']").parent().remove();

Add it later like so:

$("#gender").append(otherEl);

https://jsfiddle.net/sjmcpherso/j1am57r7/

I can't see any benefits for a Non-DOM removal approach to the one above but let me know if you do

Upvotes: 3

Ajay Narain Mathur
Ajay Narain Mathur

Reputation: 5466

Bootstrap applies style to the last element.

Solution I (If you don't want to remove the button and just hide it):

Create a class in css to give rounded corners and add the class to prev() element. and When you show() the element just remove this class. Fiddle

JS:

setTimeout(function () {
    $("input[value='other']").parent().prev().addClass('pseudoLast')
    $("input[value='other']").parent().hide();

}, 1000);

CSS:

.pseudoLast{
    border-bottom-right-radius: 4px !important;
    border-top-right-radius: 4px !important;
}

when you show the button just do:

$("input[value='other']").parent().prev().removeClass('pseudoLast')
$("input[value='other']").parent().show();

Solution II :

You need to remove the element fiddle

js:

setTimeout(function () {
    $("input[value='other']").parent().remove(); // < here
}, 1000);

Later you can append the element.

Upvotes: 5

Related Questions