HubSpot Ideas

Stephanie-OG

Drag-and-drop themes: ability to click into columns with negative margins

Use Case: Often times a design will include overlapping content.


How to replicate: You can do this with negative margins on a column, for example, but then it becomes impossible to click into that column in the page editor as it thinks you're trying to click into the section.

 

For example: in the below image the Column has a top margin of -160px and you can't click into it in the page editor (so the client will never be able to remove/edit that margin or any other spacing):

 

Drag-and-drop column with a negative marginDrag-and-drop column with a negative margin

 

You can replicate this in any theme by choosing a column and updating the negative margin - you will be unable to click into that column on the page editor for future updates.

 

Request: It would be great if there were still a way for the content to click into that column's settings directly on the page (e.g. it has a higher z-index than the section below) or from the "Contents" tab in the sidebar (by adding columns to that area).

HubSpot Updates
In Planning
February 22, 2022 05:32 PM

Hi folks,

 

Thanks for reporting this. With the way our drag and drop editing works, when a user clicks on a container that has a negative margin, we unfortunately don't have a good way to know whether the user is trying to click on the container with the negative margin, or the container underneath. @Mark_Ryba I checked with the team about your suggestion, and it sounds like that would work, but there are some undesirable side effects, so we will probably not go that route for now. 

 

But I do have some good news! We are working on some updates to our Contents sidebar: the sidebar in the editor that shows you the list of all of the modules on your page. With the updates, we will be able to show the entire container structure of your page, with all sections, columns and rows represented. So, when you have a container that has negative margin, you'll soon be able to go to your contents sidebar and click to edit from there. 

 

I know this doesn't completely solve the problem, but hopefully this helps. 

 

Thanks,

Katie

2 Replies
Mark_Ryba
Contributor | Elite Partner

To build on this, would be great if "negative margins" from the DND UI were instead interpreted to use transform: translate.... in the compiled CSS so as to not cause layout bugs.

katie
HubSpot Product Team

Hi folks,

 

Thanks for reporting this. With the way our drag and drop editing works, when a user clicks on a container that has a negative margin, we unfortunately don't have a good way to know whether the user is trying to click on the container with the negative margin, or the container underneath. @Mark_Ryba I checked with the team about your suggestion, and it sounds like that would work, but there are some undesirable side effects, so we will probably not go that route for now. 

 

But I do have some good news! We are working on some updates to our Contents sidebar: the sidebar in the editor that shows you the list of all of the modules on your page. With the updates, we will be able to show the entire container structure of your page, with all sections, columns and rows represented. So, when you have a container that has negative margin, you'll soon be able to go to your contents sidebar and click to edit from there. 

 

I know this doesn't completely solve the problem, but hopefully this helps. 

 

Thanks,

Katie