Loading...
 
Themes

Themes

Forum List Topic List

Forums » Themes » Login box disappears or does not show when screen is smaller (responsive)
 
Thread actions
PDF Print this page
  • Print all pages

    • Login box disappears or does not show when screen is smaller (responsive)

    Posted by jamesarm97 USA
    Does anyone have the problem where if the screen is smaller that the login box does not show unless you scroll around to see it because it is drawn within the top-middle bar? It seems to happen when side panels disappear because of the responsive setting on smaller devices or when you shrink your window. I can duplicate it on a desktop browser by shrinking the screen until the side panels disappear. So on phones this makes logging in almost impossible. v14 with the five alive-light theme.
    Reads: 1517
    Link
    Posted by Gary Cunningham-Lee Japan

    At themes.tiki.org, I added a second login module that only displays in small screens. For the large-screen login module that's in the "Top" module zone, I added "hidden-xs hidden-sm" to its "Containing class" (under the "Appearance" tab of tiki-admin_modules.php) so now that parameter reads "topclass=col-md-2 hidden-xs hidden-sm". (The col-md-2 was already there as part of the layout of the navbar area.

    Then I added a second login module in the "Pagetop" module zone; it's parameters read "topclass=hidden-lg hidden-md" as those two classes were input in its "Containing class" field.

    So these Bootstrap visibility classes hide the Top zone login in smaller screens and hide the Pagetop zone login in larger screens. Kind of kludgey, but works, at least with the combination of modules, etc. in the module zones at that site. (I'm hoping we'll come up with more elegant solutions in the future.)

    -- Gary
     

    Link
    Posted by jamesarm97 USA
    That worked perfectly. Any hints on how to get the search bar in the Topbar? The one I have wraps and puts the search button below it.
    Link

    Posted by Gary Cunningham-Lee Japan

    The search form in the Topbar at this site has these parameters (on the admin modules page):

    compact=y
    nobox=y
    topclass=col-md-3

    (The topclass parameter is because the menu has a col-md-9 class so together they equal the Bootstrap grid div total of 12, so this shouldn't be relevant to the problem here). Does your search form have the first two parameters?

    In the search form code itself, the text input is inside a div.col-sm-10 which, at 83.3% of the width, leaves room for the button so it doesn't wrap. This is with compact=y, I believe. Are your settings similar, or different?

    -- Gary

     

    Link
    Posted by jamesarm97 USA
    That helped. I was using the quick-search instead of search plus all new to this so I figured out the col-md-?? stuff by looking  at the styles  you used. works now. Finally getting a hang of the module class settings.
    Link