14 Replies Latest reply on Sep 23, 2016 5:37 AM by cgarnitz

    Jive 8 Responsive design unusable with Widget groups.

    jameswright

      Is there any css out there which can help with Jive 8 css responsive issues. All our sites, places, communities are completely unusable at the lowest responsive setting because it appears the widget container just gets hidden.

       

      We are hoping the widgets container could be responsive as well instead of just hidden.

       

      Has anyone done this css work yet at Jive on the widgets container responsiveness?


      Ryan Rutan

       

      Kind regards,

      James

        • Re: Jive 8 Responsive design unusable with Widget groups.
          jlevi

          The widget overview pages are not responsive and I think they are excluded from the responsive mobile experience altogether.  You would have to switch to Tiles pages.

          2 people found this helpful
          • Re: Jive 8 Responsive design unusable with Widget groups.
            mattdickens

            I stumbled across this last month and found that overview pages and widgets work just perfectly on mobile and that a single line within jive-responsive.css was simply hiding a whole bunch of stuff

             

            @media only screen and (max-width:40em) a MASSIVE list of ids and classes of everything on an overview page {

                 display: none !important;

            }

             

            The advice we got from Jive was that the correct behaviour and functionality of the widgets could not be guaranteed so customise at your own risk.

             

            Certainly tempting with the current disparity between tiles and widgets.

            1 person found this helpful
              • Re: Jive 8 Responsive design unusable with Widget groups.
                czurcher

                Yeah, Jive won't guarantee the widget behavior, but we've not had a problem. The first thing we did was add a "show on mobile" or "show on desktop" or "show on both" flag to the html widget and that went a long way because then you can target it to just mobile or desktop or both. It's not that hard to make html widgets responsive but some are certainly easier than others, so if you really can't make it responsive, you can set it to desktop only and that will then take care of it looking like crap on mobile.

                 

                We've not really had any issues with the OOTB widgets on mobile otherwise.

                 

                Christy

                  • Re: Jive 8 Responsive design unusable with Widget groups.
                    mattdickens

                    Hi Christy

                     

                    To save us the hassle of working out which elements to unhide, could you share the CSS you added to your environment and through what means so we might experiment in our Devt environment?

                     

                    Thanks

                    Matt

                      • Re: Jive 8 Responsive design unusable with Widget groups.
                        czurcher

                        Sure, Matt Collinge our lead developer can give you all the details.

                        (That way he'll get the credit since he's the one who figured out how to do it)


                        Christy

                          • Re: Jive 8 Responsive design unusable with Widget groups.
                            mattdickens

                            Perfect - I know Matt. He and I have swapped code snippets in the past.

                            • Re: Jive 8 Responsive design unusable with Widget groups.
                              mcollinge

                              Here you go.. nearly each change is commented so you can see what it does & whether you want that change. We have a couple of our own CSS classes that allow us to target content to desktop or mobile (e14-target-mobile, and e14-target-desktop). These changes work really well for us.. no need to worry about tiles, and you get a good experience on mobile now

                               

                              .e14-target-mobile  { display:none; }
                              .jive-widget-content-edit .e14-target-mobile { display:block } /* Display in edit mode! */
                              
                              @media only screen and (max-width:40em) {
                              
                                  /* Show widgets on overview pages, even on mobile devices */
                                  #jive-widget-content > div, #jive-widget-content > div > div, .jive-widget {display:block!important;}
                                  #jive-widget-container { display:block; }
                                  .jive-widget-container-large { display:block; }
                                  .jive-widget-container-small { display:block; }
                              
                                  /* Hide tiles for now */
                                  .j-column-responsive .j-tile { display:none; }
                                 
                                  .e14-target-desktop { display:none!important; }
                                  .e14-target-mobile { display:block!important; }
                                 
                                  /*Enhancements to out of the box widgets*/
                                  .jive-table-cell-author{display:none}
                                  .jive-table-cell-avatar{display:none}
                                 
                                  /* Force legacy breadcrumbs to display on mobile */
                                  #jive-breadcrumb { display:block!important; }
                              
                                  /* Unfix site header on mobile */
                                  #j-header-wrap.fixed { position:absolute !important; }
                              }
                              
                              3 people found this helpful
                                • Re: Jive 8 Responsive design unusable with Widget groups.
                                  mattdickens

                                  Matt Collinge - you are a hero!

                                   

                                  I actually read this when you posted it but knew it wasn't something we would implement globally in our theme.

                                   

                                  Today I realised we could implement this on a group by group basis by simply adding an html widget to the bottom of those overview pages we wanted to be responsive.

                                   

                                  Steps

                                  1. Create an html widget on your overview page.

                                  2. Copy and paste the following in, choose to hide the header and save it (it will require an admin or someone who can save css into html widget)

                                   <style>
                                  .jive-widget-content-edit { display:block } /* Display in edit mode! */  
                                   
                                  @media only screen and (max-width:40em) {  
                                   
                                    /* Show widgets on overview pages, even on mobile devices */  
                                    #jive-widget-content > div, #jive-widget-content > div > div, .jive-widget {display:block!important;}  
                                    #jive-widget-container { display:block; }  
                                    .jive-widget-container-large { display:block; }  
                                    .jive-widget-container-small { display:block; }  
                                   
                                    /* Hide tiles for now */  
                                    .j-column-responsive .j-tile { display:none; }  
                                   
                                   
                                    /*Enhancements to out of the box widgets*/  
                                    .jive-table-cell-author{display:none}  
                                    .jive-table-cell-avatar{display:none}  
                                   
                                    /* Force legacy breadcrumbs to display on mobile */  
                                    #jive-breadcrumb { display:block!important; }  
                                   
                                    /* Unfix site header on mobile */  
                                    #j-header-wrap.fixed { position:absolute !important; }  
                                  } 
                                  </style>  
                                  
                                  

                                  3. Enjoy responsive overview page.

                                  2 people found this helpful