Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2012-04-10 13:24:36

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 1,723
Website

Additional wrapper around listings tables ?

Would it be useful for other themers to have a div wrapped around the large listings tables (e.g. Write tab > Articles) ?

At present I use jquery to wrap such a div around those tables in my own theme; I can then use this div to control the overflow on narrower windows (mobile phones, iPad and other tablets). Should it be part of the textpattern code base ?

(feels a bit of a silly use of js in my book)

Offline

#2 2012-04-10 13:41:39

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 8,794
Website

Re: Additional wrapper around listings tables ?

phiw13 wrote:

Would it be useful for other themers to have a div wrapped around the large listings tables (e.g. Write tab > Articles)

Hmmm, do you see:

<div class="txp-container txp-list" id="list_container">
...
</div>

around the <form> and table(s) on such pages? Isn’t that a sufficient hook? Or have I missed something?

Last edited by Bloke (2012-04-10 13:42:31)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#3 2012-04-10 13:58:51

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 1,723
Website

Re: Additional wrapper around listings tables ?

Bloke wrote:

yes all those are there no problems. What I have in mind is a div that tightly wraps said table (and only contains the table):

<div class="txp-list-table-wrapper">
    <table id="list" class="list">
    ....
    </table>
    <div>

I can play with the overflow property on that div (user can scroll through the table without moving the rest of the UI – works quite well on iOS 5.x)

My jquery script does this:

$('table.list').wrap('<div class="txp-list-table-wrapper"></div>');

Offline

#4 2012-04-10 14:10:06

philwareham
Core designer
From: Farnham, Surrey, UK
Registered: 2009-06-11
Posts: 3,199
Website

Re: Additional wrapper around listings tables ?

+1 for this.

At the moment for my theme’s responsive pages I have to hide columns from tables to get it to fit – not ideal. Using this div method we can keep all the columns and have horizontal scroll on the table alone.

This method would also be handy for the images edit pane, to wrap a div around the large image and also maybe for the thumbnail image. They can then use overflow in the same way as the tables mentioned above.

Offline

#5 2012-04-10 14:14:05

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 8,794
Website

Re: Additional wrapper around listings tables ?

phiw13 wrote:

$('table.list').wrap('<div class="txp-list-table-wrapper"></div>');

Gotcha. If your script is doing that on every table with a list class, can it be done directly by assigning the overflow, etc to the table.list CSS rule of your theme?

I’m not deliberately being obtuse, I genuinely don’t know if it’s possible to assign overflow to suit mobile devices directly on tables. If not then by all means I’ll add the wrapper.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#6 2012-04-10 14:22:15

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 1,723
Website

Re: Additional wrapper around listings tables ?

Bloke wrote:

I’m not deliberately being obtuse, I genuinely don’t know if it’s possible to assign overflow to suit mobile devices directly on tables. If not then by all means I’ll add the wrapper.

overflow (with auto value) doesn’t really work on table – you can’t set a width on the table, and expect the part that doesn’t fit to be hidden and accessible via a scrolling mechanism. table automatically expand in width; css width on table is more like min-width.

Offline

#7 2012-04-10 14:25:36

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 8,794
Website

Re: Additional wrapper around listings tables ?

phiw13 wrote:

overflow (with auto value) doesn’t really work on table

Fair enough. I’m on the case.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#8 2012-04-10 14:28:05

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 1,723
Website

Re: Additional wrapper around listings tables ?

philwareham wrote:

This method would also be handy for the images edit pane, to wrap a div around the large image and also maybe for the thumbnail image. They can then use overflow in the same way as the tables mentioned above.

In that case I use .image.fullsize {max-width: 100%} – not perfect, but perfectly usable for managing the images on small screens.

Offline

#9 2012-04-10 14:29:39

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 1,723
Website

Re: Additional wrapper around listings tables ?

Bloke wrote:

I’m on the case.

Thanks !

Offline

#10 2012-04-10 15:00:05

philwareham
Core designer
From: Farnham, Surrey, UK
Registered: 2009-06-11
Posts: 3,199
Website

Re: Additional wrapper around listings tables ?

phiw13 wrote:

In that case I use .image.fullsize {max-width: 100%} – not perfect, but perfectly usable for managing the images on small screens.

I’m not sure that would work though, as the system gives the img tag an implicit width and height attribute, breaking that responsive image technique.

Offline

Board footer

Powered by FluxBB