Symphony.

From the section editor:

• It seems like back-end notes (those grey texts wrapped in <i>) do not handle long content properly.
• “Hide this section from back-end menu” and the navigation group selection seem to be a bit misaligned.

Attachments:

sym_sectioneditor-styling.png

Some possible approaches:

1. (Quick ‘n dirty): making the text shorter

2. (More elegant but not perfect):

   Add in forms.css the following rules:

   div > label > i {
       width: 60%;
       text-align: right;
       height: 16px;
       overflow: hidden;
   }
   div > label > i:hover {
       height: auto;
       background: #fff;
   }
   

   Result:

   

   On hover:

   

Attachments:

Schermata-1b.png and Schermata-1.png

.group > div > label > i {
    width:45%;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align:right;
}

Another option is to fill the title attribute.

Attachments:

Screen shot 2010-11-19 at 11.16.34 AM.png and Screen shot 2010-11-19 at 11.14.10 AM.png

text-overflow: ellipsis;

Cool! I was looking for a way to get exactly what you did :) I think that it would be a good idea to use your solution and combine it with the “on hover” mechanism I suggested in my comment above. What do you think?

Is this something that works cross-browser?

http://www.quirksmode.org/css/contents.html#t413 http://www.quirksmode.org/css/contents.html#t16

The intersection of the two is:

• IE 7+
• Safari 4+
• Chrome 4+
• Opera 10.10+ (needs the prefix -o-)

As far as Firefox is concerned, text-overflow isn’t supported, but it is still possible to view the whole string when the cursor hovers over it.

@eKoeS I didn’t like the idea of breaking the text box on hover, it’s something that doesn’t combine with Symphony. Instead we can play with width.

.group > div > label > i:hover {
    background:#fff;
    width:auto;
}

We should definitely use the “on hover” mechanism but not sure how yet.

What if the hover background was given some opacity to make it more obvious that the textbox is being overlaid by something else:

rgba(255, 255, 255, 0.5);

Maybe setting the title attribute is enough?

Maybe setting the title attribute is enough?

As far as I know browsers truncate title attributes at different lenghts (that it, there doesn’t seem to be a standard, but correct me if I’m wrong). That’s why I think it’s better to use a pseudo-class like :hover.

What if the hover background was given some opacity to make it more obvious that the textbox is being overlaid by something else

It’s a good idea. Submenus in the top navigation are shown with a semi-transparent background, so this solution looks consistent across the backend.

Edited

.group > div > label > i {
    float: right;
    width: 45%; /* 45? 60? Mhhh */
    padding: 0 1em;
    height: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: help;
}
.group > div > label > i:hover {
    white-space: normal;
    height: auto;
    background: rgba(255, 255, 255, 0.8);
}

Just set text-align to right and done. Beautiful.

Alternatively, it is possible to replace width with max-width so that setting text-align to right is no longer necessary.

I’m wondering if it is the case to target help messages that are inside the duplicator. It hasn’t been necessary so far but it might be in the future. What’s your opinion?

https://github.com/rainerborene/symphony-2/commit/7b668a92dcb58ef0a6db8e729d46a3c5bda07125

Hi Rainer, I don’t think using text-align: right is a good idea after all. I’ve uploaded two small videos showing that usign max-width is a better approach (unfortunately I can’t get Screenr working ‘cause I’m on Arch64). Check them out.

With width + text-align: http://dl.dropbox.com/u/4096074/symphony/out.ogv

With max-width: http://dl.dropbox.com/u/4096074/symphony/out-1.ogv

max-width works in IE? Can you post your CSS changes?

max-width works in IE?

Doesn’t work in IE lte 6, but AFAIK the backend is not meant to work on IE (correct me if I’m wrong).

Can you post your CSS changes?

Just remove text-align: right and replace width with max-width.