Fixed Column Widths

Thanks for your question, for the link to your sample page and for the details of your custom style and markup templates; very helpful. I copied your templates to my system and made a few adjustments that show one way to achieve your goal. The full templates are included below, but here are the key styles that adjust the column width:

<style type='text/css'>
#[+selector+] {
margin: 0;
width: 100%;
}
#[+selector+] .gallery-row td .gallery-title {
width: 80%;
height: 16;
vertical-align: top;
}
#[+selector+] .gallery-row td .gallery-icon {
width: 20%;
height: 16;
vertical-align: top;
}

As you can see, the first #[+selector+] style sets the overall width of the gallery to the full width of the enclosing area. A new style for the td .gallery-title class assigns 80% of the width to your title/link column, and the td .gallery-icon class gets the remaining 20%. You could substitute specific pixel widths if that suits your application better. The full custom style template is:

<style type='text/css'>
#[+selector+] {
margin: 0;
width: 100%;
}
#[+selector+] tbody {
border: 0px solid #ff0000;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#[+selector+] table {
border: 0px solid #ff0000;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#[+selector+] .gallery-row td .gallery-title {
width: 80%;
height: 16;
vertical-align: top;
}
#[+selector+] .gallery-row td .gallery-icon {
width: 20%;
height: 16;
vertical-align: top;
}
#[+selector+] .gallery-row .gallery-icon img {
border: 0px solid #FF0000;
}
#[+selector+] .gallery-row {
float: none;
text-align: left;
width: auto;
padding: 0;
}
#[+selector+] td {
padding: 0.4em;
}
#[+selector+] .header-row {
float: none;
text-align: left;
width: auto;
font-weight: bold;
}
#[+selector+] .gallery-caption {
margin-left: 0;
vertical-align: top;
}
</style>

I made a few changes to your custom markup template as well. Here is the full template; I will highlight the differences following the content:

Arguments

post_parent=all
post_mime_type=application/pdf
size=icon_only
mla_image_attributes='width="16" height="16"'
columns=1
link=none
orderby="name DESC"

Open

<h3>[+template:([+query:my_gallery_title+])+]</h3>
<table id="[+selector+]" class="gallery galleryid-[+id+] gallery-columns-[+columns+] gallery-size-[+size_class+]">
<tr class="header-row"><th>Document Title – click to view</th><th>Icon shows<br />File type</th></tr>

Row Open

<tr class="gallery-row">

Item

<td class="gallery-title">
<a href="[+filelink_url+]">[+title+]</a>
</td>
<td class="gallery-icon">
[+link+]
</td>

Row Close

</tr>

Close

</table>

In the Arguments section I changed size=icon to size=icon_only. This displays the generic PDF icon even if the associated item has a thumbnail image. You could change it to something like size=thumbnail to show a larger image if your documents have a meaningful thumbnail.

In the Open section I changed <th>Icon shows File type</th> to <th>Icon shows<br />File type</th>, to make the column header more compact and leave more space for the title links.

In the Item section I added a new class="gallery-title" attribute to allow styling of the title column. I changed the [+title+] element to <a href="[+filelink_url+]">[+title+]</a> so the title would become a hyperlink.

I added the Row Close and Close sections to close out the template.

I hope these changes get you started on an approach that works for your application. I am marking this topic resolved, but please update it if you have problems or further questions regarding the above suggestions. Thanks for your continued interest in the plugin and your contributions in this support forum.

Hi David,

Well I made some progress but not much – in the Previous Reports section of the web page https://downtonparishcouncil.gov.uk/main-council/financial-reporting the < /br> changed worked ok but the tables have remained stuck!

Using Google Chrome and Inspect-ing the page appears to show that:
table is full width
tbody is full width but also appears to have no MLA specific styles attached*
tr class header row then has a reduced width
* there is a style for tbody but it doesn’t appear to be used in the markup?

Here’s the style and mark up settings:

MARKUP

ARGUMENTS
post_parent=all
post_mime_type=application/pdf
size=icon_only
mla_image_attributes=’width=”16″ height=”16″ ‘
columns=1
link=none
orderby=”name?DESC”

OPEN
<h3>[+template:([+query:my_gallery_title+])+]</h3>
<table id=”[+selector+]” class=”gallery galleryid-[+id+] gallery-columns-[+columns+] gallery-size-[+size_class+]”>
<tr class=”header-row”><th>Document Title – click to view</th><th>Icon shows</br> File type</th></tr>

ROW OPEN
<tr class=”gallery-row”>

ITEM
<td class=”gallery-title”>
[+title+]
</td>
<td class=”gallery-icon”>
[+link+]
</td>

ROW CLOSE
</tr>

CLOSE
</table>

STYLE
<style type=’text/css’>
#[+selector+] {
margin: 0;
width: 100%;
}
#[+selector+] tbody {
border: 0px solid #ff0000;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#[+selector+] table {
border: 0px solid #ff0000;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width: 100%;
}
#[+selector+] .gallery-row td .gallery-title {
width: 80%;
height: 16;
vertical-align: top;
}
#[+selector+] .gallery-row td .gallery-icon {
width: 20%;
height: 16;
vertical-align: top;
}
#[+selector+] .gallery-row .gallery-icon img {
border: 0px solid #FF0000;
}
#[+selector+] .gallery-row {
float: none;
text-align: left;
width: auto;
padding: 0;
}
#[+selector+] td {
padding: 0.4em;
}
#[+selector+] .header-row {
float: none;
text-align: left;
width: auto;
font-weight: bold;
}
#[+selector+] .gallery-caption {
margin-left: 0;
vertical-align: top;
}
</style>

Thanks for trying out my suggestions and for your thorough post of the results. I regret that my CSS skills are limited and I gave you some incorrect information. Try updating the title and icon styles to these:

#[+selector+] tr.gallery-row td.gallery-title {
width: 80%;
height: 16;
vertical-align: top;
}
#[+selector+] tr.gallery-row td.gallery-icon {
width: 20%;
height: 16;
vertical-align: top;
}
#[+selector+] tr.gallery-row td.gallery-icon img {
border: 0px solid #FF0000;
}

Or, even simpler, these:

#[+selector+] .gallery-title {
width: 80%;
height: 16;
vertical-align: top;
}
#[+selector+] .gallery-icon {
width: 20%;
height: 16;
vertical-align: top;
}
#[+selector+] td.gallery-icon img {
border: 0px solid #FF0000;
}

I hope this will give you a better result. Again, I regret the inconvenience caused by my earlier errors. Thanks for your understanding.

Hi David, after a lot of prototyping and debugging (my CSS is very very poor!) it seems that (on my system at least) that adding gallery-columns-[+columns+] to the <table> in the OPEN part of markup so it reads like this
table id=”[+selector+]” class=”gallery galleryid-[+id+] gallery-columns-[+columns+] gallery-size-[+size_class+]”
somehow stops the TR from being the 100% width.

If it is removed so the it reads like:
table id=”[+selector+]” class=”gallery galleryid-[+id+] gallery-size-[+size_class+] ”
then the TR becomes 100% width.

I have updated the page

https://downtonparishcouncil.gov.uk/main-council/financial-reporting

to show a raw bones basic table, followed by a table with gallery-columns-[+columns+] in the TABLE CLASS= and finally the remaining tables that have had the gallery-columns-[+columns+] removed from the OPEN MARKUP.

Paul

Hi just did another quick inspect in Google Chrome. It seems that adding gallery-columns-[+columns+] to the table class= inserts this style:

.gallery-columns-1 {
display: flex;
flex-wrap: wrap;
}
and its the display: flex; that stops the TR becoming full width.

The CSS style appear to be set by the theme
https://downtonparishcouncil.gov.uk/wp-content/themes/responsive/core/css/style.min.css?ver=4.4.5

Thanks for your detective work and your updates. My CSS is no stronger than yours.

You can try adding a style to your mla_styles template to override the theme’s styling or remove the class from your mla_markup template. You can also try the changes I gave in my earlier post.

I noticed that your styles set the width for the th.gallery-title and th.gallery-icon tags, but not the corresponding td.gallery… tags; you can try adding those. I also see you have widths of “85%” and “20%” which add up to 105%.

Is there anything else you need from me at this point?

Hi David,

Just to let you know that in end I just removed the gallery-columns-[+columns+] from the OPEN MARKUP.

It’s style was set via the sites theme and it wasn’t clear how to update it.

I also discovered that my site level CSS updates (mainly done so that tablepress tables would display with green borders was interfering with MLA styling so I cleared that out too!

I did as you suggested and created a dedicated style sheet and also created a 3 column display.

The final web page looks like https://downtonparishcouncil.gov.uk/main-council/financial-reporting

Many thanks

Paul