.perc-region height issue

CM1
1

HI,

So I put a min height on my .perc-region class of 5px so that it was easier for my users to be able to drop widgets into regions etc… But on my live site, I have a template with many nested regions, and if the regions are left blank they end up creating a big space on my template do to the min-height setting.

So how do I keep this for the interface but not have it affect my live site?

I have tried CSS style overrides but I can’t seem to get it to respond.

2

Hi Sandy,

One way to isolate the edit mode in the CM1 UI is to use a CSS attribute selector like this:

.perc-region[title] {}

The title attribute is only added to regions within the CM1 UI.

Let me know if this helps.

Best,
Jon

3

Ok so I put this in my style sheet

.perc-region{min-height:0px;};

.perc-region[title]{min-height:5px;};

And its helping it cut down the blank space. But there is still a good 300 px of blank space left from these empty widgets.

I wish I could just say if widget is empty, display:none;

4

This jQuery code should hide it for you.

$('.perc-region:empty').length){   
$('.perc-region').css({'display' : 'none'});   
};
5

Thank you Matt, we appreciate your help.

Sandy let us know if Matt’s advice helped resolve this issue.

Chris

6

Thanks so much for this code. Question I haven’t really learn Jquery yet. Do I just treat it like js? Put some script tags around it and put it in the head code of my template?

I do have a scripts.js file that is included on most of my templates already. Can I just put it in there, on a document window load function or something like that?

7

Just copy and paste the code below into your meta-data section and it should be good to go.

<script> <br /> $(document).ready(function(){ <br />
 $('.perc-region:empty').length){ <br />
   $('.perc-region').css({'display' : 'none'}); <br />
 }; <br /> }); <br /> </script>
8

So I put this in, and it said there was a syntax error so I added a “(” to the first line.

original - $(’.perc-region:empty’).length)
mine - $((’.perc-region:empty’).length)

Then when I implemented it, it made all the regions disappear when I was working in cm1, and on the preview server popup. So it hid all regions not just empty ones. The page was totally blank. So it kind a worked, it just didn’t read the empty property.

I don’t understand the Jquery syntax. What is length soposed to equate to? “0” Does ‘.perc-region:empty’ - supposed to equal ‘true’ so then it applies the display:none?

9

Sandy,

I played with that code a little more last night and the length variable was not returning what I had read it would. The below code should work better.

<script> <br />
$(document).ready(function(){ <br />
$('.perc-region:empty').hide(); <br />
}); <br /> </script>
10

Ok I tried exactly what you had and its still not hiding those empty widgets for me.

I have this code in an external js file and I’m including the file in the head tag / additional code of the template, because I will want to use it on multiple templates.

After I tried it exactly like you had and it didn’t seem to respond. I through in an alert line right after your hide line, just to confirm that it is running the document ready function, and the alert worked. So I know its at least running the function.

How do I trace or test the ‘.perc-region:empty’ to see if it’s picking up something or if its undefined? In my case id “level6” should be returning empty on my Gala example page. Where does it get this property from? I’m wondering if it is a context problem with my implementation? It shouldn’t be but I don’t understand what objects from where its trying to pull these properties from so I don’t know how to confirm this.

Also just wondering if we get this to work, will it hide empty regions while working in cm1? If this is the case this might not work, otherwise every time I create a new page, 90% of the regions on that new page will be empty, and if it hides them my users won’t be able to click to put content in. If this ‘empty’ property only applies on the live server then we will be good =) Just a thought. I sure appreciate the help!!!

11

I used .perc-region {min-height: inherit;} using my own custom css to get rid of px. It’s much better.

I’m tryin’ to understand what’s the purpose for having min-height? Please explain… thx!

12

Hi Aaron,

The min height is for regions within the layout tab. This allows you to have an area where you can drop a widget into.

13

Thanks Aaron I will try this. I think (correct me if I’m wrong anyone) the reason for the min-height is when you are working in cm1 if you don’t have that then you can’t click on empty widgets to get the widget text editor window to show up.

14

absolutely correct!

15

@ben - I’m doing the same thing for IE8 message but if you’re using Chrome or FireFox, it showed 5px empty space… that’s why I used css to remove the min-height. What’s the best solution? I do not see any correct answer in this thread :slight_smile: