Section Editor Styling
A bug in 2.1.2, submitted by Nils on 09 November 2010
Announcement
Symphony's issue tracker has been moved to Github.
Issues are displayed here for reference only and cannot be created or edited.
Browse
Closed#420: Section Editor Styling
Some possible approaches:
- (Quick ‘n dirty): making the text shorter
(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:
.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.
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?
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
.
Done.
This issue is closed.
From the section editor:
<i>
) do not handle long content properly.