Responsive Stylinog

  • Resolved armandoarrastia

    (@armandoarrastia)


    4 years, 11 months ago

    Hi Tobias. A couple questions for you…

    1) Is there a way to change the background color of (only) the SEARCH field from black to white, and to make the text entered into that SEARCH field black (for both desktop and responsive)? I want that field to stand out more than it does, especially on responsive, but both responsive and desktop would be great.

    2) I have installed your Responsive Tables Extension and set the table to collapse mode and I love it. The only thing is when I tap to expand the fields, the expanded section is initially blacked out. The user must tap again to make the text appear in black on a grey background. The black on grey is fine, but it would be better if the user did not need to tap again to see the content (text) in that expanded field. You’ll see if if you visit the page on a mobile device (I’m seeing this on iPhone 6s and Android (LG model).

    I sincerely appreciate your help.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    1) For this, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .dataTables_filter input {
	background-color: #ffffff !important;
	color: #000000 !important;
}

    2) For this, please also add:

    .tablepress .child {
	background-color: #ffffff;
}

    Regards,
    Tobias

    Thread Starter armandoarrastia

    (@armandoarrastia)

    Tobias, you are the best. Thank you!

    Where do I go to donate to your plugin?

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    great to hear that this helped ??

    And thanks for wanting to donate! Please go to https://tablepress.org/donate/ for that.

    Best wishes,
    Tobias

    Thread Starter armandoarrastia

    (@armandoarrastia)

    Hi Tobias. One more question please…

    I was using the “collapse” option for the responsive version of this table and it worked great in my view, but my client didn’t like it. So I’ve changed it to the “stack” mode. However, in Stack mode, the column headings are not appearing with the items in the rows, but they need to be visible. Is there a way to accomplish this?

    Here’s an annotated screenshot: https://www.screencast.com/t/XwomqGgJFAr2

    To be clear, the first row in the screenshot is the heading for Column 2; the second row is the heading for Column 3, etc.

    Thanks again!

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    I know what you mean, but unfortunately, for technical reasons, there’s no “automatic” way to add the headers in the stack mode.

    You could however add them using some manual CSS code. For example, add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    @media screen and (max-width: 767px) {
.tablepress-id-4 .column-1:before {
	content: "Item: ";
	font-weight: bold;
}
.tablepress-id-4 .column-2:before {
	content: "4 Hr Rental Fee: ";
	font-weight: bold;
}
.tablepress-id-4 .column-3:before {
	content: "24 Hr Rental Fee: ";
	font-weight: bold;
}
.tablepress-id-4 .column-4:before {
	content: "7-Day Rental Fee: ";
	font-weight: bold;
}
.tablepress-id-4 .column-5:before {
	content: "Monthly Rental Fee: ";
	font-weight: bold;
}
.tablepress-id-4 .column-6:before {
	content: "Notes/Video: ";
	font-weight: bold;
}
}

    Note that you have to update the desired header text in this CSS code as well, after changing it in the table.

    Regards,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Responsive Stylinog’ is closed to new replies.