Css code for 3.0 update

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,
Tobias

The 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,
Tobias

It 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,
Tobias

This works as well. Thank you very much for your quick and efficient support.

Hi @yellowtangylemon34,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

P.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,
Brian

Hi 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,
Tobias

Hi 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 9 in the code needs to be changed to a 19 for you, as that’s your table’s ID.

Best wishes,
Tobias

Ha! 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,
Tobias

P.S.: In case you haven’t, please rate TablePress in the plugin directory. Thanks!