XF 2.2 Change column width on node list

[_Al]

Would someone be able to assist with the extra.less code required to amend these column widths so that the node icon sits comfortably in column one and the username is not cut off in column three?



As ever, thank you.

 

[Mr Lucky]

technically they aren't really columns they are separate divs normally

The default width is 280px
So for an extra 20px

.node-extra
{width:300px}

Adjust 300px size to suit if necessary (NB: youmay need !important after the 300px but probably not)

Test at different widths ands devices

Not sure what you mean by node icon sitting comfortably. A link to the site would be useful

This is the default:

.node-icon {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 46px;
padding: 10px 0 10px 10px;
}

So you can try different things easily with vertical align, text align, padding but without know what you want it's hard to say.

 

[_Al]

A link to the site would be useful

You're right. Sorry! The site is currently closed as we are launching at the weekend. It will be using https://pixelexit.com/demo/?theme=Omni as a base. I hope that helps. Sorry, again, for being wishy-washy! And thank you for your help.

 

[Mr Lucky]

t will be using https://pixelexit.com/demo/?theme=Omni as a base.

If that style is set up very differently from the xenForo style, unless we can see it in a browser it's not possible to guess exactly what needs doing apart from the general stuff I mentioned above which works fire with xenForo default.

The chances are the default classes will work but if not then you may be better off asking the style developer.

 

[_Al]

unless we can see it in a browser it's not possible to guess exactly what needs doing.

It's live now: https://esgr.io. Hopefully the fix will be easier now that people can actually see what the problem is!

 

[Paul B]

You can disable the wrapping but that introduces other layout issues.

Use the browser inspector to play around until you find a layout which works for you, then add those changes to the extra.less template.

 

[Mr Lucky]

Something like

.node-extra
{width:400px}

.node-extra-row
{white-space:pre-wrap}

 

[JustinHawk]

Would someone be able to assist with the extra.less code required to amend these column widths so that the node icon sits comfortably in column one and the username is not cut off in column three?

View attachment 291990

As ever, thank you.

try this CSS

.node-icon, .no-icon {
    width: 70px;
    padding: 12px;
}

 

[_Al]

Thanks very much to all of you for your help and support. It's really appreciated.