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; } } }

Adding alpha bullet option to VFE toolbar

sarahwright

I need to add an alpha bullet option to the Visual Format Editor. I know that this can be accomplished through the "Apply Style" dropdown, but since we are blocking all other styles it seems pointless to have a dropdown box that is always empty except for when an ordered list is selected. It would be nice to have an alpha bullet button in the toolbar next to the ordered list button, but from the documentation I've read it seems that you always have to select the ordered list first, and then apply formatting to it. I'm wondering if this additional step can be eliminated. Also, when the user copies in an alpha list from Word, it is converted to numeric during the clean and we would like to preserve the alpha list. Does anyone have ideas on how to accomplish this?

Find more posts tagged with

Comments

mstradling

I take it just over-riding the <OL> element in the display page CSS isn't a satisfactory solution?

Edited by mstradling on 01/19/06 09:54 AM (server time).

sarahwright

I wish it was that easy! We still need to give them the option of using numbered OR alpha lists. And, if I can figure those out, then Roman Numerals too.

Sarah

Migrateduser

As far as list types, I recommend this "article":

http://www.tizag.com/cssT/list.php

Dave

Environments:
(1,2) TS6.5, TS6.5SP1 on W2K3
(3) Vignette V7 Portal on Solaris 9

mstradling

In which case I think your in the source of my personal VF loathing - adding cladd/id attributes to VF tags.

This case _might_ not be too bad (just painful).

Create new menu items for alpha and numeric lists, then write out either <ol class="alpha"> or <ol class="numeric"> as appropreate. You can then apply CSS styles to these classes.

Might work....

sarahwright

That's exactly the direction I stumbled towards yesterday. I created a custom button for alpha bullets and tied it to an event I created in ewebeditproevents.js. However, I wasn't sure how to close off the list once I created it. Here's the function I tied it to:

eWebEditProExecCommandHandlers["jsAlpha"] = function(sEditorName, strCmdName, strTextData, lData)
{
eWebEditPro.instances[sEditorName].asyncCallMethod("pasteHTML", ['<ol class=" lowerAlpha"><li>'], null, new Function());
}

It creates the list but when you start typing it bumps your text down to the next line so it isn't actually part of the list...