Breaking elements in the mobile version

Hi,

thanks for your post, and sorry for the trouble.

The nowrap code does not have an influence on the width (except if cells where already wrapping on the desktop).
Now, I don’t see that code in the table, however, and I don’t see any ratings?

Regards,
Tobias

Hi Tobias,

now i add the nowrap to this css:

.tablepress-id-1 th,
.tablepress-id-1 td {
	border: 1px solid #cccccc;
	white-space: nowrap;
}

.tablepress-id-2 th,
.tablepress-id-2 td {
	border: 1px solid #cccccc;
	white-space: nowrap;
}

.tablepress-id-3 th,
.tablepress-id-3 td {
	border: 1px solid #cccccc;
	white-space: nowrap;
}

on the top, there are 3 tabs “Anstehend” “Laufend” and “Abgeschlossen”, the 1st and 2nd table have the same witdh, but the 3th one have other witdh.

Can it be because in the third table, under “End” there are sentences that are longer?

Can we not fix the width that it is in a line, but still breaks when it becomes too tight?

I also added a rating to each table now. The reason why a rating is not yet everywhere is because I want to solve the problem first.

Hi,

thanks!

I’m not sure why the ratings are not reacting to the nowrap. However, as we a <div> container in it, we can set its width:

.tablepress .rating_form_wrap {
  width: 220px;
}

to get everything to one line.

Now, the problem with the equal widths: Browser simply don’t really like setting column widths for a table that is too wide for the screen already. They will then usually not follow those instructions and reduce the width. You could maybe try the !important flag as well, but I have no seen reliable results ??

Regards,
Tobias

Hi Tobias,

Thanks, the star thing works great now. All in line.

I’ll have to accept that the same width doesn’t work now. If you can think of a trick or something to make all three columns the same width, I’d be happy if you could tell me.

Kind regards

Hello Tobias, I have another question

now I try to insert buttons. These are not in the middle (vertical) of the table, you know why?

with <center> I center the buttons horizontally. But they’re not centered vertically, am I doing something wrong? Everything else in the table is vertically centered.

here a picture: https://imgur.com/a/jgUhz

Hi,

it seems that the button has a margin. Please try adding this:

.tablepress .button {
	margin: 0;
	vertical-align: middle;
}

Regards,
Tobias

Very well, everything works out fine.
Have a nice evening!

Hi,

no problem! Same to you!

Best wishes,
Tobias

Hello, Tobias, I have one last question. sorry for the troubble

since we did something with the css, or only after I inserted the buttons, the table becomes very fuzzy on mobile (on smaller devices)

what could be the reason for this, have you ever experienced something like this?

here a picture: https://imgur.com/a/p8t1h

if i remove the buttons, the table is clear and sharp. Is this a theme issue? Should i ask the theme support?

Edit: now i see, if I deactivate the class “tablepress-scroll-wrapper”, it will be sharp. maybe it’s because of that?

• This reply was modified 6 years, 8 months ago by altcointrader.

Hi,

that’s very strange, and to be honest, I can’t remember seeing something like this before. Sorry ??

Regards,
Tobias

It definitely comes from the plugin extension:
TablePress Extension: Responsive Tables

If I deactivate your extension, it’ll be razor-sharp.
Any advice on what I can do?

Edit: And if I deactivate the plugin and activate “Horizontal scrolling” without the plugin, it becomes blurry again. How weird is that :O

• This reply was modified 6 years, 8 months ago by altcointrader.

Hi,

I still can’t reproduce this ??

Regards,
Tobias

Hello, Tboias

Ok thank you vermy much tobias for your effort.

I think i know what is the problem, it ist the “tabs” in combination with horizontal scroll.

if i put the table outside of the 3 Tabs, it works..

I think its a issue with the theme, now i decide to change my team from betheme to the7 because of this problem.

Thank you very much
Have a nice day

Hi,

that could be possible, indeed. Sorry that you have all this trouble! ??

Best wishes,
Tobias