NOTE:: Before reporting an issue, make sure you are running the latest version, currently 3.3.1

View Issue Details Jump to Notes ] Print ]
IDProjectCategoryView StatusDate SubmittedLast Update
0016766phplist applicationInterface - Administratorpublic28-03-13 17:1019-06-13 13:00
PlatformOSOS Version
Product VersionSVN 
Target Version2.11.11Fixed in Version2.11.11 
Summary0016766: Table columns all have the same width causes clumsy layout
DescriptionUsing SVN trunk version.

The default theme has some CSS that makes all columns in tables have the same width.

In most cases this causes tables to look very clumsy, e.g. see the event log page where the narrow message column makes it difficult to use.

I think that it is these lines in file admin/ui/dressprow/css/style.css

    table-layout: fixed;
Steps To ReproduceView the event log page.
TagsNo tags attached.
Attached Files

- Relationships Relation Graph ] Dependency Graph ]

-  Notes
mariez (developer)
09-04-13 20:27

Hi Duncan.

Yes, that is the style who makes that.
But that style also force to cut words, and thats necessary for urls and long emails addresses, specially in small screen resolutions, where the table structure breaks without that.
I know it is a too arbitrary solution, but for the moment is the only one.
If you don't want it, just remove the line: table-layout: fixed;

duncanc (developer)
27-04-13 15:50

I found this technique of switching CSS for narrow screens [^]

Adding the CSS below to style.css and removing table-layout: fixed; helped to display the page with dynamic column widths at usual page width (>= 1024), but changed to fixed column widths when I narrowed the browser window.

@media screen and (max-width:720px){
        table-layout: fixed;

The value of 720 might be a bit too small.
mariez (developer)
27-04-13 18:09

This is a very usefull technique. But the urls can be very very long, even for big screens. I believe that the best solution is to find a way to cut urls, exposing just a part, and the complete on mousehover (like the Title). This is possible using javascript, but better using php for those who use javacript disabled. What do you think?
mariez (developer)
10-06-13 17:19

Hi Michiel

I think the better way to do this is not showing the "http://www.", [^] and show only the next 8 characters of each url adding "..." after that, and with the complete url on the title. After you do this change please assign me this issue back so i can free the column width on tables.
mariez (developer)
10-06-13 17:21
edited on: 10-06-13 17:22

May be you can do a function for manage different characters limit, so when url is into a table limit length to 8 characters, and when is outside a table limit length to 15, for example.

mariez (developer)
10-06-13 17:29
edited on: 10-06-13 17:30

same thing is need it for email addreses...

michiel (manager)
10-06-13 20:12

I do that here already: [^]

but I can limit it a little more

Can you give me the URLs (In the above dev site) where this needs to happen?

Also what do you want it to be the maximum lenght it has?

At the moment at a certain length (20) I take the first 10 and the last 10 and add ... between them,.
mariez (developer)
10-06-13 21:28

In you example limit to 15 the url [^]

Here limit to 15 the urls inside table (Available URLs) [^]

Here limit to 30 the url in the title: [^]

Here limit to 15 the email address inside table (Message open statistics) [^]

Here limit to 30 the address in the title [^]
And in same window in Subscription tab, limit to 20 de http_referer inside table.

Here limit to 30 de address in the title: [^]
And limit to 10 de Unique ID inside table.

Here limit to 30 de url in the title [^]
and limit to 15 the address inside table (SUBSCRIBER CLICK STATISTICS)

Here limit to 15 the url inside table [^]

Here limit to 30 the url in the title [^]

Here limit to 20 de address inside table [^]
mariez (developer)
10-06-13 21:32
edited on: 10-06-13 21:36

Here [^]
limit to 15 the urls and email addresses inside table

And here limit to 15 the email address inside talbe [^]

Here limit to 15 the url inside table [^]

michiel (manager)
11-06-13 00:29

briliant, thanks
michiel (manager)
14-06-13 15:06

I've done through quite a few of them, but it may be useful to remove the restriction in CSS so it is more visible where it still needs changing.
mariez (developer)
14-06-13 16:59

ok, done. I'm waiting the dev.phplist to update. In my local copy
i see a problem in small screens on: /lists/admin/?page=users
mariez (developer)
14-06-13 17:04

may be we can show just the user on email addresses, and the complete address on title. I mean as a rule.
michiel (manager)
19-06-13 13:00

I think I found all the places. I didn't reduce the size as much as you indicated in places, because then it looks really weird on the pages in normal size. Eventually the mobile version is less prevalent, and should be second stage.

If you find any other places let me know.

Copyright © 2000 - 2017 MantisBT Team
Powered by Mantis Bugtracker