CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Vadim Kirilchuk
Vadim Kirilchuk

Reputation: 3542

How to combine bootstrap 3 form-control input with hidden true

I am using bootstrap 3 and have a little issue. It is better explained with the code:

<input class="form-control" type="text" name="name" id="id" hidden="true"/>

I expect this input to be hidden, but looks like form-control css display property overrides hidden one.

@media (min-width: 768px)
.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}
[hidden], template {
    display: none;
}

I do see in chrome dev-tools that hidden's display has strikethrough.

I know that bootstrap has "hidden" class and it works, but I would expect that hidden attribute would work too. Isn't it a bug?

Thanks

Upvotes: 1

Views: 8541

Answers (2)

ctf0
ctf0

Reputation: 7587

As an answer to what you want, you can use either display: none; or visibility: hidden;

Check http://www.w3schools.com/Css/css_display_visibility.asp or use opacity: 0; and you can unhide with either CSS or JavaScript.

Upvotes: 1

Hareesh
Hareesh

Reputation: 6900

You can add this in your custom css

[hidden], template {
display: none!important;
}

Upvotes: 3

Related Questions