Pogo88 casino login.Makakuha ng libreng 700pho sa bawat deposito

Resolved bamster
(@bamster)

4 years, 1 month ago

Hi Tobias. Here’s the second question in my series about my first go-round with TablePress.

This is what I want to achieve:
Desktop
– narrower than full container width
– EVENTUALLY, centered
– EVENTUALLY, columns of different widths to accommodate different content

Mobile
– full screen width
– text wrapping
– no horizontal scrolling

I will focus in this request on making the table 1) narrower than the full container width on desktop, and 2) full screen width on mobile without needing horizontal scrolling.

My site is running the Enfold theme. My container width is 1310px. In TablePress, I am using the DataTables JS library because I need sorting to be activated.

This is my page for testing TablePress:
https://www.missouriartscouncil.org/a_test-of-tablepress

I have coded the tables with four different CSS options to regulate the width. For each of these options, I have coded horizontal scrolling Unchecked and checked. In summary:

1 – no CSS; TablePress default of 100% container width; scrolling UNchecked
1a – scrolling checked
2 – width 100%; scrolling UNchecked
2a – scrolling checked
3 – width 1000px; scrolling UNchecked
3a – scrolling checked
4 – width 75%; scrolling UNchecked
4a – scrolling checked

NOTE: I don’t want to use horizontal scrolling on mobile, but I built tables with that option to see what would happen.

CSS for 2&2a, 3&3a, 4&4a

.dataTables_wrapper .tablepress-id-2 {
width: 100% !important;
}
(And id-6, which is 2a)

.dataTables_wrapper .tablepress-id-3 {
width: 1000px !important;
}
(and id-7, which is 3a)
.dataTables_wrapper .tablepress-id-4 {
width: 75% !important;
}
(and id-8, which is 4a)

As you’ll see when you view the test page, results were wildly disparate.

I can get the result on mobile that I want – full screen width, text wrapping, no scrolling – only if on desktop the table is full container width. (Tables 1, 1a, 2, and 2a)
(NOTE: On 2a, scrolling is checked, but it is not showing up. Huh?)

If I try narrowing the table on desktop via pixels, I get weird results (Tables 3 and 3a):
– scrolling Unchecked, desktop narrows (yay!), but mobile’s columns are so wide they run off the screen
– scrolling checked, desktop does not narrow (remains full container width), mobile is perfect BUT there is no scrolling even though scrolling is checked (huh?)

If I try narrowing the table on desktop via percentages, I also get weird results (Tables 4 and 4a):
– scrolling Unchecked, desktop narrows (yay!), but scrolling DOES show up (huh?), and the columns run off the screen
– scrolling checked, table’s header on desktop is narrower than the columns, mobile’s scrolling does NOT show up (huh?), table is narrower than full screen width

In sum
Not one of the eight combinations of CSS code and scrolling checked/unchecked results in this:

Desktop
– narrower than full container width

Mobile
– full screen width
– text wrapping
– no horizontal scrolling

I’m not even talking yet about some of the other things I want:
– table centered on desktop
– border around the table going all the way around instead of only the top and the left side
– no “edit” capability for the user on the front end (see lower left corner of tables)

For those, later! ??

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

Viewing 1 replies (of 1 total)

Plugin Author TobiasBg
(@tobiasbg)

4 years, 1 month ago
Hi,

thanks for your post, and sorry for the trouble.

Here, you’ll need to work with CSS3 Media Queries, to set different widths based on the screen size. In addition, it might make sense to set the width of the container element of the table, and not the table itself.

Please give this a try (from a “fresh” state, i.e. without any of your CSS):
```
.tablepress {
  border: 1px solid #000000;
}
@media screen and (min-width: 768px) {
  .dataTables_wrapper {
    width: 80%;
    margin: 0 auto;
  }
}
```
This should add the border and reduce the size of the table (to 80% screen width) and center it, on screen wider than 768px.

(And about your last requirement, regarding the “Edit” capability: This will only be shown to logged-in users that are allowed to edit the table. Regular site visitors will of course not see this. If you really want to hide it for everybody, including yourself when logged-in, you can use https://tablepress.org/extensions/remove-edit-link/ ).

Regards,
Tobias

Viewing 1 replies (of 1 total)

The topic ‘Make table narrower than desktop container width plus responsive on mobile?’ is closed to new replies.

Tags