rvonting
Forum Replies Created
-
You are the best. Worked like a charm. I created this table several years ago and don’t remember hiding a column, but the fix worked. Easy enough for a non-technical person to follow.
Forum: Plugins
In reply to: [TablePress - Tables in WordPress made easy] Tablepress column widthsI should have noticed that. Thank you for the quick answer.
That works great. Hard to believe I got so much help directly from the creator of the plugin. Thank you very much.
Roger
Tobias,
I really appreciate all the time you are giving me on this. I still like having the fixed header even on the mobile device. Is there a way to get it to stay fixed closer to the top of the mobile screen? We used the code below to fix the header at 80 pixels below the top of the webpage on a PC. Is there a separate command to fix the header in a location only on a mobile device?
[table id=1 datatables_fixedheader=top datatables_fixedheader_offsettop=80 row_highlight=”row-empty” /]
For the width of the columns, if I change the width to 15px to 200px and there is no change to the way it looks on a pc or the mobile device. I am using an Apple Iphone, maybe different on an Android device. On my apple device when I hold the phone on “portrait” part of column 6 is chopped off. The same amount is chopped off whether the column width is 15 or 200. The search field is placed on top of the header hovering over columns 3 through 5. When I turn the phone on its side in landscape, then the columns do not take up the full width of the screen. The search field is then as far right as possible on the mobile screen and the far right side of column 6 is lined up even with the colon in “Search: [ Field ]. Is there a way to get the 6 columns to take up all of the space? The four options listed in the “responsive tables extension 1.7″ don’t seem to apply. Flip, collapse and stack won’t seem to work. I installed the extension and tried scroll. I put the below in the shortcode.
[table id=1 datatables_fixedheader=top datatables_fixedheader_offsettop=80 row_highlight=”row-empty” responsive=scroll responsive_breakpoint=”phone” /]
Right now this is in the plug in options section under custom CSS. I made the width 200px just to test and see what happens. I don’t see any big difference between 200px and 20px.
.tablepress-id-1 .column-1,
.tablepress-id-1 .column-2,
.tablepress-id-1 .column-3,
.tablepress-id-1 .column-4,
.tablepress-id-1 .column-5,
.tablepress-id-1 .column-6 {
width: 200px;
}The only change to the view on the phone in portrait is that the sixth column is not showing at all vs half showed before. The scroll bar seems to be sitting at the very end of the table instead of at the end of the mobile screen. It is also barely visible and disappears and gets mixed up with the phone’s navigation menu at the bottom of the screen.
When the phone is turned to landscape view, the visibility is the same as without the extension and shortcode adjustment made above.
Thanks,
Roger
Thanks Tobias, that worked for the highlighting. Will save me a lot of time as I won’t have to write code for every empty row. I know I will lose that visual highlight separating years if a user decides to sort by column, but many won’t do that.
On the height of the header, I had used 115 as that was matching up with the shading around the bottom of the navigation bar. Making it 80 chops off some of the letters in “Friends of Davis Rowing” on the left of the navigation bar when viewing the website on a PC. But, I have noticed that when viewing on a mobile device the menu bar is not there and the taller the header is the more centered the header is when scrolling down through the table, obstructing the view for the user. Not sure how to fix that. Any ideas?
On a PC the final column 6 sits right under the “search” box. and nicely fills out the page. On a mobile device the columns are narrower and don’t take up all the space on the mobile screen. Instead of lining up even with, right aligned, with the search field, they are pushed to the left. This makes the rows taller and limits the number of rows that can be seen on the mobile device. I have the column widths set to all be 15px. Changing them to 25px or more doesn’t seem to make a difference. The columns only use up about 2/3 of the width of the screen on a mobile device when turned landscape.
Is there any way to utilize the rest of the space on the phone?
Roger
To be clear the fixed header and the centering of columns is working. I added a 7thy column and it is hidden using the custom CSS code you provided. The only issue is the row highlighting.
I have installed the TablePress Extension: Row Highlighting
I have the following in the short code:
[table id=1 datatables_fixedheader=top datatables_fixedheader_offsettop=115 row_highlight=”row-empty” /]
I have this in the custom CSS under the plugin options:
.tablepress-id-1 .column-7 {
display: none;
}.tablepress-id-1 .highlight-row-empty td {
background-color: blue !important;
}In the table in the cell of row 2 and column 7 I typed “row-empty” without the quotes.
Row 2 is not highlighted blue. What am I missing?
Sorry for not being able to follow your instructions better, as you can tell I am a beginner. Thanks for your patience.
Roger
I see part of the change you gave me to the shortcode was taking care of keeping the fixed header below the navigation bar.
Do I need to add something to the short code to tell it to look for the keyword “row-empty” in column 7?
would the keyword just be typed into the empty row cells on column 7 or would I need to type in “row-empty” in every column on each empty row?
The fixed header was not working in the preview of a draft but appears to be working in the published page. Same with the centering of the column text.
I did put the following in the shortcode:
[table id=1 datatables_fixedheader=top /]
I also put the following in the custom CSS section of the the plugin options to make the header row a little taller so that the header text fit in there and the columns didn’t get too wide.
.tablepress-id-1 .row-1 td {
padding-top: 20px;
padding-bottom: 20px;
}What else am I supposed to do to make the fixed header stay below the navigation bar? And is there anything I can do to make the fixed header use the entire height of the header row vs it seems to be chopping off part of the header when it becomes fixed.
Roger
Sorry, the page was not published. I was thinking the link would take you to the draft preview. I have published it now to help you view and the link is below.