WordPress.org

1. gourmetbeats
   Member
   Posted 1 year ago #

   So I'm sure there's a simple fix to this problem that I'm just not seeing. I have created a simple table which uses DataTables to be able to sort through several rows, only showing one at a time.

   I have set the table width to 400px. Everything works great, except that the Search box and the Navigational Arrows (which I assume are a product of DataTables?) show up all the way on the right side of the page.

   Here is the page: http://www.gourmetbeats.com/archives/36

   What is the best way to control where the arrows and search box show up? Can these be placed above the table? Can different images be substituted for the arrows? Any help is much appreciated!!

   -Tyler

2. TobiasBg
   Member
   Posted 1 year ago #

   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

3. mlewis100
   Member
   Posted 1 year ago #

   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

4. TobiasBg
   Member
   Posted 1 year ago #

   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

5. mlewis100
   Member
   Posted 1 year ago #

   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: http://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

6. mlewis100
   Member
   Posted 1 year ago #

   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.

7. TobiasBg
   Member
   Posted 1 year ago #

   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

Topic Closed

This topic has been closed to new replies.