W3C home > Mailing lists > Public > www-style@w3.org > July 2014

RE: Additional Overflow values

From: Claude Petit <petc@webmail.us>
Date: Fri, 25 Jul 2014 21:39:22 -0400
To: "'Tab Atkins Jr.'" <jackalmage@gmail.com>, "Styles Discussion" <www-style@w3.org>
Message-ID: <01c601cfa872$6cffb830$46ff2890$@webmail.us>
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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:23 UTC