Announcement

Collapse
No announcement yet.

Mobile Grid Menu: Search instead of Blogs, Friends or What's New

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Peter Walker
    replied
    Click image for larger version

Name:	mobile_gridmenu.jpg
Views:	39
Size:	79.0 KB
ID:	4380536

    As nobody here appears to have a clue how to fix this, I have been experimenting and the only fix I could find that works, is to move the search bar below the buttons. I have not worked out how to stop the page scrolling (lots of white space on the bottom of the page), so if someone could help me fix that, it would be most welcome. Frankly, I am surprised that this error is still there, considering how long vB 4 has been on the market.

    I enclose my corrected code for Template: mobile_gridmenu (id: 12563) in the Default Mobile Style.

    Code:
    {vb:stylevar htmldoctype}
    <html xmlns="http://www.w3.org/1999/xhtml"<vb:if condition="$vboptions['enablefacebookconnect']"> xmlns:fb="http://www.facebook.com/2008/fbml"</vb:if> dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}" id="vbulletin_html">
    <head>
        {vb:raw headinclude}
        <title>{vb:raw vboptions.bbtitle}</title>
        {vb:raw headinclude_bottom}
    </head>
    <body>
    
    {vb:raw header}
    
    {vb:raw navbar}
    
    <div id="pagetitle" class="pagetitle ui-bar-b">
        <h1 class="pagetitle">{vb:rawphrase vbulletin_menu}</h1>
    </div>
    
    <div data-role="content">
        <div class="ui-grid-b ui-body-c gridmenu">
            <vb:if condition="$show['articles']">
            <div class="ui-block-b">
                <div class="iconcontainer">
                    <a href="<vb:if condition="$vboptions['vbcms_url']">{vb:raw vboptions.vbcms_url}/{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}<vb:else />{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}</vb:if>" rel="external" class="gridmenuicon"><img src="{vb:stylevar imgdir_mobile}/articles.png" /></a>
                    <a href="<vb:if condition="$vboptions['vbcms_url']">{vb:raw vboptions.vbcms_url}/{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}<vb:else />{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}</vb:if>" rel="external">{vb:rawphrase articles}</a>
                </div>
            </div>
            </vb:if>
            <div class="ui-block-b">
                <div class="iconcontainer">
                    <a href="{vb:link forumhome}" rel="external" class="gridmenuicon"><img src="{vb:stylevar imgdir_mobile}/forums.png" /></a>
                    <a href="{vb:link forumhome}" rel="external">{vb:rawphrase forums}</a>
                </div>
            </div>
            <vb:if condition="$show['blogs']">
            <div class="ui-block-b">
                <div class="iconcontainer">
                    <a href="{vb:raw $vboptions.vbblog_url}{vb:if "$vboptions['vbblog_url']", '/', ''}blog.php{vb:raw session.sessionurl_q}" rel="external" class="gridmenuicon"><img src="{vb:stylevar imgdir_mobile}/blogs.png" /></a>
                    <a href="{vb:raw $vboptions.vbblog_url}{vb:if "$vboptions['vbblog_url']", '/', ''}blog.php{vb:raw session.sessionurl_q}" rel="external">{vb:rawphrase blogs}</a>
                </div>
            </div>
            </vb:if>
            <vb:if condition="$show['quick_links_albums']">
            <div class="ui-block-b">
                <div class="iconcontainer">
                    <a href="album.php{vb:raw session.sessionurl_q}" rel="external" class="gridmenuicon"><img src="{vb:stylevar imgdir_mobile}/album.png" /></a>
                    <a href="album.php{vb:raw session.sessionurl_q}" rel="external">{vb:rawphrase albums}</a>
                </div>
            </div>
            </vb:if>
            <vb:if condition="$show['member']">
            <div class="ui-block-b">
                <div class="iconcontainer">
                    <a href="{vb:link member, {vb:raw bbuserinfo}}" rel="external" class="gridmenuicon"><img src="{vb:stylevar imgdir_mobile}/profile.png" /></a>
                    <a href="{vb:link member, {vb:raw bbuserinfo}}" rel="external">{vb:rawphrase profile}</a>
                </div>
            </div>
            <div class="ui-block-b">
                <div class="iconcontainer">
                    <a href="{vb:link member, {vb:raw bbuserinfo}, {vb:raw pageinfo_friends}}" rel="external" class="gridmenuicon"><img src="{vb:stylevar imgdir_mobile}/friends.png" /></a>
                    <a href="{vb:link member, {vb:raw bbuserinfo}, {vb:raw pageinfo_friends}}" rel="external">{vb:rawphrase friends}</a>
                </div>
            </div>
            <div class="ui-block-b">
                <div class="iconcontainer">
                    <a href="mobile.php?{vb:raw session.sessionurl}do=notifications" rel="external" class="gridmenuicon"><img src="{vb:stylevar imgdir_mobile}/notifications.png" /></a>
                    <a href="mobile.php?{vb:raw session.sessionurl}do=notifications" rel="external">{vb:rawphrase your_notifications} (<span class="notifications_total_count">{vb:raw notifications_total}</span>)</a>
                </div>
            </div>
            <div class="ui-block-b">
                <div class="iconcontainer">
                    <a href="private.php{vb:raw session.sessionurl_q}" rel="external" class="gridmenuicon"><img src="{vb:stylevar imgdir_mobile}/messages.png" /></a>
                    <a href="private.php{vb:raw session.sessionurl_q}" rel="external">{vb:rawphrase messages} ({vb:raw bbuserinfo.pmunread})</a>
                </div>
            </div>
            <vb:if condition="$show['searchbuttons']">
                <div class="ui-block-b">
                    <div class="iconcontainer">
                        <a href="search.php?{vb:raw session.sessionurl}do=getnew" rel="external" class="gridmenuicon"><img src="{vb:stylevar imgdir_mobile}/whatsnew.png" /></a>
                        <a href="search.php?{vb:raw session.sessionurl}do=getnew" rel="external">{vb:rawphrase getnew_tab}</a>
                    </div>
                </div>
            </vb:if>
            <vb:comment>
            <div class="ui-block-b">
                <div class="iconcontainer">
                    <a href="{vb:raw vboptions.bburl}" rel="external" class="gridmenuicon"><img src="{vb:stylevar imgdir_mobile}/settings.png" /></a>
                    <a href="{vb:raw vboptions.bburl}" rel="external">{vb:rawphrase control_panel}</a>
                </div>
            </div>
            </vb:comment>
            </vb:if>
            {vb:raw template_hook.mobile_gridmenu_end}
        </div>
    <br>
        <div class="searchbar">
            <form action="search.php?{vb:raw session.sessionurl}do=process" method="post" id="navbar_search" class="navbar_search">
                <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
                <input type="hidden" name="do" value="process" />
                <input type="hidden" name="contenttype" value="vBForum_Post" />
                <input type="hidden" name="searchfromtype" value="vBForum:Post" />
                <div class="buttoncontainer">
                    <button type="submit" name="sbutton" data-theme="c">{vb:rawphrase search}</button>
                </div>
                <div class="textboxcontainer">
                    <input type="text" value="" name="query" tabindex="99"/>
                </div>
            </form>
        </div>
    </div>
    {vb:raw footer}
    </body>
    </html>
    Last edited by Peter Walker; Sat 4th Nov '17, 6:01pm.

    Leave a comment:


  • Peter Walker
    replied
    As the forum is still closed to normal members, I have duplicated it at a slightly different address with a different database so you guys can see the problem.

    You can see and test the problem, here (use Chrome to test this on PC or smartphone):
    https://www.rifeforum.com/forum4/?styleid=8 Click this first to set the mobile style
    https://www.rifeforum.com/forum4/mobile.php?do=gridmenu This shows the Menu with the problem.

    Then reduce the width of the window, so that the search bar is over the blogs icon.
    Trying to click on "Blogs" will result on the Search button being pressed.

    I also tested this on Firefox and Internet Explorer (on a Win 8.1 PC) and the Blogs button worked correctly. It fails every time on Chrome. As Chrome is the standard browser on Android devices, this is a major concern. i do not have an iPhone to test this on.


    Additionally, I notice that this mobile vBulletin Menu has a lot of empty space beneath it. That is you can scroll the menu up to see just white space on the screen. The other mobile menus do not have this issue except for the Search page (click on Search button with empty search field).

    The template involved is the mobile_gridmenu in the Default Mobile Style.
    Last edited by Peter Walker; Mon 30th Oct '17, 6:13pm.

    Leave a comment:


  • TheLastSuperman
    replied
    Those of us wishing to assist can only see the problem described, we need an actual site link to check your mobile style and see the issue in action for ourselves. Sometimes we know the issue right off the bat from past experience and other times we simply need a site link .

    Leave a comment:


  • Mobile Grid Menu: Search instead of Blogs, Friends or What's New

    I am currently preparing my forum for reopening, after the upgrade from vb 3.8.9 to vb 4.2.5.
    PHP 5.6.31, MySQL 5.7.20-0ubuntu0.16.04.1
    No addons active and this problem occurs with the default mobile style.
    I have tested this with Chrome, running on my Android 6.01 smartphone.
    I can also see this problem on a Windows 8.1 PC in Chrome when the window is just as narrow as on the phone.

    After calling up the website in mobile style, I clicked on the hamburger icon to display the menu (see image) where the search button is displayed above the three right buttons.
    I can click on the icons on the left and centre and they react as expected. When I click on any of the right buttons (Blogs, Friends or What's New?), the search button reacts and I am taken to the Search form instead. This makes it impossible to select those functions).
    As I could not find any previous posts discussing this issue, I am reporting it here in the hope someone has an answer.
    I tried this on two Android smartphones and a Google Nexus 7 tablet and on the tablet in landscape mode, the search button was displayed further to the right and then, I was able to use those three buttons.

    How do I get those buttons working properly.

Related Topics

Collapse

Working...
X