Webmail Navigation Bar in 11.48

WhiteDog

Well-Known Member
Feb 19, 2008
142
6
68
In cPanel 11.48 the behaviour of the Webmail login was changed so that you are directly presented with the Webmail client of your choice. For those who have not seen or tried this, it's best explained here: Upcoming changes to the cPanel end-user webmail experience in 11.48 | cPanel Blog

While I welcome this change in behaviour, I must say that the top and bottom "navigation bars" take away quite some screen real-estate while they will hardly be used. Also on bigger screens, RoundCube is only taking up about 75% of the space and not using all of the free space.

Some added functionality to hide and/or reduce the navigation bars after a few seconds would probably be welcomed.
 

WhiteDog

Well-Known Member
Feb 19, 2008
142
6
68
To better illustrate, this is what RoundCube looks like on cPanel 11.48.0.5 / paper_lantern / Chrome 40.0 / OS X 10.10.2 / 2560x1440 resolution:

/http://i60.tinypic.com/167joxy.jpg

I'm sure you'll agree that this can be improved upon :)
Keep up the good work guys!
 

cPanelTristan

Quality Assurance Analyst
Staff member
Oct 2, 2010
7,607
40
248
somewhere over the rainbow
cPanel Access Level
Root Administrator
Hello WhiteDog,

I'd actually suggest making these suggestions in the Features site (cPanel Feature Requests), since they are feature change requests for interface revisions for the navigation bar. Making this a feature request would be ideal, since then users can vote and provide suggestions.

If you need any help with having the feature request approved, I'd be happy to approve it once it's been submitted. Simply post back here or message me the feature request link.

Thanks!
 

cPanelAdamF

cPanel Product Owner
Staff member
Mar 21, 2013
252
67
153
Houston TX
cPanel Access Level
DataCenter Provider
Twitter
Thanks for the constructive critique, WhiteDog! When it comes to that navigation bar, we reused the nav we implemented in Paper Lantern so that customers would not have to maintain a separate Style for the cPanel-side of Paper Lantern vs the webmail-side of Paper Lantern. We hope that the reuse of Styles from the cPanel-side of Paper Lantern will keep the maintenance cost of customizing cPanel low and approachable for everyone.

I definitely understand the concern about it eating too much space in the interface as a result of this reuse, though. Right now, the webmail clients appear in an iframe which does it's best to fill your browser window.

When it comes to that top-nav throughout the Paper Lantern interface, I don't think we're quite happy with it yet. It's a big improvement and simplification over previous navs that we've implemented in older-soon-to-be-deprecated themes...but we can certainly do more to make it even better.
 

garyhoffmann

Registered
Feb 12, 2015
1
0
1
cPanel Access Level
Reseller Owner
The iframe height is such that there is scrolling is required to get to the bottom of the webmail client. It appears to be set to 950px regardless of the available space in the browser window. Customers are asking me to take them back to the X3 interface which sucks from a cpanel perspective, but they rarely see cpanel - what they see is webmail. If the iframe could at least take into account the actual and real size of the browser and then actually and correctly resize if the window resizes would be so much better. It would be even better if it wasn't an iframe at all. Now there are two headers and two footers on the screen.

Please allow for a webmail skin separate from the cpanel skin, especially if paper_lantern is used.

Thanks (and yes, I have put in a feature request as well, but wanted to put this on the forum).
 

kdean

Well-Known Member
Oct 19, 2012
369
61
78
Orlando, FL
cPanel Access Level
Root Administrator
Link to feature request:

Remove iframe from webmail paper_lantern skin | cPanel Feature Requests

Some notes that I posted there that may be helpful for some if you can add custom css to paper lantern yet. (I'm just getting familiar with it, so I'm not sure of it's customizability yet.)

One option is to use some more advanced css3 on the iframe which older browsers would have problems with. (see below)

While not perfect adding one of the following in the css would improve things for recent browsers in regard to the center frame filling the vertical space.

Code:
iframe#mailFrame {
     border: 0px;
     height: calc(100vh - 125px);
}
...or...

Code:
iframe#mailFrame {
     border: 0px;
     height: 100vh;
     padding-top: 63px;
     padding-bottom: 63px;
     margin-bottom: -62px;
     margin-top: -62px;
}
 
Last edited:
  • Like
Reactions: stormy

kdean

Well-Known Member
Oct 19, 2012
369
61
78
Orlando, FL
cPanel Access Level
Root Administrator
cPanel take note. There's a bug with the instructions on:

https://documentation.cpanel.net/display/PLD/4+-+Apply+a+Style

In regard to applying a default style as the root uer, the instructions end with the command:

Code:
ln -s /var/cpanel/customizations/styled/$style_name/ default_style
But the I had to remove the trailing slash for it to work:

Code:
ln -s /var/cpanel/customizations/styled/$style_name default_style
 
  • Like
Reactions: joako

stormy

Well-Known Member
Nov 22, 2003
160
14
168
Spain
cPanel Access Level
Root Administrator
Wow, getting lots of complaints about this one since we switched from Rvskin to Paper Lantern. I'm going to go through the CSS fix and see what happens. What a terrible idea! Some customers are even getting double scroll bars.
 

stormy

Well-Known Member
Nov 22, 2003
160
14
168
Spain
cPanel Access Level
Root Administrator
I have been able to deploy the suggested fixes but I can't hide the nav bar. I've applied this example to "unstick" the nav bar:
https://documentation.cpanel.net/display/PLD/2+-+Stylesheet+Examples

I've also hidden the footer with display:none. My current style for the iframe is:

Code:
iframe#mailFrame {
     border: 0px;
     height: 100vh;
     padding-top: 0;
     padding-bottom: 0;
     margin-bottom: -62px;
     margin-top: 0;
}
This, with the non-sticky header, at least allows you to scroll past the header. However, I'm not an expert and I might be messing up other stuff...
 

stormy

Well-Known Member
Nov 22, 2003
160
14
168
Spain
cPanel Access Level
Root Administrator
Sounds like some sort of browser caching issue.
No. The new webmail interface was obviously designed in a large screen, so the issues didn't show up. Putting roundcube inside an iframe is a terrible idea.

With this design, it's very easy to:
-See the main scroll bar (because your screen is smaller than expected by the designer)
-See another scroll bar in a long message (this is roundcube at work though)
-Potentially there could be a third scrollbar inside the iframe, but I haven't seen it.

Meanwhile, an almost useless header and footer take up a sizable chunk of your screen real estate, and you are forced to scroll all over the place to read and reply to messages.

Even on a larger screen, the "sticky" header causes you to lose the "send" buttons while you are typing an email.
 

Agics

Member
May 16, 2013
16
0
1
Netherlands
cPanel Access Level
Root Administrator
Hi all,

I really like the information bar above webmail, with the webmail preferences and the company logo.I know some people reported this before but alignment of the preference button and the logo is not consistent with the iframe containing the webmail.
After updating to 11.50.0 (build 9), using Paper Lantern things seem worse. The iframe has now a width of 100% of my browser screen. However, the information bar is stuck to a fixed width, probably set by bootstrap. So where my webmail is 1920px width, the logo and button are in a frame of 1300px. This gives in my opinion a very ugly layout.
Has somebody any tips to set the iframe width to match the width of the info bar ? Or the other-way around ?
 

Attachments

joako

Well-Known Member
Aug 7, 2003
112
2
168
cPanel Access Level
DataCenter Provider
The iframe in the webmail is hardcoded to 950px. On a Windows PC with a 1920x1080 monitor with Google Chrome set to 100% zoom this causes scrolling. This bug is reported since months ago. Instead of fixing it you spend time redesigning your logo and loading it into Cpanel updates, so is there any plan to fix the actual bug instead of implementing un-needed cosmetic changes?
 

stormy

Well-Known Member
Nov 22, 2003
160
14
168
Spain
cPanel Access Level
Root Administrator
The iframe in the webmail is hardcoded to 950px. On a Windows PC with a 1920x1080 monitor with Google Chrome set to 100% zoom this causes scrolling. This bug is reported since months ago. Instead of fixing it you spend time redesigning your logo and loading it into Cpanel updates, so is there any plan to fix the actual bug instead of implementing un-needed cosmetic changes?
Take a look at my post about unsticking the nav bar and modifying the style. That one helps. It's quite a bit of work though.

You still have to scroll initially past the navbar, but once you do that, Webmail behaves almost normally. Except you still lose the unread messages count, as per this thread:

https://forums.cpanel.net/threads/c...-count-for-roundcube-in-paper-lantern.452302/
 

joako

Well-Known Member
Aug 7, 2003
112
2
168
cPanel Access Level
DataCenter Provider
Take a look at my post about unsticking the nav bar and modifying the style. That one helps. It's quite a bit of work though.

You still have to scroll initially past the navbar, but once you do that, Webmail behaves almost normally. Except you still lose the unread messages count, as per this thread:

https://forums.cpanel.net/threads/c...-count-for-roundcube-in-paper-lantern.452302/
That's nice but I would prefer CPanel just handle their bug reports instead of ignoring them.
 

brt

Well-Known Member
Jul 9, 2015
103
9
68
US
cPanel Access Level
Root Administrator
Sounds like some sort of browser caching issue.
This is NOT browser caching. It's a poor iframe implementation. Actually, most iframe implementations are poor.

Try viewing standard Paper Lantern webmail on a smaller screen -- 1024x769 or 1280x1024. You'll have scrollbars IN the iframe for Roundcube itself, and you'll have scrollbars FOR the iframe.

Either make the iframe a -regular- actual frame, with the bottom pane being native roundcube and the top being the toolbar, or create a custom Roundcube theme with the toolbar on top.

LOTS of complaints, and a definite step backward from the old x3 webmail.
 
  • Like
Reactions: joako

kdean

Well-Known Member
Oct 19, 2012
369
61
78
Orlando, FL
cPanel Access Level
Root Administrator
Just repeating my fix instructions that keep the cpanel bars but better manages the iframe for less double scrollbar appearance in recent browsers.... just in case some have missed it.

You have to create a style.css file in your own style folder. This stylesheet applies to all of paper lantern, not just webmail.

https://documentation.cpanel.net/display/PLD/0+-+Navigate+to+the+Style+Directory

Then if you want to set your custom modifications as the default for Paper Lantern, follow these instructions:

http://blog.cpanel.com/how-to-set-a-default-style-with-paper-lantern/

Add the following styles to your custom css file.

Code:
iframe#mailFrame {
     border: 0px;
     height: calc(100vh - 115px);
}

#wrap {
    min-width: initial !important;
}
This has worked well for me for both small and large screens.


webmail_small2.png

webmail_small3.png
 
Last edited by a moderator:

brt

Well-Known Member
Jul 9, 2015
103
9
68
US
cPanel Access Level
Root Administrator
My users are complaining more about small screens, but I'll see if I have time to try your fix and see if it helps with that too.

I don't understand why we're having to jump through hoops like this to get something that's.... acceptable.
 

kdean

Well-Known Member
Oct 19, 2012
369
61
78
Orlando, FL
cPanel Access Level
Root Administrator
My users are complaining more about small screens, but I'll see if I have time to try your fix and see if it helps with that too.
My smaller screenshot is from approximately 1024x768. Roundcube itself has a minimum width of 901px so I wouldn't really recommend smaller that that since you will have horizontal scrolling. My fix at least allows you to resize down to the roundcube width. For some reason cPanel sets a minimum width of 1300px by default.