Editing hidden elements in Design View

Elements can be fully or partially hidden from Design View. Here are a few techniques for exposing these types of elements to Design View so that the content can be viewed and edited.
In DW8 and later, for overflow:auto/hidden/scroll elements where the content does not fit in the containing element, Design View displays what content it can (and truncates the rest) in the element in a view-only fashion. This means that, if you try to set the selection inside the element, the entire element is selected, so the whole element itself can be edited, but not any of its contents. For this case, right-click on the element and use Element View > Full (shortcut is to double-click) to temporarily see the entire element. Use Element View > Hidden (or F5) to revert to the default view. Note that this may disrupt the layout.
Since display:none elements do not take up any space in the flow layout, Design View does not display them. Starting with CS3, you can use the Element View feature to edit display:none elements. You may need to go to Preferences > Invisible Elements and turn on display:none elements. This will show an icon in Design View that you can select to use the Element View feature. Note that just displaying the icon may disrupt the layout, so that’s why it’s off by default.
Design View also hides visibility:hidden elements, but only if they are position:absolute (AP) elements. Use the AP Elements (formerly known as Layers) Panel to toggle the visibility of these elements. Design View always displays all non-AP visibility:hidden elements for the sake of editing. They take up the same space in the flow layout, so this does not affect the layout of the page.
You can also override any CSS using in a Design-time Style Sheet if you want to always see particular elements in Design View.
Starting with CS3 (or in DW8 with an extension), another technique is to turn off rendering of CSS styles using:
  View > Style Rendering > Display Styles
This causes all content of your page to be displayed in it’s glorious unstyled semantic form. Ever wonder what someone visiting your page with a Screen Reader “sees”? This is a good approximation.
Of course, you can always switch to Code View and edit :)

  • I have published my first website using Dreamweaver CS4, and everything looks good. The problem is when I reopen Dreamweaver and try to use “Design View’ it is not active. Only the code or split code view is active, so I can’t view or make changes to my site.

  • Randy Edmunds says:

    Ben,
    Check your Preferences, in the File Types / Editors category, and make sure that the “Open in code view” field does *not* list a file extension that you’d like to open in Design View.
    Otherwise, try the Dreamweaver forums for help:
    NNTP:
    news://forums.dreamweaver.com/macromedia.dreamweaver
    Web:
    http://www.adobe.com/cfusion/webforums/forum/index.cfm?forumid=12

  • What if the element set to display:none is in the uneditable portion of a template. From within a page based on the template, you cannot access the content

  • Randy Edmunds says:

    What if the element set to display:none is in the uneditable portion of a template. From within a page based on the template, you cannot access the content

    Correct. You’ll probably want to edit the Template directly for this case.
    If you want to see (but you still can’t edit) the overflow:hidden in the page derived from the Template, you could add a rule something like the following to a Design-time Style Sheet:
    * { overflow: visible !important; }
    Hope this helps,
    Randy

Share your thoughts

Your email address will not be published. Required fields are marked *

*


6 − three =