Not a bug app_body.less template - .p-body-main

[AndyB]

Affected version

XenForo 2.0.1

I use the the following code in many of my add-ons:

<div class="block-container">
    <div class="block-body">
        <xf:datalist data-xf-init="responsive-data-list">
            <xf:datarow rowtype="header">
                <xf:cell>{{ phrase('newmembers_user_id') }}</xf:cell>
            </xf:datarow>
            <xf:foreach loop="$results" value="$result">
                <xf:datarow rowclass="dataList-row--noHover">
                    <xf:cell>{$result.user_id}</xf:cell>
                </xf:datarow>
            </xf:foreach>
        </xf:datalist>
    </div>
</div>

If there are many columns, the issue is the white background does not extend all the way to the right. Here's an example:



If I comment out the following in the app_body.less template, it corrects the issue. It does not appear to effect any other functionality of XenForo.

.p-body-main
{
	display: table;
	table-layout: fixed;
	//width: 100%;
	margin-bottom: auto;
}

 

[Mike]

The short comment here really is that there are some side effects of removing that line.

Given what you're trying to output, you likely need to add internal scrolling to it or you need to consider a slightly different approach to this. There's the dataList--contained class you can apply (which will do a height limit as well).

 

[DragonByte Tech]

To expand a bit on what Mike said, my personal recommendation would be to consider whether you really need all of that information displayed in-line, or whether you can make some of it displayed on click with an overlay.

For examples, look in the ACP at the various logs. Sitemap logs display data inline because the data set is limited, other logs display very basic data with a clickable "main" area that opens an overlay with expanded data.

A table that size is some 1995-era website design


Fillip

 

[AndyB]

There's the dataList--contained class you can apply

Thank you, Mike. This worked perfectly to add a scroll bar on the bottom.

<div class="block-container">
	<div class="block-body">
		<xf:datalist class="dataList--contained" data-xf-init="responsive-data-list">
			<xf:datarow rowtype="header">
				<xf:cell>{{ phrase('newmembers_user_id') }}</xf:cell>
			</xf:datarow>
			<xf:foreach loop="$results" value="$result">
				<xf:datarow rowclass="dataList-row--noHover">
					<xf:cell>{$result.user_id}</xf:cell>
				</xf:datarow>
			</xf:foreach>
		</xf:datalist>
	</div>
</div>

 

[AndyB]

To expand a bit on what Mike said, my personal recommendation would be to consider whether you really need all of that information displayed in-line, or whether you can make some of it displayed on click with an overlay.

Hi Fillip,

Thank you for your suggestion.