[Assorted-commits] SF.net SVN: assorted:[1876] sandbox/trunk/src/web
Brought to you by:
yangzhang
Menu
▾
▴
[Assorted-commits] SF.net SVN: assorted:[1876] sandbox/trunk/src/web
|
From: <yan...@us...> - 2014-02-22 06:19:52
|
Revision: 1876
http://sourceforge.net/p/assorted/svn/1876
Author: yangzhang
Date: 2014-02-22 06:19:49 +0000 (Sat, 22 Feb 2014)
Log Message:
-----------
Add test of CSS width+scrollbar quirk
Added Paths:
-----------
sandbox/trunk/src/web/css-stretch-width/
sandbox/trunk/src/web/css-stretch-width/index.html
Added: sandbox/trunk/src/web/css-stretch-width/index.html
===================================================================
--- sandbox/trunk/src/web/css-stretch-width/index.html (rev 0)
+++ sandbox/trunk/src/web/css-stretch-width/index.html 2014-02-22 06:19:49 UTC (rev 1876)
@@ -0,0 +1,59 @@
+<!--
+Scrollbar appearence breaks right-alignment of text.
+
+See also:
+
+https://stackoverflow.com/questions/3541863/css-100-width-but-avoid-scrollbar
+-->
+<html>
+ <head>
+ <style>
+ ::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+ background-color: @bg;
+ }
+ ::-webkit-scrollbar-button {
+ display: none;
+ }
+ ::-webkit-scrollbar-thumb {
+ background-color: rgba(255,255,255,0.2);
+ border-radius: 7px;
+ }
+ ::-webkit-scrollbar-thumb:hover {
+ background: rgba(255,255,255,0.3);
+ }
+
+ .scroller {
+ max-width: 200px;
+ overflow-x: auto;
+ }
+ .level {
+ display: inline-block;
+ overflow-y: auto;
+ /*
+ overflow: scroll;
+ */
+ height: 100px;
+ background: silver;
+ }
+ .a {
+ text-align: right;
+ }
+ </style>
+ </head>
+ <body>
+ <div class='scroller'>
+ <div class='level'>
+ <div class='a'>aoeu</div>
+ <div>WWWWWWWWWWW</div>
+ <div class='a'>aoeu</div>
+ <div class='a'>aoeu</div>
+ <div class='a'>aoeu</div>
+ <div class='a'>aoeu</div>
+ <div class='a'>aoeu</div>
+ <div class='a'>aoeu</div>
+ </div>
+ </div>
+ </body>
+</html>
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|
