flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2026-01-05 09:51:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

removed a ribbon width limitation...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-08-31 02:49:06 +04:00
parent bea0596b9c
commit 1709fa053b
2 changed files with 55 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
ui/experiments/horisontal-stretch.html Executable file
View File

@ -0,0 +1,50 @@
<script src="../jquery.js"></script>
<style>
.field {
width: auto;
overflow: visible;
}
.ribbon {
padding: 10px;
height: 100px;
width: auto;
overflow: visible;
white-space: nowrap;
font-size: 0px;
}
.image {
display: inline-block;
height: 80px;
width: 80px;
background: silver;
}
</style>
<div class="field">
<div class="ribbon">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
</div>

9
ui/gallery.css
View File

@ -100,7 +100,6 @@
} }
.options .value { .options .value {
/*float: right;*/
position: absolute; position: absolute;
right: 20px; right: 20px;
bottom: 10px; bottom: 10px;
@ -116,7 +115,7 @@
} }
.image { .image {
float: left; display: inline-block;
background: no-repeat 50% black; background: no-repeat 50% black;
background-size: contain; background-size: contain;
@ -304,9 +303,11 @@
.ribbon { .ribbon {
height: 360px; height: 360px;
/* XXX make this expand dynamically */ width: auto;
width: 100000px;
overflow: visible; overflow: visible;
white-space: nowrap;
word-spacing: 0px;
font-size: 0px;
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
opacity: 0.5; opacity: 0.5;