Deb Troxel 12 Years Ago Thanks Nate! Your blogs are always packed with great info. Please sign in to reply. Reply as... Cancel
Szymon Gołębiewski 12 Years Ago Nice article Nate. One question - does mobile theme works with all portlet or am I limited to just some of them? Please sign in to reply. Reply as... Cancel
wasim shaikh 12 Years Ago Thanks nate, nice article. Is there any YUI plugin availale for this? I want to use it in simple htmls.Thanks,Wasim Shaikh,http://microblog.wasimshaikh.com Please sign in to reply. Reply as... Cancel Nate Cavanaugh wasim shaikh 12 Years Ago @Szymon:In this case, it can work with any of them. Basically, it just depends on what portlets you'll style in which view. For some mobile devices, some portlets might make less sense (for instance, a flash portlet wouldn't work so well on most smart phones these days). But since its just CSS, the possibilities are pretty wide @wasim:Not yet, but I'll be pushing this one over to the YUI Gallery, so as soon as it's up, I can let you know Thanks all! Please sign in to reply. Reply as... Cancel
Nate Cavanaugh wasim shaikh 12 Years Ago @Szymon:In this case, it can work with any of them. Basically, it just depends on what portlets you'll style in which view. For some mobile devices, some portlets might make less sense (for instance, a flash portlet wouldn't work so well on most smart phones these days). But since its just CSS, the possibilities are pretty wide @wasim:Not yet, but I'll be pushing this one over to the YUI Gallery, so as soon as it's up, I can let you know Thanks all! Please sign in to reply. Reply as... Cancel
Jay Patel 12 Years Ago Nice article Nate..Thanks for sharing... Please sign in to reply. Reply as... Cancel
Shagul Khajamohideen 12 Years Ago Thanks Nate. This is a great step. I guess Jorge and team are addressing the different content for different devices part. Please sign in to reply. Reply as... Cancel
Jignesh Vachhani 12 Years Ago Very Nice Demo and Article Nate !!!! Thanks Please sign in to reply. Reply as... Cancel
Gem E 12 Years Ago This is a great feature and I got it to work nicely on my liferay except that it isn't getting picked up on the iphone (haven't tried it on an ipad yet). I noticed the viewport demo doesn't work correctly on the iphone either (it's being treated as desktop size 960px) - do you know why this may be? Please sign in to reply. Reply as... Cancel
Hossein Oloomi 12 Years Ago Dear Nate, <br>I want to use my own JavaScript calendar and date picker instead of aui-calendar and aui-datepicker all over Liferay. I want to replace my js files with those of aui, but clearly this will not work; what functions should my files have and what should they return? <br>Thanks in advance Please sign in to reply. Reply as... Cancel
Suraj Bihari 12 Years Ago Thanks for providing this helpful tutorial on responsive layouts. Olaf tipped this during the developer course! Please sign in to reply. Reply as... Cancel
Ben Chapman 12 Years Ago Nate, Thanks very much for this; however, I must not be doing something quite right as it doesn't seem to have any effect on our pages. Where would I put the call to AUI().use('aui-viewport')? I've tried doing it in the script section of the page (Manage>Page>Script), but that does not result in generating the expected classes in the HTML. We are EE customers and I can see that AUI().use... is inserted in the source of the HTML, but that's it.Can you provide a pointer to further information? Many thanks and sorry for the very basic question! Please sign in to reply. Reply as... Cancel Nate Cavanaugh Ben Chapman 12 Years Ago Hi Ben,Thanks for reaching out. The only thing I can think of that would cause this not to work is perhaps the version of EE you have isn't the latest service pack? This component was included in a service pack, so it's not available in earlier ones.If you get in touch with your account rep, they can probably get you a patch that would include just the files you need for this feature.If you are on the latest service pack and it's still no go, you can either get in touch with support to help debug your specific case, or you can create a forum thread and paste the link here and I'll take a look at it and see if I can spot anything.Thanks Ben, Please sign in to reply. Reply as... Cancel
Nate Cavanaugh Ben Chapman 12 Years Ago Hi Ben,Thanks for reaching out. The only thing I can think of that would cause this not to work is perhaps the version of EE you have isn't the latest service pack? This component was included in a service pack, so it's not available in earlier ones.If you get in touch with your account rep, they can probably get you a patch that would include just the files you need for this feature.If you are on the latest service pack and it's still no go, you can either get in touch with support to help debug your specific case, or you can create a forum thread and paste the link here and I'll take a look at it and see if I can spot anything.Thanks Ben, Please sign in to reply. Reply as... Cancel
Dave Weitzel 12 Years Ago Has this been carried over to 6.1? I do not see anything in CE 6.1 GA1. If not can someone write a log about the mobile device rules and what they are how to use them and examples?Would prefer the view-port was there so we don't have to do much with more guidance on how to use in custom themes Please sign in to reply. Reply as... Cancel
Steve C Groninga 12 Years Ago Nate this is really great stuff. Have you run into the following: works great on the desktop monitor (able to minimize browser window and the alternate css is used), but fails on an actual handheld device... ( iPhone, android, etc....) Please sign in to reply. Reply as... Cancel Nate Cavanaugh Steve C Groninga 12 Years Ago Hi Steve,I have run into an issue on Retina screens where the reported size wasn't being properly handled.In those cases, I had to set something like the following in the head of the document:<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />Let me know if that helps.Thanks, Please sign in to reply. Reply as... Cancel Nate Cavanaugh Nate Cavanaugh 12 Years Ago And Dave, yes this module is inside of 6.1 as well. As long as you call AUI().use('aui-viewport') in your theme, you should be good to go.HTH, Please sign in to reply. Reply as... Cancel Steve C Groninga Nate Cavanaugh 12 Years Ago Nate, Thanks for this tip! My initial tests seem to work perfectly! Now on to redesigning for these devices/smaller screens! Well Done! This certainly has a far reaching impact!Steve<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" /> Please sign in to reply. Reply as... Cancel
Nate Cavanaugh Steve C Groninga 12 Years Ago Hi Steve,I have run into an issue on Retina screens where the reported size wasn't being properly handled.In those cases, I had to set something like the following in the head of the document:<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />Let me know if that helps.Thanks, Please sign in to reply. Reply as... Cancel Nate Cavanaugh Nate Cavanaugh 12 Years Ago And Dave, yes this module is inside of 6.1 as well. As long as you call AUI().use('aui-viewport') in your theme, you should be good to go.HTH, Please sign in to reply. Reply as... Cancel Steve C Groninga Nate Cavanaugh 12 Years Ago Nate, Thanks for this tip! My initial tests seem to work perfectly! Now on to redesigning for these devices/smaller screens! Well Done! This certainly has a far reaching impact!Steve<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" /> Please sign in to reply. Reply as... Cancel
Nate Cavanaugh Nate Cavanaugh 12 Years Ago And Dave, yes this module is inside of 6.1 as well. As long as you call AUI().use('aui-viewport') in your theme, you should be good to go.HTH, Please sign in to reply. Reply as... Cancel Steve C Groninga Nate Cavanaugh 12 Years Ago Nate, Thanks for this tip! My initial tests seem to work perfectly! Now on to redesigning for these devices/smaller screens! Well Done! This certainly has a far reaching impact!Steve<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" /> Please sign in to reply. Reply as... Cancel
Steve C Groninga Nate Cavanaugh 12 Years Ago Nate, Thanks for this tip! My initial tests seem to work perfectly! Now on to redesigning for these devices/smaller screens! Well Done! This certainly has a far reaching impact!Steve<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" /> Please sign in to reply. Reply as... Cancel
(You) 11 Years Ago [...] Here is exactly what you need: http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/liferay-com-mobile-sites-and-responsive-layouts Marcar como inapropiado Por favor, identifíquese para poder... [...] Read More Please sign in to reply. Reply as... Cancel
(You) 11 Years Ago [...] Here is exactly what you need: http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/liferay-com-mobile-sites-and-responsive-layouts Flag Please sign in to flag this as inappropriate. Mark as an... [...] Read More Please sign in to reply. Reply as... Cancel Md Mohiuddin 11 Years Ago Hi , We have been trying to build a mobile theme in Liferay using repsonsive web design.We have included the line : AUI().use('aui-viewport'); within script tags and also included : <meta name="viewport" content="target-densitydpi=160dpi, width=device-width, minimum-scale=1, maximum-scale=1"> within the <head> tags of portal_normal.vmThe theme is working fine on Android , Nokia ,Apple mobiles but gives issues on Blackberry (OS 4).We have tested it on firefox browser for BB 8520 and the problem is that the web site rendered as a full site on Blackberry Firefox and does not use responsive layout.The client's major requirement is that the mobile theme should open up on Blackberry.Any suggestions in this regard will be highly welcome.Need urgent help on this.Regards,Md. Mohiuddin Please sign in to reply. Reply as... Cancel Mathon Gijsbers van Wijk Md Mohiuddin 11 Years Ago Hi,What would I need to do to have my theme support a width of 240 px?Thanks, Mathon Please sign in to reply. Reply as... Cancel
Md Mohiuddin 11 Years Ago Hi , We have been trying to build a mobile theme in Liferay using repsonsive web design.We have included the line : AUI().use('aui-viewport'); within script tags and also included : <meta name="viewport" content="target-densitydpi=160dpi, width=device-width, minimum-scale=1, maximum-scale=1"> within the <head> tags of portal_normal.vmThe theme is working fine on Android , Nokia ,Apple mobiles but gives issues on Blackberry (OS 4).We have tested it on firefox browser for BB 8520 and the problem is that the web site rendered as a full site on Blackberry Firefox and does not use responsive layout.The client's major requirement is that the mobile theme should open up on Blackberry.Any suggestions in this regard will be highly welcome.Need urgent help on this.Regards,Md. Mohiuddin Please sign in to reply. Reply as... Cancel Mathon Gijsbers van Wijk Md Mohiuddin 11 Years Ago Hi,What would I need to do to have my theme support a width of 240 px?Thanks, Mathon Please sign in to reply. Reply as... Cancel
Mathon Gijsbers van Wijk Md Mohiuddin 11 Years Ago Hi,What would I need to do to have my theme support a width of 240 px?Thanks, Mathon Please sign in to reply. Reply as... Cancel
Rui Maciel 11 Years Ago Hi, sorry for bothering but i don't know where to put the AUI().use('aui-viewport') declaration (i have already tried to put in a script inside a custom portlet but nothing happens). I just want my portal to adjust it size to the browser window. I have the liferay-portal-6.1.0-ce-ga1 version. Please can somebody help me? Please sign in to reply. Reply as... Cancel Nate Cavanaugh Rui Maciel 11 Years Ago Hi Rui,If you place it in your theme's main.js it should work.However, as mentioned above, what this does is add CSS classes to the HTML element. For the styling to actually change, you'll need to add CSS for those sizes to determine how it should look.I hope that helps Please sign in to reply. Reply as... Cancel Rui Maciel Nate Cavanaugh 11 Years Ago Many thanks!! I will try that =D Please sign in to reply. Reply as... Cancel
Nate Cavanaugh Rui Maciel 11 Years Ago Hi Rui,If you place it in your theme's main.js it should work.However, as mentioned above, what this does is add CSS classes to the HTML element. For the styling to actually change, you'll need to add CSS for those sizes to determine how it should look.I hope that helps Please sign in to reply. Reply as... Cancel Rui Maciel Nate Cavanaugh 11 Years Ago Many thanks!! I will try that =D Please sign in to reply. Reply as... Cancel
Rui Maciel Nate Cavanaugh 11 Years Ago Many thanks!! I will try that =D Please sign in to reply. Reply as... Cancel
Rui Maciel 11 Years Ago Sorry to bother again Nate but in the forum, they told me that the classic theme from the liferay portal has already this feature. I have the liferay portal CE 6.1.0 version but in my case that's not true. Is there any theme with this feature that i could download? Many thanks Please sign in to reply. Reply as... Cancel Rui Maciel Rui Maciel 11 Years Ago Nate, I resolved my issue, i just change the custom.css file in the ROOT of the portal.in "wrapper" i change the min-width: 960px;tomin-width: 320px;Thanks for all! Please sign in to reply. Reply as... Cancel
Rui Maciel Rui Maciel 11 Years Ago Nate, I resolved my issue, i just change the custom.css file in the ROOT of the portal.in "wrapper" i change the min-width: 960px;tomin-width: 320px;Thanks for all! Please sign in to reply. Reply as... Cancel
Dave Weitzel 11 Years Ago I have found a BIG problem with responsive design with OOTB Liferay 6.1 GA1 not sure if in GA2.the WYSIWYG editor puts full style conditions for images - it sets height and width styles (generally a no no anyway). As these are at the element level they cannot be overridden by say aui-view-lt720 img {max-width:50%"} definitions in a css file.How can we get the WYSWYG to behave in a responsive friendly manner, otherwise we have to edit the source of all our content! Please sign in to reply. Reply as... Cancel Nate Cavanaugh Dave Weitzel 11 Years Ago Hi Dave,This is something on CKEditor's side. I'm not sure if there are any out there that are responsive friendly per-se, but if you ever find one, Liferay allows you to swap out the editor.However, there are a couple of different ways to handle this without changing the editor:1. In your CSS, setting max-width actually should be respected, because the inline style is being set to width, not to max-width. When I test that scenario, max-width works fine.However, the issue with it is that the height is still set, so it will squish the image.What you can do is:.aui-view-lt720 img { height: auto !important; max-width: 50%; }This should make it so that the inline style is overwritten, but the image proportions are still maintained.2. The other option you have is to discourage or not allow images to be embedded in the editor, and instead, add a field for the image into the structure.This is what we a lot for the Liferay.com website. Usually, there are blocks where we want a paragraph of text and some accompanying image or any number of those. We'll create a repeatable structure, and allow those to be uploaded.In the template then we have more control over how that image is displayed with the text for the different breakpoints.The easiest of these approaches is probably #1 as it requires the least amount of change, but #2 provides you with ultimate control.I hope that helps Please sign in to reply. Reply as... Cancel Subhash Pavuskar Nate Cavanaugh 11 Years Ago Great Work Nate Cavanaugh !! Useful Article !! Please sign in to reply. Reply as... Cancel
Nate Cavanaugh Dave Weitzel 11 Years Ago Hi Dave,This is something on CKEditor's side. I'm not sure if there are any out there that are responsive friendly per-se, but if you ever find one, Liferay allows you to swap out the editor.However, there are a couple of different ways to handle this without changing the editor:1. In your CSS, setting max-width actually should be respected, because the inline style is being set to width, not to max-width. When I test that scenario, max-width works fine.However, the issue with it is that the height is still set, so it will squish the image.What you can do is:.aui-view-lt720 img { height: auto !important; max-width: 50%; }This should make it so that the inline style is overwritten, but the image proportions are still maintained.2. The other option you have is to discourage or not allow images to be embedded in the editor, and instead, add a field for the image into the structure.This is what we a lot for the Liferay.com website. Usually, there are blocks where we want a paragraph of text and some accompanying image or any number of those. We'll create a repeatable structure, and allow those to be uploaded.In the template then we have more control over how that image is displayed with the text for the different breakpoints.The easiest of these approaches is probably #1 as it requires the least amount of change, but #2 provides you with ultimate control.I hope that helps Please sign in to reply. Reply as... Cancel Subhash Pavuskar Nate Cavanaugh 11 Years Ago Great Work Nate Cavanaugh !! Useful Article !! Please sign in to reply. Reply as... Cancel
Subhash Pavuskar Nate Cavanaugh 11 Years Ago Great Work Nate Cavanaugh !! Useful Article !! Please sign in to reply. Reply as... Cancel
M. Ahamed Maqbool 11 Years Ago This is a great feature.Could we get sample theme war file or in market place? its will help us.Thank's Please sign in to reply. Reply as... Cancel Jack Bakker M. Ahamed Maqbool 11 Years Ago where say for two levels of nav, I envisionfor browser: show nav as usual (on mouseover of navItemLevel1 show navItemLevel2s)for tablet portrait and less: show only navItemLevel1s where onclick/touch of navitem; go to targetted page where then only show navItemLevel2s (under the navItemLevel1 u just went to)possible ? do themes need to be jsp for this or can this be done with velocity ? Please sign in to reply. Reply as... Cancel Jack Bakker Jack Bakker 11 Years Ago this is cool ; http://codepen.io/JasonAGross/full/kEhHm#but not what I am thinking in my last comment as I question menus being too tall...I think I should be posting in forum not hijacking this wiki Please sign in to reply. Reply as... Cancel
Jack Bakker M. Ahamed Maqbool 11 Years Ago where say for two levels of nav, I envisionfor browser: show nav as usual (on mouseover of navItemLevel1 show navItemLevel2s)for tablet portrait and less: show only navItemLevel1s where onclick/touch of navitem; go to targetted page where then only show navItemLevel2s (under the navItemLevel1 u just went to)possible ? do themes need to be jsp for this or can this be done with velocity ? Please sign in to reply. Reply as... Cancel Jack Bakker Jack Bakker 11 Years Ago this is cool ; http://codepen.io/JasonAGross/full/kEhHm#but not what I am thinking in my last comment as I question menus being too tall...I think I should be posting in forum not hijacking this wiki Please sign in to reply. Reply as... Cancel
Jack Bakker Jack Bakker 11 Years Ago this is cool ; http://codepen.io/JasonAGross/full/kEhHm#but not what I am thinking in my last comment as I question menus being too tall...I think I should be posting in forum not hijacking this wiki Please sign in to reply. Reply as... Cancel
Mario Grimaldi 11 Years Ago This is so cool!Thanks for your post and for this AUI module! Please sign in to reply. Reply as... Cancel
Kushal Jayswal 11 Years Ago Hey Nate Cavanaugh,Impressive article!Is there any way we can use the same with less efforts, manually?-regards:Kushal Jayswalhttp://kutec.co.inhttp://teckstack.com Please sign in to reply. Reply as... Cancel
Juan Antonio Girón 10 Years Ago Hi Nate, is it possible to create a responsive theme in Liferay 6.0.5 CE? Please sign in to reply. Reply as... Cancel Kushal Jayswal Juan Antonio Girón 10 Years Ago Yes. It's possible Juan.You need to overwrite some default Liferay CSS and all will work fine with @media query. Please sign in to reply. Reply as... Cancel Juan Antonio Girón Kushal Jayswal 10 Years Ago Thanks Kushal, could you give me an example or article on how to implement it?, Please. Please sign in to reply. Reply as... Cancel Kushal Jayswal Juan Antonio Girón 10 Years Ago Sorry I cannot let you know the site name.But I can share CSS.CSS:-------------------------------------------------/* common behaviour */.portlet-layout { display: table; width: 100%; }.portlet-column-first { padding-left: 0 !important; }.portlet-column-last { padding-right: 0 !important; }.portlet-column { padding: 0 1%; display: table-cell; vertical-align: top; }/* tablet behaviour */@media all and (min-width: 768px) and (max-width: 1024px) { .portlet-column { padding: 0 3% 0 0; display: table-cell; } .home .portlet-column { padding: 0 0 0 0; }}/* tablet behaviour - viewport change */@media all and (max-width: 767px) { .portlet-layout { display: block; } .portlet-column { display: block !important; padding: 0 !important; }}/* smartphone behaviour */@media all and (max-width : 480px) { .portlet-layout { display: block; } .portlet-column { display: block; padding: 0 !important; }} Please sign in to reply. Reply as... Cancel Juan Antonio Girón Kushal Jayswal 10 Years Ago Many thanks Kushal, I'll try it. Please sign in to reply. Reply as... Cancel
Kushal Jayswal Juan Antonio Girón 10 Years Ago Yes. It's possible Juan.You need to overwrite some default Liferay CSS and all will work fine with @media query. Please sign in to reply. Reply as... Cancel Juan Antonio Girón Kushal Jayswal 10 Years Ago Thanks Kushal, could you give me an example or article on how to implement it?, Please. Please sign in to reply. Reply as... Cancel Kushal Jayswal Juan Antonio Girón 10 Years Ago Sorry I cannot let you know the site name.But I can share CSS.CSS:-------------------------------------------------/* common behaviour */.portlet-layout { display: table; width: 100%; }.portlet-column-first { padding-left: 0 !important; }.portlet-column-last { padding-right: 0 !important; }.portlet-column { padding: 0 1%; display: table-cell; vertical-align: top; }/* tablet behaviour */@media all and (min-width: 768px) and (max-width: 1024px) { .portlet-column { padding: 0 3% 0 0; display: table-cell; } .home .portlet-column { padding: 0 0 0 0; }}/* tablet behaviour - viewport change */@media all and (max-width: 767px) { .portlet-layout { display: block; } .portlet-column { display: block !important; padding: 0 !important; }}/* smartphone behaviour */@media all and (max-width : 480px) { .portlet-layout { display: block; } .portlet-column { display: block; padding: 0 !important; }} Please sign in to reply. Reply as... Cancel Juan Antonio Girón Kushal Jayswal 10 Years Ago Many thanks Kushal, I'll try it. Please sign in to reply. Reply as... Cancel
Juan Antonio Girón Kushal Jayswal 10 Years Ago Thanks Kushal, could you give me an example or article on how to implement it?, Please. Please sign in to reply. Reply as... Cancel Kushal Jayswal Juan Antonio Girón 10 Years Ago Sorry I cannot let you know the site name.But I can share CSS.CSS:-------------------------------------------------/* common behaviour */.portlet-layout { display: table; width: 100%; }.portlet-column-first { padding-left: 0 !important; }.portlet-column-last { padding-right: 0 !important; }.portlet-column { padding: 0 1%; display: table-cell; vertical-align: top; }/* tablet behaviour */@media all and (min-width: 768px) and (max-width: 1024px) { .portlet-column { padding: 0 3% 0 0; display: table-cell; } .home .portlet-column { padding: 0 0 0 0; }}/* tablet behaviour - viewport change */@media all and (max-width: 767px) { .portlet-layout { display: block; } .portlet-column { display: block !important; padding: 0 !important; }}/* smartphone behaviour */@media all and (max-width : 480px) { .portlet-layout { display: block; } .portlet-column { display: block; padding: 0 !important; }} Please sign in to reply. Reply as... Cancel Juan Antonio Girón Kushal Jayswal 10 Years Ago Many thanks Kushal, I'll try it. Please sign in to reply. Reply as... Cancel
Kushal Jayswal Juan Antonio Girón 10 Years Ago Sorry I cannot let you know the site name.But I can share CSS.CSS:-------------------------------------------------/* common behaviour */.portlet-layout { display: table; width: 100%; }.portlet-column-first { padding-left: 0 !important; }.portlet-column-last { padding-right: 0 !important; }.portlet-column { padding: 0 1%; display: table-cell; vertical-align: top; }/* tablet behaviour */@media all and (min-width: 768px) and (max-width: 1024px) { .portlet-column { padding: 0 3% 0 0; display: table-cell; } .home .portlet-column { padding: 0 0 0 0; }}/* tablet behaviour - viewport change */@media all and (max-width: 767px) { .portlet-layout { display: block; } .portlet-column { display: block !important; padding: 0 !important; }}/* smartphone behaviour */@media all and (max-width : 480px) { .portlet-layout { display: block; } .portlet-column { display: block; padding: 0 !important; }} Please sign in to reply. Reply as... Cancel Juan Antonio Girón Kushal Jayswal 10 Years Ago Many thanks Kushal, I'll try it. Please sign in to reply. Reply as... Cancel
Juan Antonio Girón Kushal Jayswal 10 Years Ago Many thanks Kushal, I'll try it. Please sign in to reply. Reply as... Cancel