html - Parent inset box-shadow overlapped by children divs -


i having issue children divs overlapping parents box-shadow bottom.

the parent has max-height w/ overflow-y: scroll. great!

http://i.stack.imgur.com/jqe0r.png

html:

<div class="capture sh-btm">   <div class="threads">     <div class="thread"></div>     <div class="thread"></div>     <div class="thread"></div>     <div class="thread"></div>   </div> </div>

css:

.capture {   width: 100%;   height: 100%;   overflow-y: scroll;   overflow-x: hidden;   position: relative; }  .threads {   height: 250px;   width: 100%;   display: inline-block;   padding-bottom: 10px;   position: relative;   clear: left; }  .thread {   width: 248px;   float: left;   margin-right: 8px;   margin-top: 6px;   border-bottom: 2px solid #dadada;   overflow: hidden;   zoom: 1; }  .sh-btm {   box-shadow: inset 0px -5px 9px -2px #000; }

no, you're asking can done quite easily. however, ease advise using background-image or css gradient instead of inset box-shadows. you'll have tweak css bit wanted. (for example make sure bottom overlay doesn't cover bottom arrow of scrollbar).

setting z-index on child elements work if have nothing more static text , images show, , no links or interactive content. you're not allowed set background parent, or hide children.

to achieve this, need make 2 separate shadow overlay divs, , position them absolutely in parent container. structure this:

  • parent container
    • shadow overlay left
    • shadow overlay bottom
    • threadcontainer (overflow set on div)
      • thread
      • thread

here working demo: http://jsbin.com/avafaq/1/edit

<div class="capture sh-btm">   <div id="shadow_overlay_left"></div>   <div id="shadow_overlay_bottom"></div>   <div class="threads">     <div class="thread"></div>     <div class="thread"></div>   </div> </div> 
#shadow_overlay_left{   width: 10px;   height: 100%;   position: absolute;   z-index: 5;   box-shadow: inset 3px -2px 5px 0px #000; } #shadow_overlay_bottom{   width: 100%;   min-height: 10px;   position: absolute;   bottom: 0%;   z-index: 5;   box-shadow: inset 0px -5px 9px 0px #000; } .threads {   overflow-y: scroll;   overflow-x: hidden; }

notice put overflow properties on .threads container instead of parent container. because else absolutely positioned divs scroll too, , not fill respective widths/ heights.

again, can apply box-shadow, background-image or css gradients shadow overlay divs.


Comments

Post a Comment

Popular posts from this blog

user interface - Python attempting to create a simple gui, getting "AttributeError: 'MainMenu' object has no attribute 'intro_screen'" -

complete newbie here python started learning language few days ago (with no programming experience beforehand). i'm bashing skull against desk here, trying create 1 menu button lead menu, supposed replace/hide/destroy previous menu (either works, long process can reversed). what i've come far: import wx class mainframe(wx.frame): def __init__(self): wx.frame.__init__(self, none) self.centre() self.main_menu = mainmenu(self) self.intro_screen = introscreen(self) self.intro_screen.hide() class mainmenu(wx.frame): def __init__(self, parent): wx.frame.__init__(self, parent=parent) self.main_menu = mainmenu panel = wx.panel(self) sizer = wx.boxsizer(wx.vertical) nextscreen = wx.button(panel, label='next screen', size=(150,30)) nextscreen.bind(wx.evt_button, self.nextscreen) sizer.add(nextscreen, 0, wx.center|wx.all, 5) self.show() self.c...
Read more

jquery - Common JavaScript snippet to share files on Google Drive, Dropbox, Box.net or SkyDrive -

this first assignment of file sharing. need share files our website above mentioned locations. currently, have been exploring each service’s api file sharing. question 1 : there javascript code snippet available (like addthis.com ) share files? question 2 : should use server side coding file sharing or javascript advisable? thanks viewers. found useful plug-in named "ink file picker". saves given http file resource directly users online storage engine. url: https://developers.inkfilepicker.com/docs/web/ live example: http://ctrlq.org/save/
Read more

Android Gson.fromJson error -

i've completed tutorial how connect json url , parse content using gson library. code works fine url specified in tutorial, tryed modify work this url . tryed display 1 field second ulr, base field, can't work. here code, please help: public class jsonparsingactivity extends activity { string url = "http://api.openweathermap.org/data/2.5/weather?q=london,uk"; @override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); inputstream source = retrievestream(url); gson gson = new gson();// main gson class reader reader = new inputstreamreader(source); searchresponse response = gson.fromjson(reader, searchresponse.class); //gson.fromjson(string, class) toast.maketext(this, response.base, toast.length_short).show(); } private inputstream retrievestream(string url) { defaulthttpclient client = new defaulthttpclient(); httpget getrequest = new httpget(url);...
Read more