You are not logged in.

Announcement

Forum database was corrupt and an old backup was restored as temporary replacement. Registrations closed until the database is recovered. Please ask questions using the Contact form

#1 11-12-2013 17:17:22

rsalomone
Contributors
Registered: 22-11-2013
Posts: 101
Website

Side Panel example with accordian on page

The example provided does not appear to scroll properly (in desktop mode).

If you expand the according and it dips below the screen height, the directly content below the accordion item (that expanded below the bottom of the screen) cannot be scrolled.   That is, there are no scroll bars. 

This only happens if the last accordion content is not expanded first.

Offline

#2 11-12-2013 18:16:03

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Side Panel example with accordian on page

I can't reproduce that issue. Do you get it here too? http://metro-webdesign.info/#tutorials

Offline

#3 11-12-2013 18:22:23

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: Side Panel example with accordian on page

Found something: problem with CSS in #panel padding. After turning it off I can see the bottom of page with content out of screen smile. The first value (padding-top = 40px) is the problem (or even whole padding after some tests).

Last edited by chrismaliszewski (11-12-2013 18:36:28)

Offline

#4 11-12-2013 18:54:57

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: Side Panel example with accordian on page

OK. Repaired. As I said: padding causes problems with content hiding  out of screen. Fix requires small chages in plugins/panels/plugin.css. It changes a bit layout (for me it's acceptable change of view) and coding of title (<h1> at the beginning).

Replace #panel{...} properties with:

#panel{
	position:fixed;
	height:100%;
	right:0;
	top:0;
	background-color:#555;
	z-index:50;
	color:#FFF;
	/*padding:40px 10px 10px 10px;*/
	padding-left:10px;
	display:none;
	overflow:auto;
}

Add new CSS class name:

h1.panelTitle{
	padding-left: 40px;
	margin-top: -5px;
}

Coding: if panel has a title, <h1> tag requires additional class name equal panelTitle, e.g.:

<h1 class="panelTitle">Panel title</h1>

See how it works here on my website after forced refreshing (without cache).

Last edited by chrismaliszewski (11-12-2013 21:56:18)

Offline

#5 11-12-2013 21:56:46

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: Side Panel example with accordian on page

Now when I read Thomas's post I started to think "Did we talk about the same thing?". Rsalomone - did you mean problem I repaired or sth else? If sth else, I'll create another topic with solution I found to make it more clear and clean posts I wrote.

Offline

Board footer

Powered by FluxBB