html - Creating Dynamically Sized DIV Boxes with Static Headers -


i'm working on type of dashboard contains div's of various sizes. height , width percentage based , content of each div box dynamic. need create nice headers describe contents of box.

the header inside of box. causes lots of problems when overflow involved , makes spacing inner content annoying.

is there easier way sized headers inside of div or easier put them on top of boxes little hats.

this extremely close want header scrolls content! that's terrible.

create div title header

why difficult?

this want, widget contraption describes it's own contents.

here's fiddle getting quite close

http://jsfiddle.net/exrxr/1019/

but position absolute overrides many things...

i put demo prior question being edited include link demo, first iteration, though after looking @ linked demo seems mark-up close:

<div class="dashwrap">     <h2>header</h2>     <div class="dashcontent">         <p><!-- content --></p>     </div> </div>​

the following css seems require:

.dashwrap {     width: 50%;     margin: 0 auto 1em auto; } .dashwrap h2 {     background-color: #ffa;     border: 2px solid #000;     border-radius: 0.5em 0.5em 0 0;     text-indent: 0.5em; }  .dashwrap .dashcontent {     max-height: 5em;     overflow-x: hidden;     overflow-y: auto;     border: 2px solid #000;     border-top-color: transparent; }​

js fiddle demo.

edited following question op (in comments):

...i have no clue why works. if kind give me brief explanation why header stays in place miraculously extremely helpful.

the reason h2 stays 'in place' is, simply, because i've not moved it, or changed default display behaviour (an h2 defaults display: block); means remains in place within document's flow.

its sibling, .dashcontent, element able scroll because has 2 rules, first max-height prevents element growing vertically accommodate descendant element(s) , second overflow-y (which in browsers requires overflow-x set, hence above), allows contents of .dashcontent scroll.


Comments

Post a Comment

Popular posts from this blog

java - Play! framework 2.0: How to display multiple image? -

i need display gallery of photos. here template: @(photos: list[photo]) @title = { <bold>gallery</bold> } @main(title,"photo"){ <ul class="thumbnails"> @for(photo <- photos) { <li class="span3"> <a href="#" class="thumbnail"> <img src="@photo.path" alt=""> </a> </li> } </ul> } and here controller method: public static result getphotos() { return ok(views.html.photo.gallery.render(photo.get())); } and here photo bean : @entity public class photo extends model { @id public long id; @required public string label; public string path; public photo(string path, string label) { this.path = path; this.label = label; } private static finder<long, photo> find = new finder<long, photo>( long.class, photo.class); public static list<phot...
Read more

gmail - Is there any documentation for read-only access to the Google Contacts API? -

i want read-only access user's google contacts. there stackoverflow member wanted this, , received following answer : yes, there is, use https://www.googleapis.com/auth/contacts.readonly scope , "view contacts". this exchange reference read-only access google contacts can find using google. simply using access token obtained attempt read usual google contacts api (i.e. https://www.google.com/m8/feeds ) fails insufficient permissions. similarly, using google contacts api on new target fails 404 errors (for example https://www.googleapis.com/auth/contacts.readonly/default/full ). is there documentation anywhere on how use api, or permissible way access google contacts api full read-write access?
Read more

php - Controller/JToolBar not working in Joomla 2.5 -

relevant code: jtoolbarhelper::custom('savecategories', 'save', '', 'save', false, false); ... <input type="hidden" name="controller" value="easyblogcontroller"> according can dig docs , own previous questions, should call savecategories() function in easyblogcontroller . i've tried setting value easyblog , easyblog.php (file name) current easyblogcontroller (class name). clicking on save button refreshes page. not redirect, echo or var_dump test code put in savecategories() function. var_dump ing jrequest::getvar('controller') , 'task' return correct values. creating controller object , using $controller->execute('task'); works. the values going depend on location of controller trying call, , have couple options here. typically there controller in base folder of component (likely components/com_easyblog) in file called controller.php , class name inside ...
Read more