IMTanuki

Works!

Color settings work on desktop, but not on mobile!

BTW, I reference “@media only screen ” (maybe not a good idea) and it doesn’t seem to work when I simulate a mobile form factor from a desktop…

We’re getting there!!!

Is there any way to get rid of the padding on the left of the labels, such that labels are closer to the left table border and the data has more space? By nature, label text should only be 10-15 characters, whereas data fields can be much longer and will wrap numerous lines (5 in this example).

This looks a lot nicer than many low code apps!

PROGRESS

Here is the CSS that almost works. Outstanding issues:
– content doesn’t work unless I add !Important.
– color still doesn’t work if I change content with !Important.
– the left arrow (PREV) is too close to the text (PREV) and neither padding-right nor left seem to work (but padding-bottom does!)

CSS
/* TABLEPRESS – COMMON – PAGINATION – CONTROL OVERRIDES – ARROW SYMBOLS*/
/* COMMON TO PREV AND NEXT*/
.paging_simple .paginate_button.previous:before,
.paging_simple .paginate_button.next:after {
color: #9476c9 !Important; (DOESN’T WORK IF CONTENT IS IMPORTANT)
font-family: Abel;
font-weight: normal;
text-shadow: none !Important;
padding-bottom: 15px !Important;
vertical-align: middle !Important;
}

/* SPECIFIC TO PREV */
.paging_simple .paginate_button.previous:before {
content: “\25C0” !Important;
padding-right: 30px !Important; (DOESN’T CHANGE HORIZ POS)
text-align: left;
left: auto;
}

/* SPECIFIC TO NEXT */
.paging_simple .paginate_button.next:after {
content: “\25B6” !Important;
text-align: right;
left: auto;
}

Tobias,

Different combinations get inconsistent results:

1. COLOR WORKS, BUT NOT ICON
.paging_simple .paginate_button.previous:before,
.paging_simple .paginate_button.next:after {
color: #9476c9; (CHANGES CHEVRON COLOR)
font-weight: normal;
-webkit-font-smoothing: antialiased;
content: “\25B6”; (DOES NOT CHANGE CHEVRON SYMBOL)
text-shadow: 0.1em 0.1em #777777; (CHANGES CHEVRON SHADOW)
}

2. ICON WORKS, BUT NOT COLOR
.paging_simple .paginate_button.previous:before,
.paging_simple .paginate_button.next:after {
color: #9476c9 !Important; (IGNORES THIS SETTING)
font-family: Abel;
font-weight: normal;
-webkit-font-smoothing: antialiased;
content: “\25B6” !Important; (NOW WORKS)
text-shadow: none !Important;
vertical-align: middle !Important;
}

3. LEFT VS RIGHT ICONS FOR PREV AND NEXT
– The original CSS displays a LEFT and RIGHT chevron for PREV and NEXT respectively.
– The CSS above displays ONLY the RIGHT arrow for both PREV and NEXT.

• This reply was modified 6 years, 11 months ago by IMTanuki.
• This reply was modified 6 years, 11 months ago by IMTanuki.
• This reply was modified 6 years, 11 months ago by IMTanuki.
• This reply was modified 6 years, 11 months ago by IMTanuki.
• This reply was modified 6 years, 11 months ago by IMTanuki.
• This reply was modified 6 years, 11 months ago by IMTanuki.
• This reply was modified 6 years, 11 months ago by IMTanuki.

Tobias,

There’s quite a bit of CSS that seems to manage the pagination controls.

ARROWS
– I was able to change the color scheme for the arrows.

PREV / NEXT TEXT FORMATTING
– I was able to remove the underline.
– But for some reason, I can’t change the color.

Am I in the right section…?
.dataTables_paginate a {
color: #777777 !Important; (THIS DOESN’T WORK)
text-decoration: none !important; (THIS WORKS)
}

Tobias,

Thanks.

Even with text fields that are less than 50 char, it seems that responsive / collapse mode will avoid collapsing whenever possible, including wrapping column values. On mobile devices, this looks really cluttered.

–> You may want to update the extension documentation to note that responsive / collapse mode needs a combination of:

– width: nn px;
– white-space: nowrap;

I’m beginning to think I need 2 sets of CSS for each table…

Tobias

Thanks! This looks like it would be very useful with responsive collapse mode – by setting the first (second) columns to a fixed width, that would force a consistent “break”, such that you could force which columns are hidden / displayed in collapsed / uncollapsed mode.

The problem with % is that it’s relative to all columns – as you add more columns, the px width becomes smaller and that will affect which columns appear in the initial uncollapsed list.

I’ll give this a try.

–> You may want to add this to your extension doc, so that users know how to use fixed width to force which columns appear in the initial list.

• This reply was modified 6 years, 11 months ago by IMTanuki.
• This reply was modified 6 years, 11 months ago by IMTanuki.

Tobias,

Try this:

https://dev03.altchinese.com/01-04-01-04-characters-component-patterns-en/

I turned off white-space: nowrap;

Pls note – because of the way I test for screen size, you actually have to test this on a mobile phone (resizing a desktop screen won’t work).

Thanks!

It doesn’t look like it.

The vendor has a portal connector to various CRM packages – I’ve asked them about pulling data from the CRM database.

But, just looking at the setup, you’d have to have connect strings and other params to work with an MySQL DB and this plugin doesn’t have that.

FIXED

Turns out I had added default width setting for all tables:

width: 100% Important

Reset to 50% and now everything is OK…

UPDATE

Set nowrap at the table level…
.tablepress-id-13 tbody td
{
white-space: nowrap;
}

1. mobile works fine
2. desktop still not working…

UPDATE
When I use white-space: nowrap:

– the overall formatting is “correct” – labels and values are cleanly separated.
– any long text that would otherwise wrap is now truncated. Not great, but better than wrapping under the label…

Not a perfect solution, but OK for now.

If you’ve got anything better, pls let me know!

Aha! Added white-space: nowrap; and that seems to force it to invoke collapse mode…but…
– in this case, nowrap works only because the values for each row are fairly brief.

Is there any other method I can use?