Streaming live at 10am (PST)

Poll: Navigator Panel showing invisible elements

Hey guys we’re redesigning the navigator panel and we need some feedback.

Problem: Right now when you set an element to Display: none in the style panel or hide it in a specific device in the element’s settings panel, it disappears from the canvas and there’s no way of selecting it unless you know the name of the class you set it to and then you hunt it down in the navigator.

Solution: Show an eyeball icon next to each element in the navigator. If it’s hidden it will be bright white. If it’s visible it will have an inactive eyeball icon. Like this…


It’s nice to have this indicator, but what if someone clicks on the eyeball in the navigator - what happens?

What should happen when you click on an eyeball icon in the navigator?

  • It will set that element to Display: none. It will stay Display:none when published/exported.
  • It will just hide it from the canvas (commented out) while you are editing the site. It will uncomment (become visible) on publish/export.

A little more info for option 2: this is the exact same as going to the style panel and selecting Display None, but just faster, and you get to see which elements are invisible in the navigator. Post your reasoning for your choice below.


Definitely the first option. Can’t think of 1 good reason why option 2 should be considered?

Only reason might be that you want to temporarily hide some element and use it later. But if you’re thinking like that, we should get some sort of object-library :sunglasses: (sometimes I delete an unused style, discovering 1 day later that I need to rebuild it because I suddenly found use for it again haha!).

If option one (the hide temporarily option) is chosen won’t the eye ball icons start getting messy, some showing white (on) because an element is set to display none using the style panel while others showing white (on) simply because it’s been clicked and now hidden temporarily while editing or did I follow that wrong.

Yeah it will definitely get messy.

@rowan You like the commenting option correct?

sergie, Yes that’s correct

Actually, the ability to hide an element is excellent. If i’m creating a custom slide menu using jquery (like slideToggle) I find myself OFTEN having to search for the display:none class. There are a lot of class “actors” in my scene that require invisibility until queued to the stage. I like the fact that I have control over the HTML display in my style editor, but an icon to be able to turn it back on from the navigator would be brilliant.
I’ll add that visibility on scene (like hiding an interaction while working) and a display:block/none should be two separate things. Both very useful.

@Jonas76 and @rowan when I think about it every time I need to hide something in the designer I set it to Display None. I usually don’t want it to show up when I publish unless I make it appear using an interaction (in this case the interaction would make it Display Block so that it will appear in that situation).

I can’t think of many examples where I just want to hide it from the canvas and then when the site is published i want it to appear. Can you give me a good example(s) where you want to set it to “invisible mode” only in the designer and not when published?

1 Like

I agree with this. To me display none makes most sense. If you did the commenting out option you’d likely have to show two colours to make things less confusing, like white for when that object has been set to display none in the style editor and blue or something for if you click on the eye to temporarily hide it in the canvas. Otherwise as you said earlier it would get messy and hard to tell which is which.

There may be an option - if you click on the eyeball two times in succession it will cycle through display-none and comment-out with the two having different icons. But that will be confusing nonetheless…and there’s no need to comment out different things in your site (at least from what I can see).

Totally. Or perhaps if you held command/control and clicked it then it would select the comment out option - that way its there for those who really want it but its out of the way and not confusing.

In my opinion the second option should be considered as implementation. If I set something to be invisible I don’t see ANY reason why it should be visible on published website. If I hide it in Navigator and it will appear on the published website I might need to go back to the designer mode and figure out why isn’t that working as I wanted. Definately Option #2.


@rowan and those voted for Option 1, can you give me some examples of where you would want to set an element to “invisible” only in the designer and not when published?

Yea, I’m really having an issue figuring out what the purpose would be of option one.

The only reason I can see for #1, is if you happen to have a lot of divs that are on the page, and a user wants to have less items visible to them while they are working on the site. I use this for example when I am creating div sections that will be displayed when published, but I use jquery to toggle the divs for slideDown etc. When I am working on the different divs in the design view, after I finish a div that I know I will not need to work on anymore, I just set it to display:none so that my workspace is less cluttered.

Now not everyone works that way, and that is fine, I am not opposed to option #2 either, whatever works best for the larger community.


Let me think… Yes, I think the biggest issue is what cyberdave describes. 3 recente examples of works I’ve done where this issue occurs:

The blue overlay with the drawn circle and arrow starts as display:none but appears after some specific moment. I don’t want this to be visible while designing the page!

The blue text block is only visible after clicking 1 specific link, it’s set to display:none by default. It’s just 1 detail of a complete page, so I don’t want this to be visible while designing the page!

The right sidebar (contact form) is only visible after clicking the contact link, default state is display:none. It’s annoying when this is visible while designing!

Now we can easily set the object to display:none when we don’t use it… But it’s not user friendly, and it’s always hard to explain to clients who don’t have a clue what’s happening in the Navigator.

1 Like

I´m would love to have option one when working with interactions like @rowan last example. Just hide it when I working on other things in different views and on export or preview it is visible when interacted with.

Edit: If you want display none also on export you set it to display none in the styles section.

Exactly this. My reasons are the same as @rowan’s argument.

An example of using the option 1, would create a div for loading (or popup), which should be visible but not editing.
Actually this question is very complicated, but I think it will have more reasons to use option 2 than option 1.

I liked the option of multiple status @cyberdave

But I agree that option 2 can already be made, even if more slowly. Option 1 would be a new possibility.
Or it could have a status “visible when published” in the style panel. A solution to add the option 2 in the navigator pane. and leaving the option 1 in the style panel. (basically leaving the most used in the navigator and have 2 options in style)

@rowan, @jorn, @Jonas76 whenever I have a sidebar or anything that “appears” on a click interaction or any other interaction I just set it to Display:none so it doesn’t take up space on the canvas. If your interaction has it become Display Block in one of the steps then, it’s 100% okay to set that element to display none and publish it that way.

So looks like option #2 will solve your problem.

1 Like

Did not know that, thanks.