nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Visual Preview Bar

jrd

The Visual Preview toolbar, the one with the Edit link that appears when browsing html pages, is often hidden from the user. In long pages, the user has to scroll down to find it. In pages with form elements (such as drop-down lists), the toolbar is at least partly obscured by those elements. In pages with a Product Finder, the Product Finder often completely hides the toolbar, rendering it useless.

Is it possible to make the Visual Preview bar always appear at the top of the generated page when the user first comes into the page. Also...why does the preview bar disappear behind the dropdowns that may appear on the page.

J.Daly
Development Manager

Find more posts tagged with

Comments

Migrateduser

Sorry I didn't see this at the time. We ran into a similar problem with VP on 6.1. If I recall correctly, the z-index on the toolbar is set too 100. If any of your other elements have a higher z-index they will appear higher in the stack than VP, and it will hide behind them.

Migrateduser

I could be wrong, but I'm guessing that jrd's not explicitly declaring a z-index that's higher than 100 (or any z-index at all, for that matter) -- might it be something within the template previewer that could be doing this? I can't say I've seen the problem he's describing, but what if the toolbar doesn't interact nicely with drop-down lists?

Just a thought.

Dave

Current Environment(s):
(1) TS 6.1 SP1 on W2K3
(2) TS 6.1 SP1 on W2K
(3) TS 5.5.2 SP2 on Win2K

rmsmith

I ran into a similar issue with the visual preview toolbar appearing behind some of my div tags. The z-index of the toolbar is set incorrectly. When setting the z-index, you also need to set the position to something (ie position:absolute) otherwise it just gets ignored by the browser. So to correct this I set the id of the visual preview toolbar in my stylesheet to:

#iw-vpreview {position:absolute; z-index:75;}

Hope this helps.

tienle66

Can someone help me with locating this stylesheet? My 'visual preview toolbar' is placed in the middle of my page and not up at top. I looked in the manuals and didn't find it's location.

Thanks.

Edited by NIH on 08/12/05 10:44 AM (server time).

rmsmith

I did a little more research and you could set the style in teamsite by adding it to your custom.css file (on the teamsite server). What needs to be set is the z-index of the div that the Visual Preview Toolbar (#iw-vpreview).

If you preview a page and view the source you can see that teamsite injects some code that creates the Visual Preview Toolbar. The div that the Visual Preview Toolbar is wrapped in has an id = iw-vpreview and that id is defined without a z-index. (In my previous post I stated that the position was not set, but it was). Further down the code you can see that the z-index (of 100) is set for each of the menu items. Since the z-index of iw-vpreview was never set, it creates some odd effects.

What I have done was set/override the z-index on the stylesheet that is used for the actual webpage. I could not find a stylesheet that had a reference to the iw-preview id.