Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
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)
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
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
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>');Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
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
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
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.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: Additional wrapper around listings tables ?
phiw13 wrote:
overflow(with auto value) doesn’t really work ontable
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
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.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: Additional wrapper around listings tables ?
Bloke wrote:
I’m on the case.
Thanks !
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
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
Re: Additional wrapper around listings tables ?
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%;
}Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: Additional wrapper around listings tables ?
Bloke wrote:
Fair enough. I’m on the case.
Fwiw, for ease of tracking, I’ve filed this as issue 167.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline