Webmail Navigation Bar in 11.48
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: [url=http://blog.cpanel.net/upcoming-changes-to-the-cpanel-end-user-webmail-experience/]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.
-
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! 0 -
Hello WhiteDog, I'd actually suggest making these suggestions in the Features site ([url=http://features.cpanel.net]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! 0 -
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. 0 -
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). 0 -
Link to feature request: [url=http://features.cpanel.net/responses/remove-iframe-from-webmail-paper-lantern-skin]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. iframe#mailFrame { border: 0px; height: calc(100vh - 125px); }
...or...iframe#mailFrame { border: 0px; height: 100vh; padding-top: 63px; padding-bottom: 63px; margin-bottom: -62px; margin-top: -62px; }0 -
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. 0 -
Sounds like some sort of browser caching issue. 0 -
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.0 -
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 ? 0 -
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? 0 -
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:0 -
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:
0 -
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.0 -
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. Add the following styles to your custom css file. 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.0 -
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. 0 -
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.0 -
I've made some further adjusments to compact the footer and gain more useable height and other aesthetic adjustments. iframe#mailFrame { border: 0px; height: calc(100vh - 95px); } #wrap { min-width: initial !important; margin: 0 auto -45px !important; padding: 0 0 40px !important; } footer { min-height: 40px !important; } footer .navbar-nav>li>a { padding: 10px; } footer .navbar { min-height: 40px !important; margin-bottom: 0px !important; } footer .navbar-brand { padding: 0px !important; height: 40px !important; } header .navbar-cpanel { border-color: rgba(234, 234, 234, 0.5); }
Another smaller window... ...and for large screens roundcube still fills the browser height unlike the cPanel default which stops at about 945px height for the Roundcube section leaving a bunch of unused whitespace.0 -
kdean - Thanks! MUCH better, at least in the browser I'm in at the moment. There's no doubt this should be baked in, not a user-hack. Thanks for sharing! For anyone else that stumbles across this, I'll update if I encounter any issues relating to this. Otherwise I recommend it so far. 0 -
Just a note, in IE I'm still seeing just a bit of left/right scrolling. :) 0 -
IE is a little funky, and scrollbars arbitrarily come and go... can't say I'm surprised since historically IE has always been a poor renderer compared to Safari, Chrome and Firefox in my experience. 0 -
everyone, the double scrollbar should be addressed in an upcoming build released on EDGE. (I'll have an official internal case number as my team gets closer to merging the fixes into the upstream). We did reference this thread quite a bit in addressing the problem so I want to say a big THANK YOU for this conversation. Additionally we are reconsidering the current webmail experience based on the feedback re the iframe technique we are using. At present we have a few ideas, but no particular idea has emerged as the one to pursue. 0 -
...and for large screens roundcube still fills the browser height unlike the cPanel default which stops at about 945px height for the Roundcube section leaving a bunch of unused whitespace.
You could try hiding the footer with display:none, which gives no useful information IMO, and increase the size of Roundcube. Then if you "unsticky" the header, when you scroll down past it you can use all the screen real estate, although you will have a vertical scrollbar.0 -
Just a note, in IE I'm still seeing just a bit of left/right scrolling. :)
I found that if I change "min-width: initial !important" to "min-width: 0 !important" then it also works in IE.0 -
Here is what i came up with to remove the frame from Roundcube entirely. It should be put in /scripts/postupcp so that it is run after cpanel updates: replace '' '' -- /usr/local/cpanel/base/3rdparty/roundcube/skins/larry/includes/header.html
0
Please sign in to leave a comment.
Comments
27 comments