1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.3 Reply box squashed to one side for responsive on iPhone

Discussion in 'Troubleshooting and Problems' started by Mouth, Mar 3, 2014.

  1. Mouth

    Mouth Well-Known Member

    As per attached screenshot, when browsing my site in responsive narrow mode (I'm using an iPhone, same issue in portrait or landscape mode), the reply box at the bottom of threads is squashed to the right hand side and only using approx 50% of available width.

    Would appreciate some assistance with what the cause is and how to resolve?

    Thanks.

    IMG_2330.PNG
     
  2. Jeremy

    Jeremy XenForo Moderator Staff Member

    Without making a test account; you most likely have CSS that doesn't properly hide the avatar section (but hides the avatar) causing the reply box to not be allowed to expand.
     
  3. Mouth

    Mouth Well-Known Member

    Thanks Jeremy, from using browser developer tools I've been able to locate it down the usage of:
    HTML:
    #QuickReply{margin-left:161px}
    It appears to me that this is being set by template quick_reply.css but I cannot see where, as its contents is
    Code:
    /*quick reply*/
    
    .quickReply
    {  
        @property "message";
        background-color: @primaryLighterStill;
        padding-top: @uix_gutterWidthSmall;
        padding-bottom: @uix_gutterWidthSmall;
        border-style: inset;
        @property "/message";
    }
    
    {xen:helper clearfix, '.quickReply'}
    
    .quickReply .replyPrompt em
    {
        font-style: italic;
    }
    
    /* the quick reply form */
    
    #QuickReply
    {
        @property "messageInfo";
        background-color: transparent;
        padding: 0;
        margin-left: 140px;
        border-bottom: 1px none black;
        @property "/messageInfo";
    }
    
    #QuickReply textarea
    {
        width: 100%;
        *width: 98%;
        height: 100px;
        box-sizing: border-box;
    }
    
    #QuickReply .insertQuotes
    {
        display: none;
        float: left;
        <xen:comment>/* 31 is the submit unit line height, need to add button border because of weird calculation*/</xen:comment>
        margin-top: {xen:calc 'floor(@button.border-top-width + (31 - @button.height) / 2)'}px;
    }
    
    #QuickReply .submitUnit
    {
        margin-top: 5px;
        text-align: right;
        line-height: 31px;
        position: relative;
        z-index: 1;
    }
    
        #QuickReply .submitUnit .draftUpdate
        {
            position: absolute;
            left: 0;
            z-index: -1;
            color: @mutedTextColor;
            font-size: 11px;
        }
      
            #QuickReply .submitUnit .draftUpdate span
            {
                display: none;
            }
    
    #QuickReply .AttachmentEditor
    {
        padding-top: 10px;
    }
    
    <xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveNarrowWidth)
    {
        .Responsive .quickReply .messageUserInfo
        {
            display: none;
        }
    
        .Responsive #QuickReply
        {
            margin-left: 0;
        }
    }
    </xen:if>
     
  4. Jeremy

    Jeremy XenForo Moderator Staff Member

    It is most likely being set in EXTRA.css, since you can see the responsive code is there:

    Code:
    .Responsive #QuickReply
    {
    margin-left: 0;
    }
    
    
     
  5. Mouth

    Mouth Well-Known Member

    I've been through as much as I could find, and cannot find any reference for that value (161) anywhere.
    I then changed to XF default style, and disabled all addons through config.php, and get the same result !! Should I be logging a 1.3RC1 bug?
    Screen Shot 2014-03-05 at 12.15.49 am.png
     
  6. Jeremy

    Jeremy XenForo Moderator Staff Member

  7. Mouth

    Mouth Well-Known Member

    Bingo, thanks very much for staying with me and guiding me through.
    I, one-by-one, removed each of the CSS modules on the above URL and reloaded. Then checked if the problem statement was removed. Found it within XFA Better Blogs, specifically the xfa_blog_indicator.css template.
    Changed it to:
    HTML:
    @media (max-width:@maxResponsiveMediumWidth)
    {
        .message .messageInfo, .message #QuickReply
        {
            margin-left: 161px; /* 140 + 16 icon + 10 margin - 5 right space */
        }
    }
    @media (max-width:@maxResponsiveNarrowWidth)
    {
        .message .messageInfo, .message #QuickReply
        {
            margin-left: 0px;
        }
    }
     

Share This Page