How does the Layout Tab determine what width and heights to show the regions at? And why does it set hard coded dimensions and absolute positioning (seen via Chome’s Inspector Tool)? it’s driving me crazy and messing with my own styling, making it hard to properly manage the template on the Layout tab.
I’ve got a header region that it’s displaying with an inline width of 1810px and a height of 1380px! I’ve checked, it is not my custom styling. And I’ve also checked the CSS overrides area and nothing is set for it…same goes for the 3 div regions that are children of the header region.
if I switch to the Content Tab the layout looks fine. This is only occurring on the Layout tab.
The layout tab inserts additional spacing around regions in order to allow users to be able to grab and drag region borders in order to resize regions. The content tab and the preview are the more accurate views of the layout. The best and easiest way to control your layout to pixel perfect dimensions is to work with two monitors, have the Layout tab open in one browser and a preview window open in the other. As you change your layouts, you can refresh the preview window to QA/Test the impact of your changes.
Additional spacing is a gross understatement. I’m not talking just a little extra padding, I’m talking hundreds of pixels it’s adding to the heights and widths. It’s also making everything absolute positioned as well. My layout itself is fairly fluid, and it appears your Layout tab is having a hard time interpreting fluid widths and heights properly.
I mean the issue is probably that my design works the way I designed it; once the percussion styles are added in (as well as any scripts you guys run to supposedly “help”) for the Layout Tab, it throws my design off.
How do you expect our end users (some with very little technical knowledge) to use this Layout tab to add widgets and such to their sites, if I (a web developer and designer) am having a very hard time with it?
Also, due to the crazy height’s it is setting, it’s putting one region (that i have set to a higher z index) over top another region so that when I select the lower z-index region I cannot click on the edit icon because the higher z index region is being shown above it. the higher z-index region is a popup menu that only shows when I click on a toggle button, however the Layout tab shows the region always. If the height would act normal, it wouldn’t be overlapping in the way that it is.
Right now I’m getting around this by moving that particular region to the addition code, and thus not including it into the manageable area. I’ll be the only one changing this area, so it’s not a huge deal for right now.
Also, the edit and delete images are showing extra large sometimes (see screenshot)
Also, what purpose do the added DIVregions with a class of “perc-vertical” serve? They are also causing some ares of my design not to have a height of 100%. All regions seem to get wrapped by this div. I have to get around it by added a CSS override of div.perc-vertical { height:100%;}
Do such DIVs get exported to the published site, or are they stripped prior?
There are some definite pitfalls when attempting to integrate a UI over a customer’s proprietary HTML and CSS. We cannot accommodate all possible design schemes and methods, and so the behavior is not always optimal. While issues such as float drops, overlapping regions, etc., can cause designs to break down in structure in Layout mode (some cases are worse than others), usually this is favorable to not being able to add to or edit certain regions at all because there is no padding between them and their child regions.
If you can send a screenshot of your full template in Layout mode, I would be curious to see if there’s anything particularly abnormal happening in the UI.
Regarding the functionality of your templates for your end users, it is typically recommended that all templates have their empty widgets in place on the template level, so that typical content contributors never need to touch the Layout tab. When creating a new page, they just select the template that has the correct design and set of widgets for the content they are authoring, and then they can simply input the content into the empty widgets.
Do you have any CSS rule sets that control the width or height of IMG tags? It looks like some of your CSS is interfering with our UI controls here. If this is causing usability issues, you could add a rule such as this to your CSS file to override these rules within the UI:
width: auto !important;
height: auto !important;
} ```
Thanks, I’ll have to try that out to fix the images. I’ll try to take another look at my HTML and CSS and see if I can figure out what’s causing the Layout tab to generate such huge widths and heights. off the top of my head, I do have some 100% widths and heights set, but I don’t think this should be a problem unless the percussion syntax is setting a height specifically on one of its own divs…
on a side note, is there not a way to add a class to the breadcrumb unordered list (rather than to its container div)? I didn’t see any option to set a class in the widget properties… I know I can target the perc-breadcrumb-main class, but am trying to keep my own CSS more generic so I can use it for non-percussion things as well.
I’m not really getting anywhere. CM1’s layout tab is specifying heights of 6044px for my top level container “gcs-container” DIV and 1380px for my header “gcs-header” DIV. If I remove the header DIV the height issue goes away for the most part. I’ve double checked my CSS for my header and I set its height to 54px. For some reason or another the layout page gives it an inline style of 1380px.
Any help is most appreciated.
See attached screenshots of Google Chrome’s Dev Tool Site Inspector windows
Inline height and width properties for a region can be managed or removed by editing the region in question and expanding the CSS overrides menu. Check off “Do not use CSS overrides” if you want to clear out all inline CSS rules for the region.
The height and width properties can sometimes be set by accidentally selecting and dragging a region’s edge, or, if you’re using the Site Inspector tool to break down a template, CM1 may have incorrectly auto-re-sized the region. At any rate, the method above should correct this issue.
Classes for the Breadcrumb widget will be added to the containing Div, not the UL itself, so you’ll either have to use CSS selectors based on that custom class, or target the UL’s perc-breadcrumb-main class.
Are you looking to style the blue dashed lines in the Layout tab?
No, this is not it. I’ve already tried the CSS overrides option “Do not use CSS overrides” multiple times. It’s not that that is setting the inline styles. The “guides” are doing it, as if I choose “Hide Guides” the height issues go away.
Hi Paul,
One thing you could try to mitigate the height and width calculation issues within the layout tab is to write some CSS using the “title” attibute. The title attribute only gets applied to regions within the UI, so it will have no effect on the previewed or published pages. For example to modify the width of region with the name of “content” only within the UI, you could do something like this:
Hi Paul, what some customers have used with great success to create a custom separator within the breadcrumb widget is to leverage background images applied to the li’s generated by the widget. Another method is to use the CSS content property. You can remove the default separator from the breadcrumb widget and using either the “before” or “after” psuedo classes add a url to an image or string for a custom separator. Here is a link to more information on the CSS content property: http://www.w3schools.com/cssref/pr_ge…
Jon, I thought of that as well, however, I don’t believe the content attribute along with the pseudo classes :before and :after are supported by “older” versions of IE. Due to the nature of being a government organization, many of our users are on computers that still run IE8.
using images for a common, simple thing like a separator character is also probably not the most efficient route…
the problem is that the way cm1 generates the html for your breadcrumb widget, it does not wrap the separator in a span tag, nor wraps the current page text in any sort of tag, so I have no way of targeting it separately from general text within the list tags… I want to be able to change the color of the separator without changing the color of the current page text within the breadcrumb.
I think it would have been more semantically correct if you had breadcrumb wrapping the separators in span tags, rather then simply outputting it as basic text right after the link tags…technically speaking the seperator is a seperate “element” of the breadcrumb list, so wrapping it in a span tag would have been more appropriate, at least in my opinion.
But having said all this, I’ll probably have to go the route Jon suggested, using the content attribute and before/after psuedo classes. It’s the only real option at the moment.
