Skip to main content ↑ ↓
Topic: Feature Request: Sidebar (Read 13829 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Re: Feature Request: Sidebar

Reply #15 –

Sidebar's and responsive design is easy, use floats(very simple example).

Code: [Select]
#sidebar {
width: 100%;
}
Code: [Select]
@media only screen and (min-width: 600px) {
width: WHATEVER YOU WANT ;
float: right;
}

Needs more tweaking, but see what I did in my fork: http://xarfureo.com/

Re: Feature Request: Sidebar

Reply #16 –

Quote from: Xarcell – Sidebar's and responsive design is easy, use floats(very simple example).
Yep, that's right in general.. but doesn't work well all the time, e.g. if you have other sidebar related stuff to deal with.. (adminmenu, profile, poster's area in display...)
I'd go with "display:table;" instead..
Code: [Select]
<div style="display: table;">
    <div style="display: table-cell;">primary content</div>
    <div style="display: table-cell;">side bar</div>
    ....
</div>
then simply change display: to block, on smaller screens.. Example is with inline CSS, just for readability.
Thorsten "TE" Eurich
------------------------

Re: Feature Request: Sidebar

Reply #17 –

I've found that as long as you aren't trying to support old versions of IE, it's usually fine just with floats and/or relative positioning. Can depend on markup and content though. There is a Webkit bug that affects floats sometimes, but you can get around it with a relative positioning trick. I used that ages ago to fix the sidebar menus in 2.0.x.

The bug is that if you float a div left, then have another next to it that is unfloated with a left margin, then depending on the content of the second div, Webkit will sometimes put the same margin on the right as well, even though it's not declared anywhere. Dunno why, but it does.

You can get around it by setting relative positioning on the parent element of those two divs, then setting relative positioning with left: 0; and right: 0; on the second div. That makes it behave, whether the floated div is expanded or collapsed, and wont break any other browsers. :)

The thing I used absolute positioning for was to pull a portal sidebar clean out of the portal table td, to position the sidebar at the left edge of the screen. That works a treat too, if you want that layout (I rather like it). You can use variants to switch the CSS between that layout and the standard portal layout (sidebar inside forum wrapper). I've done that too. :D
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Feature Request: Sidebar

Reply #18 –

float should work with all modern browsers (with some tricks), but it can get complicated in a complex html structure.. (float needs clear, overflow, position and all that nasty stuff, just check the dropmenus  ;) ).
display:table, table-row and table-cell is supported by IE8+ and all modern browsers, it's almost identically with a normal table structure (no colspan or rowspan), but has got the advantage to switch it back to display: block; on smaller screens.
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
Thorsten "TE" Eurich
------------------------

Re: Feature Request: Sidebar

Reply #19 –

The drop menus aren't floated. They're absolute. :D

I know about table display, but haven't had cause to use it much yet. Whatever works. One good thing about the relative position trick is that it's automatically RTL-compatible. If you decide to switch your floated div to the right, the second div doesn't need any changes. It's still happy at left: 0; right: 0; which is rather handy for a forum app.

Back when I first found this Webkit bug, we were still wanting to support IE6 and 7. At the time Opera had the same bug. Opera has since fixed it, but Webkit still has it. So, I still think the trick is worth knowing about for whenever it might be useful. :)
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Feature Request: Sidebar

Reply #20 –

Hey there ya go, I'm going to use this fix to deal with Issue #548.

Current Display.template.php markup is inherited from 2.0.x dev/IE6 days. Tis uggers. The post_wrapper div is no longer needed for its original purpose, so will be revamped to wrap everything except the keyinfo and the poster area stuff (IOW, will wrap moderatorbar*, post, etc all in one). Then I use this relative position trick on it. Result will be a content area that handles hide-poster-stuffz or show-poster-stuffz, with LTR or RTL, without any CSS tweaks. :)

*ETA: Actually moderatorbar and quickbuttons_wrap can be deprecated. Can't honestly remember why they were there in the first place. People seemed to have major divitis and spannitis in 2.0.x dev cycle.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Feature Request: Sidebar

Reply #21 –

ROFL. Well after all that waffling I still had to use the old style, coz me nifty trick didn't work this time. I'll just shaddup now. :P

(It's all sorted anyway, which is the main thing).
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Feature Request: Sidebar

Reply #22 –

Quote from: Antechinus – I've found that as long as you aren't trying to support old versions of IE, it's usually fine just with floats and/or relative positioning. Can depend on markup and content though. There is a Webkit bug that affects floats sometimes, but you can get around it with a relative positioning trick. I used that ages ago to fix the sidebar menus in 2.0.x.

The bug is that if you float a div left, then have another next to it that is unfloated with a left margin, then depending on the content of the second div, Webkit will sometimes put the same margin on the right as well, even though it's not declared anywhere. Dunno why, but it does.

You can get around it by setting relative positioning on the parent element of those two divs, then setting relative positioning with left: 0; and right: 0; on the second div. That makes it behave, whether the floated div is expanded or collapsed, and wont break any other browsers. :)

The thing I used absolute positioning for was to pull a portal sidebar clean out of the portal table td, to position the sidebar at the left edge of the screen. That works a treat too, if you want that layout (I rather like it). You can use variants to switch the CSS between that layout and the standard portal layout (sidebar inside forum wrapper). I've done that too. :D

That's why you don't do margin for elements next to floated elements. I never understood why people do this. You float both elements, and apply widths to both. Problem solved...

Fixed position is not supported on a good majority of smartphones. Absolute positioning has it's quirks on smartphones...

Re: Feature Request: Sidebar

Reply #23 –

Quote from: TE – float should work with all modern browsers (with some tricks), but it can get complicated in a complex html structure.. (float needs clear, overflow, position and all that nasty stuff, just check the dropmenus  ;) ).
display:table, table-row and table-cell is supported by IE8+ and all modern browsers, it's almost identically with a normal table structure (no colspan or rowspan), but has got the advantage to switch it back to display: block; on smaller screens.
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

There is nothing complicated about floats. Not if you use your CSS properly. Just use overflow: auto, clear:both, and box-sizing: border-box(support goes back as far as IE8). If you end up with scrollbars, then your math isn't correct, and the layout shouldn't be used anyway.

Also, there shouldn't be any reason what-so-ever for adding an empty element with "clear:both", not unless your adding support for earlier than IE8. As I understand it, Elkarte is focused on IE8 support and above...

Re: Feature Request: Sidebar

Reply #24 –

Quote from: Xarcell – That's why you don't do margin for elements next to floated elements. I never understood why people do this. You float both elements, and apply widths to both. Problem solved...
Which is all very well if you want to set both width in %, and if you either don't have any horizontal padding or if you declare border-box sizing.

If you don't want to set both widths in %, then you use a margin on an unfloated element, next to the floated one. This is a really old way of handling things that dates back to the stone age and has been supported forever. Most of the time, it works. When it works, that's good enough for me.

QuoteFixed position is not supported on a good majority of smartphones. Absolute positioning has it's quirks on smartphones...
However, since I was doing this for desktop......

Fixed and absolute are fine on the last two versions of Android, AFAIK. iOS still has a bit of indigestion with them. The rest? Who cares?
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Feature Request: Sidebar

Reply #25 –

Quote from: Xarcell – There is nothing complicated about floats. Not if you use your CSS properly. Just use overflow: auto, clear:both, and box-sizing: border-box(support goes back as far as IE8). If you end up with scrollbars, then your math isn't correct, and the layout shouldn't be used anyway.
Sometimes, like when you have drop menus in an element, you can't use auto or hidden oveflow. When those can be used I agree they're very useful.

QuoteAlso, there shouldn't be any reason what-so-ever for adding an empty element with "clear:both", not unless your adding support for earlier than IE8. As I understand it, Elkarte is focused on IE8 support and above...
The clearfixes are not adding an element as such. They're adding a pseudo element, which has no effect on markup. It's just a bit of CSS, much like setting auto overflow.

If you're talking about the horrible old line break clears that were inherited from early SMF 2.0.x, those are already on the kill list.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Customizable Sidebars

Reply #26 –

I was wondering what and how everyone thinks about having sidebars, I for one love having them for shoutboxes and ads.

Re: Customizable Sidebars

Reply #27 –

It is inevitable for me. I use simple portal and display latest posts, ad and a couple of other blocks.

Re: Customizable Sidebars

Reply #28 –

https://github.com/Spuds/SimplePortal

Don't know if it's currently working, but I do know Spuds has worked on making it work with Elk.
Success is not the result of spontaneous combustion, you must set yourself on fire!

Re: Customizable Sidebars

Reply #29 –

Wow ! You guys are doing a great job. Is it stable ? Or still under development ?