3 Replies - 1138 Views - Last Post: 17 May 2013 - 11:37 AM

#1 istore221  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 136
  • Joined: 11-December 11

Tabbed content with CSS ( Auto height problam)

Posted 16 May 2013 - 12:13 AM

I'hv create a tabbed contener for my web site so i can use ajax request to get the data from the server and display it on each tab however my tabs container height is sated to auto so it can dynamicaly increase the height according to data coming from the server . but it wont work .. how do i slove this. this is my html and css

CSS

 .tabs {
          position: relative; 
          width: 1000px;
         
          min-height: 200px; /* This part sucks */
         height: auto !important;
	height: 100%;
          clear: both;
          margin: 25px 0;
        }
        .tab {
          float: left;
          
          
        }
        .tab label {
          background: #eee; 
          padding: 10px; 
          border: 1px solid #ccc; 
          margin-left: -1px; 
          position: relative;
          left: 1px; 
        }
        .tab [type=radio] {
          display: none;   
        }
        .content {
          position: absolute;
          top: 28px;
          left: 0;
           
          background: white;
          right: 0;
          bottom: 0;
          padding: 20px;
          border: 1px solid #ccc; 
        }

        [type=radio]:checked ~ label {
          background: white;
          border-bottom: 1px solid white;
          z-index: 2;
        }

        [type=radio]:checked ~ label ~ .content {
          z-index: 1;
        }
            






html

   <div class="tabs">
    
                           <div class="tab">
                               <input type="radio" id="tab-1" name="tab-group-1" checked>
                               <label for="tab-1">Tab One</label>

                               <div class="content">
                                   <img src="images/logo.png"/>
                                   <img src="images/logo.png"/>
                                   <img src="images/logo.png"/>
                                   <img src="images/logo.png"/>
                                  
                               </div> 
                           </div>

                           <div class="tab">
                               <input type="radio" id="tab-2" name="tab-group-1">
                               <label for="tab-2">Tab Two</label>

                               <div class="content">
                                   stuff
                               </div> 
                           </div>

                            <div class="tab">
                               <input type="radio" id="tab-3" name="tab-group-1">
                               <label for="tab-3">Tab Three</label>

                               <div class="content">
                                   stuff
                               </div> 
                           </div>
                            
                     </div>


Is This A Good Question/Topic? 0
  • +

Replies To: Tabbed content with CSS ( Auto height problam)

#2 mb2000inc  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 21
  • View blog
  • Posts: 353
  • Joined: 10-November 09

Re: Tabbed content with CSS ( Auto height problam)

Posted 17 May 2013 - 06:36 AM

Just my quick thoughts on this:
You have three lines of css that are dictating the height.

min-height: 200px;
height: auto !important;
height: 100%;



I would suggest, if you know what the "max-height" would be, you could use that instead of the "auto" or "100%" lines.
OR, get rid of the "auto" line and see what that does....? (maybe?)
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3360
  • View blog
  • Posts: 11,397
  • Joined: 12-December 12

Re: Tabbed content with CSS ( Auto height problam)

Posted 17 May 2013 - 10:08 AM

There was a similar question discussed here at SO. It may be possible with a css-only solution but, personally, I suspect it requires the little bit of JS/jQuery to re-specify the height once the ajax has loaded.
Was This Post Helpful? 1
  • +
  • -

#4 mb2000inc  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 21
  • View blog
  • Posts: 353
  • Joined: 10-November 09

Re: Tabbed content with CSS ( Auto height problam)

Posted 17 May 2013 - 11:37 AM

I think andrewsw hit the nail on the head.
JQuery is more than likely the way to go on this one.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1