RE: Additional Overflow values

Sorry... For now, I'm testing the widget alone in the body. This may be why the height of #container doesn't apply. I have to do more tests. But it's another story... To be clear, I'm disappointed about the behavior of CSS and what it should be logically. But I'll continue to read every specs.

-----Original Message-----
From: Claude Petit [mailto:petc@webmail.us] 
Sent: Friday, July 25, 2014 9:39 PM
To: 'Tab Atkins Jr.'; Styles Discussion
Subject: 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 03:24:29 UTC