Sidebar Same Height as Content


(Cynthia Taylor) #1

Hello,

Is there a way to match the height of a sidebar to the height of the main content? I am using RW7 and the seyDesign Copper 2.0 theme. Thank You!

http://www.educationoasis.com/book-central/book-reviews/the-crystal-mountain/


(Mark Harradine) #2

You could switch off the theme sidebar and put your main content in a 2 column stack, split 70:30 (or something similar).

Mark


(Stuart) #3

Hi @cynthia

I’m guessing that the main content area height is dynamic/variable depending on what you or the client choose to put in there from one moment to the next, yes?

On that basis it’s probably best to work out the height of the main content area ( contentWrapper ) then get it’s absolute height, then apply that value to the sidebar ( aside ).

Try putting this javascript in the page or project level javascript container. It’s written this way so that it will make sense to you both now and when you look at it later and wonder what it is :wink:

var aa = document.getElementById("contentWrapper").clientHeight;
var bb = document.getElementById("aside");
var cc = document.getElementById("sidebarWrapper");
var dd = aa + "px";
bb.style.height=dd;
cc.style.height=dd;

Let me know.

I’m aware there are lots of ways to achieve this. I think Joe Workman has a brilliant ‘Match Height’ stack that could be useful.


(Cynthia Taylor) #4

I was hoping to use the sidebar that comes with the theme, but if I can’t make it work, I may try that. Thank you!


(Cynthia Taylor) #5

I believe that worked, but I don’t know for sure because I’m having an awful time trying to upload my files. It just keeps saying that it can’t upload to the ftp server.

I’m not sure, but I don’t think that the Match Height stack will work in the sidebar. Or at least, it doesn’t show it in the demo.

Thank you so much!


(Stuart) #6

@cynthia
I think the Match Height stack would be useful if you are using only stacks on your page and are able to turn the theme provided sidebar off entirely.

If I am providing a sidebar area when using eg Foundry or Foundation all I ever do is use a split two column stack - just as @MortalWombatUK describes. I bet that how loads of users do it nowadays.

Hope it works out.


(Lisa Sandler) #7

@kryten… Interesting. So you’re saying you bypass the sidebar altogether and just use a column in the content area to do what you would normally do in a sidebar?


(scott williams) #8

That’s how ya do it Lisa, use column turn sidebar off then you can use any stacks you wish in that column


(Stuart) #9

Yes. Its an option :slight_smile:

Look at it this way… ‘other’ websites that are not made with RW have sidebars too, right? How do they do it? If a simple split column arrangement does not do it for you, then there are stacks which allow you to assign CSS classes to content zones. Just use one of those to create a ‘sidebar’ class then you can style that content zone however you wish unbound by RW, unbound by stacks… pretty much anything goes…


(Lisa Sandler) #10

As a non-programmer, it’s hard to make my brain accept new things and ways to use certain things. That is why I love this forum :slight_smile: thank you


(Cynthia Taylor) #11

That makes sense - thank you. Would I have to use a stack for content zones in order to format it differently from the main content? If so, could you recommend one? Should I use a special type of column to have them separate, or just use a regular two column stack?


(scott williams) #12

Just a regular 2 column, if you want to add CSS then put joe workman free CSS box in a column to target just what you put in that stack if you need that for some reason.


(Stuart) #13

As @swilliam says… just start with a standard two column stack and build up your main content in one and your sidebar content in the other.

Don’t start with special columns or special classes. Allow the design and the aesthetic you require to drive the need for anything else. My earlier comment about CSS classes and things was really just to help reinforce the ‘art of the possible’ in RW, not to assert that you need to use that method specifically.

As @MortalWombatUK says… a 70/30 two column stack will get you a long long way toward a stacks controlled main content and sidebar.


(Cynthia Taylor) #14

OK - sounds good - thank you!


(Cynthia Taylor) #15

OK, that helps clarify things - thank you very much! :slight_smile:


(Don King) #16

Hi Cynthia

Re: a non coding way to solve your problem

I’m into coding any Rapidweaver site I create. A lot of coding. But if you don’t want to get into all that,
here’s a very simple and easy way to solve your problem and make the content & sidebar (yes using the regular sidebar that comes with the theme) be the same height.

Whichever area is the shorter of the two, do either one of these two things:

(1) if the last element in the short section is a text box, simple add extra line spacing (using the return key) without actually typing any text in those extra lines;

or

(2) if the last element in the short section isn’t a text box, then add an extra text box, and then add extra line spacing (using the return key) without actually typing any text in those extra lines.

Bottom line: in either case, you won’t have any text in those extra lines you’ve added, you’ll just using them as extra space at the bottom of the short section to even things up. You’d have to go back and forth a few times, checking both sections, until you get them equal. This eliminates any coding at all and should work with any theme you use.

Note: you can also use this idea to add extra bottom border space to text, so the text doesn’t end exactly where the end of the section ends.

I know all the coders out there won’t approve of this method, but in the end, no one will know the difference. Hope this alternative method helps out.


(Jason Bostick) #17

That method may only work on one screen size though, right? It wouldn’t be responsive


(Cynthia Taylor) #18

hi Don,

It seems as though the sidebar (using it in my theme) is always the shorter of the two, compared to the main content. The method you said sounds great, but is there a way to put a text box in the sidebar in order to add space with the return key? Thank You!


(Don King) #19

Cynthia:

That’s a very good question. And reading it made me realize that I should have been a little more specific in my above answer to you.

You don’t have to add a text box in the sidebar because the sidebar is already a text box. So in the case of a short sidebar, if all you have in that sidebar is text already, then all you have to do is add extra line spacing to the text that is already there and the depth of the sidebar will be extended.

What I was referring to in my original answer was when you didn’t have text as the last element in the sidebar. As for an example, if you had an image (a photo, a .jpg or .png file) as the last element. Then all you’d have to do was put your cursor under the image and instead of typing anything new, just hit the return key to add extra line spacing. The result will be that the sidebar will extend in depth corresponding to how much line spacing you add.

I might also add that many third party themes, at least the newer ones that I’ve seen, handle this “sidebar-too-short” issue by automatically extending the sidebar in that particular theme to reach the bottom of the main content area. In other words, the sidebar will extend all the way to the footer area, no matter if there’s anything in the sidebar or not. At the end of the day, as a designer, I don’t like the sidebar going all the way down and actually touching the footer section on these newer themes. And on the other hand, I also don’t like the sidebar hanging at the top of the page with all that space underneath it in some of the older themes. Which is why after all is said and done I don’t use any theme sidebar. I disable it, and instead use a 2-column answer that I talk about below in the “Note” paragraph.

But to address your particular problem Cynthia, I haven’t really used or looked at, in any deep way, the themes that come standard with Rapidweaver. I just don’t like them. But I do know that the “Reason” theme that comes with RW does have the sidebar-too-short problem. Which is why I’m using it to solve your problem of matching the height of a sidebar to the height of the main content:

I prepared a short 3-minute video using the Reason theme to show you all the ways that you can deal with this issue. I’ve put this video up on my server so you can view it. Here’s the link (it has audio, so have your speakers on): SidebarProblem

Note:
The method I’m describing here isn’t the best way to handle your problem. I only suggested it as an answer because it seemed like you were new to RW (forgive me if I’m wrong), and because of that, might not have too many RW “add-ons" at your disposal to deal with the problem any other way. And what would that “other way” be: I thought Mark Harradine & Scott Williams in their answers to you had the best way to deal with making the main content and sidebar end up being the same depth/height: use a 2-column stack. I use this method all the time. But that would mean you’d have to have the Stacks 3 add on, which costs 50 bucks. So without that stack, the method I describe here would work without any additional cost. But if you can afford it, I would highly recommend Stacks 3 to anyone using RW. The truth be told, RW should have this in the base software (not as a third party, additional cost, add on) because without it you are creating in the dark. Layout/design wise, Stacks 3 (with it’s library of stacks inside it) makes everything sooooooo much easier.

One last comment, which is a response to Jason Bostick, who suggested that this method “may only work on one screen size” and wouldn’t be responsive. Honestly I can’t say 100% that it is or isn’t responsive (responsive meaning that it can be viewed correctly on all devices). All I can say is that in my experience of using this method in my early days of using RW, it worked perfectly fine on all devices, smart phones and tablets as well as regular computers and laptops. But as I also said, at this time, I’d only use the 2-column, and sometimes even a 3 or 4 column method (1, 2 or 3 columns of main content with a 1 column, and sometimes 2 column left-side-and-right-side sidebars) to solve the main content and sidebar issue. As I said before, I never use the sidebar that comes with any theme. Just a suggestion, but you might want to think about going that way too.

Anyway, check out the video. I think you’ll like it. It explains the whole idea of “line spacing/extra height.”


(Cynthia Taylor) #20

hi Don,

Thank you so much for the video and all of your help - it’s wonderful! I sent you an email.

~ cynthia