简体   繁体   中英

extjs grid hide and show changes width

I have a extjs grid simple stuff within a div. I hide and show that container by clicking a button. after hiding the container, if I resize the window, and then again show the container, the grid gets a width of 100px. I would expect it to make use of width:100%

.container{
   border:1px solid gold;
 }
.row{
   padding:20px;
}
.col4{
  width:30%;
  float:left;
  padding:20px;
  font-size:20px;
  background-color:red;
  color:#fff;
  }

 </style>
 <script>
  $(document).ready(function(){
    $(".btn").click(function(){
       $(".container .thrd-row").css("display","none");
});
 $(window).resize(function(){
     $(".container .thrd-row").removeAttr("style");
 });
});


</script>
  //use html
  <div class="container">
    <div class="row firs-row">
        <div class="col4">1</div>
        <div class="col4">1</div>
        <div class="col4">1</div>
    </div>
    <div class="row second-row">
        <div class="col4">1</div>
        <div class="col4">1</div>
        <div class="col4">1</div>
    </div>
    <div class="row thrd-row">
        <div class="col4">1</div>
        <div class="col4">1</div>
        <div class="col4">1</div>
    </div>
    <button class="btn">click hide</button>
</div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM