Layout with zero component width, issues with incontext editing

I have my layout with zero component and area size as the widths are defined during run time based on the mobile device (ipad or iphone) on which the page is rendered.

In this case I have two issues

1. I dont have designated component area to double click, which opens the DCR or component in edit mode. Its just a single pixel at the left corner of the component area. By clicking any where other than this single pixel, the DCR or component doesn't open up.

2. All the areas shows as individual rows.

Find more posts tagged with

Comments

Rick Poulin

You presumably apply different stylesheets or different stylesheet rules based on the device, so why can't you have a same override for edit mode to set reasonable widths? Also, if you're setting width=0 and then overriding, why can't you just set a reasonable default instead?

Personally, I don't set widths in the layout definition at all, instead using css-class and/or html-id attributes and controlling widths with my own stylesheets.

shameem

Let me go step by step.

1. Double click on layout area doesn't open up the component for editing
We found that this issue is not due to Layout or zero width areas. Its the problem with browser compatibility.

IE - Works
FF 15 and FF3.6 doesnot work as expected. In this browser you need to hit a small pixel showing at the corner of the component area.

2. Applying CSS to decide the width.
In edit mode we need to have separate CSS as we do the content authoring in desktop browser (IE or FF). But there is no method I found till now to replace this edit mode CSS with actuall CSS (in preview or final HTML) as we donot want it tobe included in the final HTML. Due to performance issue we cann't keep unnecessary files in the actual HTML, inspite what so ever the size it is.

Incontext editing also there are issues with CSS on the page. Not sure whats the problem.

Rick Poulin

Its the problem with browser compatibility.
IE - Works
FF 15 and FF3.6 doesnot work as expected.

Depending on which version of IE, that's almost certainly because your code is actually broken. The borked box model in older versions of IE will entirely ignore width=0 and use whatever it feels like using. Other browsers will happily render your content in a collapsed box.

In edit mode we need to have separate CSS as we do the content authoring in desktop browser (IE or FF). But there is no method I found till now to replace this edit mode CSS with actuall CSS (in preview or final HTML) as we donot want it tobe included in the final HTML. Due to performance issue we cann't keep unnecessary files in the actual HTML, inspite what so ever the size it is.

You're right, there isn't an ootb method to do this, but you're not using ootb layout mechanisms either. I can't for the life of me imagine that a few extra lines in your CSS is going to affect performance by any noticeable margin, but if you really insist, just update your deployment process to strip out those few lines as the file is on its way out.

Frankly, if the weight of your page is so heavily affected by an extra few hundred bytes, you're using the wrong product.