Forums » SEPHP Help and Tips

Mobile Viewing Question

    • 192 posts
    May 19, 2020 1:05 PM EDT

    Hi all

    When viewing my site on IOS and Android is there a way to make the Activity Feed first in the mobile presentation scroll list? Currently, no matter how I lay columns the column on right below always appears first. I changed layout to have Activity feed on left and right same results. Help? Gary

    • Moderator
    • 6057 posts
    May 20, 2020 4:58 AM EDT

    I've asked the SNS team to answer this for you.

    • 178 posts
    May 20, 2020 9:28 AM EDT

    +1 on this. I found it strange that the right column displays first when using a mobile device.

    Here is my picture of a grey catbird for good measure :-)

    This post was edited by abuk at May 20, 2020 1:20 PM EDT
    • Moderator
    • 6057 posts
    May 20, 2020 9:50 AM EDT

    Love it lol! I thought our SNS team was going to answer this this morning. She said she's checking with the designer as this is how the script has always worked on responsive designs, other than mobile app. The right column goes on top and then the left goes on bottom. It would need a customization to change. She'll post once she hears back if there's a simple solution. 

    • 192 posts
    May 20, 2020 10:24 AM EDT

    Hi all

    I'll await solution ... that is one awesome "catbird"! :-) Gary

    • 178 posts
    May 20, 2020 12:44 PM EDT

    PART 1



    I've found where the ordering is set in the database.Basically, every page has its own record in the database table engine4_core_pages.


    The content for each page is found in engine4_core_content.


    Each column in a container, which is a content type found on engine4_core_content.


    Potentially, you could switch the 'order' values of left, middle and right for all the relevant rows in



    PART 2 


    I've tried editing the order of the containers defined on the "Member Home Page", which is page_id 4 in the engine4_core_content table, so that middle has an order of 4, left an order of 5 and right an order of 6.


    This causes the containers that should appear on the left and right of the middle of the page to appear at the bottom of the page (to the left and right of each other), so it probably needs a CSS edit for the middle column as well.

     PART 3


    I've achieve the correct positioning by using CSS, however the middle column will no longer expand to fill the gaps left when the left and right columns are not populated. The CSS used is:


    .layout_middle { float:left; left:280px; position: relative; width: 630px; } .layout_left { position: relative; left: -630px; }


    That's not the right way to achieve it, as there should be a way to preserve the middle columns ability to auto-expand, but I'm at the limit of my time and knowledge now.

    This post was edited by abuk at May 20, 2020 1:18 PM EDT
    • Moderator
    • 50 posts
    May 21, 2020 3:10 AM EDT

     Hello Gary,


          As mentioned by Donna about the sequence of column display in Mobile Browser (Responsive View), this is how the script is coded. If you want to make any changes, then you can customize that as per your requirement.


    I had asked the team if we can provide you a quick fix, so if you need that you can contact our support team mentioning our discussion here, so they will help you with the code at


    I am afraid to post the code here, as many other clients can try and sometimes CSS changes can even break the site. So, we will suggest you changes as per the configurations & theme used on your site. 


    Thanks & Regards


    Team SNS

    This post was edited by SNS-Shubhra at May 21, 2020 3:11 AM EDT
    • 178 posts
    May 21, 2020 4:33 AM EDT
    Shrubra - What about using jQuery to reposition the elements when viewed on a mobile?
    • 178 posts
    May 21, 2020 4:33 AM EDT
    Shrubra - What about using jQuery to reposition the elements when viewed on a mobile?
    • Moderator
    • 50 posts
    May 21, 2020 4:38 AM EDT
    abuk said:
    Shrubra - What about using jQuery to reposition the elements when viewed on a mobile?

    That will depend on client's requirement how they want it.


    I usually dont prefer to paste code here in community as many other clients can try the same code and may break their site.

    There are many things which can affect the decision on what to choose. If anything can happen through CSS, then I prefer to write CSS in the custom file which do not get lost on upgrades.

    • 192 posts
    June 15, 2020 1:42 PM EDT

    Hi all

    Thanks for responding, thought it would be a simple fix so I'll pass on making any changes at this time. Thanks Gary

    • 178 posts
    June 30, 2020 4:19 PM EDT

    The following code has been confirmed as working on my production and dev site using SocialEngine 5.1 and the Serenity theme. It will not work on any page where there is no site header. The JavaScript is poor, but functional. I will update this post if and when I improve it.


    This Javascript code reorders the content to MIDDLE, LEFT, RIGHT whenever the single column view is triggered by a viewport smaller than 767px, and restores the default order when the viewport is larger than 767px:

    1. Go to Admin Panel > Appearence > Layout Editor, then select the Site Footer Section.
    2. Add a HTML block to the bottom of the page.
    3. Name the block ReorderOnMobile and paste the following code into the block before saving it.



    This post was edited by abuk at July 5, 2020 5:47 PM EDT
    • 178 posts
    July 5, 2020 5:49 PM EDT

    Code - This time it passes all the tests and works in any page that can be edited using the SocialEngine Layout Editor. It could probably be improved with an extra 'if' to check for whether or not there is a layout_middle class in the page before running, but if there isn't one the code crashes with an error that the user will never see.

    <script type="text/javascript"> function changeColumnOrder(){ var viewportWidth = window.innerWidth; var layoutMain = document.querySelector("#global_content > div > div.generic_layout_container.layout_main"); var layoutMiddle = layoutMain.querySelector("div.layout_middle"); if (viewportWidth < 767) { layoutMain.prepend(layoutMiddle); } else { layoutMain.append(layoutMiddle); } } changeColumnOrder(); </script>
    This post was edited by abuk at July 10, 2020 10:54 AM EDT
    • 178 posts
    July 7, 2020 11:13 AM EDT

    I have just updated the code in the previous post through wrapping the contents of the changeColumn order function in an extra if block:

    if (jQuery(document.activeElement).attr('type') !== 'text') {}

    This is because one of my users reported that the Android soft keyboard was unusable because the 'resizeevent' caused the keyboard to immediately hide whenever he selected a text box.

    This post was edited by Donna at July 7, 2020 11:31 AM EDT
    • 178 posts
    July 7, 2020 12:34 PM EDT

    I've changed the code again as the same user found another issue with the way the Android Software Keyboard displays when my code is used. I have removed the block described in my previous post and instead added a test to see if the div tags have already been manipulated by the code, and if they have, prevents the code from running again.

    • 178 posts
    July 7, 2020 1:01 PM EDT

    And yet another change....
    i've removed dynamic resizing altogether. Ignore anything on StackExchange that claims to fix the Android Software Keyboard problems when using a browser onresize event!

    • Moderator
    • 6057 posts
    July 7, 2020 2:21 PM EDT

    Gee, android seems a bit difficult. Thanks for all the help here.

    • 43 posts
    July 10, 2020 7:45 AM EDT

    I also have this problem. Great work Abuk.

    Will there be a solution form socialengine side upcomming in a update or do we have to apply this manual update?

    • Moderator
    • 6057 posts
    July 10, 2020 8:03 AM EDT

    This isn't in our feature request section so at the moment it is not under consideration.