[Plugin: WP-Table Reloaded] Quick and Easy Question! Changing position of Arrows.

Hi,

yes, the search box and the arrows are coming from DataTables.
To position them in line with the table, try adding the following “Custom CSS”, which will also set the width of the container of those elements to 400px, so that the width matches the actual table.

.dataTables_wrapper {
  width: 400px!important;
}

To replace the arrows with your own images, take a look at the “datatables.css” file in the “css” subfolder, especially at the declarations of “paginate_enabled_next” and similar.
There, you will see the references to the images.
However, to change those, you should not simply replace the images or modify the datatables.css file, but instead copy the new images to your server and override the CSS commands in the “Custom CSS” section.

Best wishes,
Tobias

Hi Tobias, I’d like to extend this question further by asking how you change the width of just one table wrapper. I have several tables all of different widths and want to change the position of the search box and page arrows on just one.

Your help much appreciated

– Mark

Hi Mark,

thanks for your question. Changing this behavior for just one table would be to use an HTML ID based approach in the code.
For example, the following should work on table 5 (only):

#wp-table-reloaded-id-5-no-1_filter {
  width: 400px!important;
}

Best wishes,
Tobias

Thanks for the very quick response. Unfortunately, your suggestion didn’t work. Not sure if this will help but here is a link to the table in question: https://cazalrando.com/randonnees/telecharger-un-randonnee

It’s ID is 2 and there are tables on other pages. However, for this one I would like the search box and page arrows to not extend beyond the width of the table.

Below is all the css that controls the formatting of this table:

/* Removes spacing between tables on the same page */

.dataTables_wrapper {
min-height: 0!important;
}

/* End Removes spacing between tables on the same page */

/* Begin style for walks download page */

#wp-table-reloaded-id-2-no-1_filter {
width: 400px!important;
}

.wp-table-reloaded-id-2 .column-1 {
width: 300px;
}

.wp-table-reloaded-id-2 .column-2 {
width: 100px;
}

.wp-table-reloaded-id-2 th, .wp-table-reloaded-id-N .sorting {
background-color: #B79A3B!important;
}

.wp-table-reloaded-id-2 .sorting_asc, .wp-table-reloaded-id-N .sorting_desc {
background-color: #B79A3B!important;
}

.wp-table-reloaded-id-2 .odd td {
background-color: #B5C4B0;
}

.wp-table-reloaded-id-2 .even td {
background-color: #EFEFE6;
}
.wp-table-reloaded-id-2 td {
color: #000000;
}
a:link {color:#000000;}
a:visited {color: #000000;}
a:hover {text-decoration: underline; color: #000000;
font-weight:bold;}

/* End style for download walks page */

Thanks
– Mark

Hi Tobias, ignore my past post. It’s too early in the morning and I didn’t give your suggestion enough thought. I just needed to change ‘filter’ to ‘wrapper’ thus:

#wp-table-reloaded-id-5-no-1_wrapper{
width: 400px!important;
}

Thanks for an excellent tool.

Hi,

thanks for this update. I actually meant to write “wrapper” in my code, don’t know how “filter” slipped in. Sorry about that.
But fortunately, you spotted this quickly ??

Best wishes,
Tobias