Css code for 3.0 update
-
Hello, since the update to version 3.0, some css codes no longer work.
I would like to know how to put the search box on the left and how to change the background and text color of the hovered row ?
-
Hi!
Thanks for your post and sorry for the trouble!
For the hovered row styling, please see https://tablepress.org/faq/change-color-highlighting-hovered-rows/
Moving the search field to the left with CSS is now much more complex (a side effect of some important other changes). It can however be done with a Shortcode parameter. Can you please send me a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!
Regards,
TobiasThe css code you provided to change colors when rows are hovered works fine. Thanks.
Here is the link to my site that you asked for: https://bit.ly/3CISTYU
Hi,
I think I found a CSS solution for this! Please add this to the “Custom CSS” text area on the “Plugin Options” screen of TablePress:
#tablepress-9_wrapper .dt-layout-row:first-child .dt-layout-end {
justify-content: flex-start;
margin-left: 0;
}Best wishes,
TobiasIt works thank you very much !
But on mobile the search box is in the middle, it would be possible to put it on the left ? Before the 3.0 update, it was on the left for mobile devices.
Hi,
ah, I see.
For that, please extend the code above to
#tablepress-9_wrapper .dt-layout-row:first-child .dt-layout-end {
justify-content: flex-start;
margin-left: 0;
flex-direction: row;
}Best wishes,
TobiasThis works as well. Thank you very much for your quick and efficient support.
no problem, you are very welcome! 🙂 Good to hear that this helped!
Best wishes,
TobiasP.S.: In case you haven’t, please rate TablePress in the plugin directory. Thanks!
Hello,
I’m also having issues with my search box having moved from the left side to the right side with the update. I tried adding the CSS you described above but the search box is still on the right side.
Here is the custom CSS I have currently in the Plugin Options:
.dt-container .dt-search input {
width: 200px;
}
.dt-container .dt-search {
float: none;
text-align: left;
}
.tablepress a:hover {
text-decoration: underline;
color: #0bf;
}
#tablepress-9_wrapper .dt-layout-row:first-child .dt-layout-end {
justify-content: flex-start;
margin-left: 0;
flex-direction: row;
}Any advice?
Thanks,
BrianHi Brian,
Sorry to hear that you are also affected by this change. Please post a link to the page with the table where this problem happens, so that I can take a direct look. Thanks!
Regards,
TobiasHi Tobias,
Here’s one place I’m using it for the “gas finder”: https://www.mathesongas.com/gases/
Thanks,
Brian
Hi Brian,
Thanks for the link. You will just need one small change: The
9in the code needs to be changed to a19for you, as that’s your table’s ID.Best wishes,
TobiasHa! Of course. I was wondering about the significance of the wrapper definition. This works, and I repeated the CSS for another table with another ID (there is probably a more elegant way to handle multiple tables, but it works).
Hi @brianscully,
no problem, you are very welcome! 🙂 Good to hear that this helped!
Best wishes,
TobiasP.S.: In case you haven’t, please rate TablePress in the plugin directory. Thanks!
The topic ‘Css code for 3.0 update’ is closed to new replies.