mahesh
mahesh

Reputation: 351

jquery mobile button is not hiding in style

hi we are working on jquery mobile how to hide button with css not with code we are using display:none in style but its not working for jquerymobile here is the code we are using

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
      <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
   </head>
   <body>
      <div data-role="page" id="pageone">
         <div data-role="header">
            <h1>Buttons</h1>
            <button data-role="button" style="display:none;">hello</button>
         </div>
         <div data-role="footer">
            <h1>Footer Text</h1>
         </div>
      </div> 
   </body>
</html>

Upvotes: 0

Views: 585

Answers (3)

rajmathan
rajmathan

Reputation: 651

First, Try editing the property like "display: none !important". If its not worked yet, then Check whether you had declared "display: block !important;" property for buttons. (or) write individual style in internal /external stylesheet like,

#pageone .ui-header > .ui-btn { display:none !important; }

If you want to move with code, change "display: none" to visibility: hidden or

$( ".target" ).hide();

This is roughly equivalent to calling .css("display", "none"), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline and is hidden then shown, it will once again be displayed inline.

Upvotes: 0

msapkal
msapkal

Reputation: 8346

The easiest way is to wrap your button in a DIV and then just hide/show it.

<div style="display:none;">
    <button data-role="button">hello</button>
</div>

Upvotes: 1

Ved
Ved

Reputation: 2701

<style>
  #pageone .ui-header > .ui-btn{display:none;}
</style>

Upvotes: 0

Related Questions