Additional wrapper around listings tables ?

phiw13 · 2012-04-10 13:24:36

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)

Bloke · 2012-04-10 13:41:39

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)

phiw13 · 2012-04-10 13:58:51

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>');

philwareham · 2012-04-10 14:10:06

+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.

Bloke · 2012-04-10 14:14:05

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.

phiw13 · 2012-04-10 14:22:15

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.

Bloke · 2012-04-10 14:25:36

phiw13 wrote:

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

Fair enough. I’m on the case.

phiw13 · 2012-04-10 14:28:05

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.

phiw13 · 2012-04-10 14:29:39

Bloke wrote:

I’m on the case.

Thanks !

philwareham · 2012-04-10 15:00:05

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.

phiw13 · 2012-04-11 05:11:02

philwareham wrote:

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.

max-width trumps width, always. Oh, right – the image is in a auto-width table-cell in a table with percentage width. It works fine in WebKit based browsers, but IE-Gecko-Opera(mobile) fall back on the intrinsic width of the image as they can’t seem to compute the 100% max-width (undefined loop).

Can you tell we don’t do much in images here? <:g>

This ought to work everywhere, I think:

#page-image .edit-pane { table-layout: fixed; }
/* makes the image scale correctly… in Gecko Opera IE */
.image.fullsize {
	width: auto;
	height: auto;
	max-width: 100%;
}

phiw13 · 2012-04-11 05:21:24

Bloke wrote:

Fair enough. I’m on the case.

Fwiw, for ease of tracking, I’ve filed this as issue 167.

Textpattern CMS

Textpattern CMS support forum

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

Additional wrapper around listings tables ?

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

Re: Additional wrapper around listings tables ?

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

Re: Additional wrapper around listings tables ?

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

Re: Additional wrapper around listings tables ?

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

Re: Additional wrapper around listings tables ?

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

Re: Additional wrapper around listings tables ?

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

Re: Additional wrapper around listings tables ?

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

Re: Additional wrapper around listings tables ?

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

Re: Additional wrapper around listings tables ?

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

Re: Additional wrapper around listings tables ?

#11 2012-04-11 05:11:02

Re: Additional wrapper around listings tables ?

#12 2012-04-11 05:21:24

Re: Additional wrapper around listings tables ?

Board footer