Selecting a hidden html element when...

User 2823310 Photo


Registered User
312 posts

Ran across another funky bit today.

I'm placing an HTML element inline then using jQuery to create an inline pop up.
That HTML uses a display:none style written into it's division, then the mistake I made was set the min-height to 0 so it wouldn't effect layout. I found if you do that there is no way to select it with RSD any longer, the drop down menu or main menu does not include a selector for the HTML element! It'll just disappear on you.

FIX & OPTIONS
So if you did that you are going to need to use control + z or EDIT / UNDO to get back to the element, (if you can).
Option 1 then if you keep the display:none style written inline you'll need to set that element to a min-height of 2px in DESIGN / DIMENSIONS to be able to edit it in the future. That way you can keep the div hidden but be able to select it.
Or option 2 is to use RSD to place the display:none inside a surrounding division tag and paste your HTML in that, then got to the layout menu and select the "show hidden items checkbox" and go back and forth between that and the HTML elements under the DESIGN menu until your edits are done.

Bottom line, don't set an HTML element to min-height of 0.
User 103173 Photo


VP of Software Development
0 posts

That is what the Inspector pane is used for. Locate the element you want to work with there and then double-click it and it will take you to the Design pane for that element.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2823310 Photo


Registered User
312 posts

There in lies the rub Scott, with no selector for the HTML object you can't get to the design pane for it. Unless it's me missing something, or you mean using the RSD display none option to save editing steps.
User 103173 Photo


VP of Software Development
0 posts

You can always get to the Design pane from the Inspector pane. Locate the element you want to work with (on the Inspector pane) and then double-click it and it will take you to the Design pane for that element.

Display set to None and a min-height of 0:
https://s31.postimg.org/tjuyl5vmj/image.png

https://s31.postimg.org/6m29jnmp7/image.png
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2823310 Photo


Registered User
312 posts

Hey, with min-height 0
You can go to the inspector, locate the HTML element and select it... then hit the DESIGN menu and work on it too.
Thanks Scot, neat trick.
User 103173 Photo


VP of Software Development
0 posts

Alter Eagle wrote:
Hey, with min-height 0
You can go to the inspector, locate the HTML element and select it... then hit the DESIGN menu and work on it too.
Thanks Scot, neat trick.

Exactly! How have you not used that feature yet? ;)
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2823310 Photo


Registered User
312 posts

I have been using that to track the HTML and find the CSS, stuff like that.
I didn't know you could use it as a main selector too to get to different menus,
you can barrel around this puppy like a good thing with that little gem. :D

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.