RE: Additional Overflow values

Oh, sorry. Replace "#timeline" by "#container". Now you know... The first column group is a timeline, and the second, is data fields.

-----Original Message-----
From: Claude Petit [mailto:petc@webmail.us] 
Sent: Friday, July 25, 2014 9:36 PM
To: 'Tab Atkins Jr.'; Styles Discussion (www-style@w3.org)
Subject: RE: Additional Overflow values

Because it's what it should be, no ? I don't understand why you want an example,  but I have this problem...

I have a table with two column groups. Both must be scrollable horizontally. The table must be scrollable vertically. I'll try to reproduce, but the code is more complex. It looks like :

=================================
  HTML
=================================
<div id="container">
 <div class="table">
  <div class="columngroup1">
   <div class="row">
    <div class="column">
     ...
    </div>
    <div class="column">
     ...
    </div>
    ...
   </div>
   <div class="row">
    <div class="column">
     ...
    </div>
    <div class="column">
     ...
    </div>
    ...
   </div>
   ...
  </div>
  <div class="columngroup2">
   <div class="row">
    <div class="column">
     ...
    </div>
    <div class="column">
     ...
    </div>
    ...
   </div>
   <div class="row">
    <div class="column">
     ...
    </div>
    <div class="column">
     ...
    </div>
    ...
   </div>
   ...
  </div>
 </div>
</div>





=================================
  CSS
=================================
#container {
  width: 500px; 
 height: 500px;  /* <PRB> Doesn't seem to apply, but helps to apply "height: 10000px;" !!! */
 overflow-x: hidden;
 overflow-y: scroll;
};

#container .table {
 height: 10000px;  /* <PRB> "overflow-y=visible" can't be combined with "overflow-x=scroll". so the container's height must be large enough to contain every rows. */ }

#container .table .row {
 line-height: 24px;
 height: 24px;
 min-height: 24px;
 max-height: 24px;
 display: block;
 width: 100%;
}

#container .table .column {
 display: inline-block;
 height: 100%;
}

#timeline .table .columngroup1 {
 display: inline-block;
 width: 50%;
 overflow-x: scroll;
 overflow-y: hidden; /* <PRB> "overflow-y=visible" can't be combined with "overflow-x=scroll". so the container's height must be large enough to contain every rows. */ }

#timeline .table .columngroup2 {
 display: inline-block;
 width: 50%;
 overflow-x: scroll;
 overflow-y: hidden; /* <PRB> "overflow-y=visible" can't be combined with "overflow-x=scroll". so the container's height must be large enough to contain every rows. */ }


-----Original Message-----
From: Tab Atkins Jr. [mailto:jackalmage@gmail.com]
Sent: Friday, July 25, 2014 2:05 PM
To: Claude Petit
Cc: Styles Discussion
Subject: Re: Additional Overflow values

On Thu, Jul 24, 2014 at 7:58 PM, Claude Petit <petc@webmail.us> wrote:
> Look at the following site : 
> http://www.brunildo.org/test/Overflowxy2.html
>
> I’d like to get every combinations possible, while keeping compatibility.
> So, I suggest the following values for “overflow-x” and “overflow-y” :
> “force-visible”, “force-hidden. “force-scroll”, ... I think I don’t 
> need to explain.

Unfortunately, you do need to explain. ^_^

Why do you want all possible combinations?  Can you give an example of a page where you want one of the combinations that currently doesn't work?

~TJ

Received on Saturday, 26 July 2014 01:39:51 UTC