Tablepress Fixed Header extension – problem due to shortcode

  • Resolved spiderboy222

    (@spiderboy222)


    5 years, 11 months ago

    Hello,
    I am trying to use the Fixed Header extension. I see in the instructions that it shows to add some extra code into the shortcode, after the ID of the table. Well, I’m not sure to do that due to some variables on my site. I am using WordPress, latest version, with The 7 theme, and WP Bakery Page Builder. I don’t see a way to add screenshots into this post, but I’ll try to describe my issue.

    So, the way WP Bakery Page builder works, is that you add elements into the page, and then you modify the elements. When I add a shortcode element into a page for a table, when I go to modify that element, the only thing that I enter is the table ID, for example, 2. So WP Bakery Page builder is automatically inserting the rest of the code into the page, therefore I cannot edit the entire shortcode. I tried adding the extra code for the Fixed Header Extension after the ID # of a table, leaving off the ending bracket, but that just created an error on the page.

    For example, when I went to modify the element of one table, which was number 2, the only thing showing for me to modify in the element was: 2
    So, I added this after it: 2 datatables_fixedheader=top
    But that created an error on the page, so I tried it this way:
    2 datatables_fixedheader=top\
    That also created an error on the page.

    So, I don’t know how to add this extra code into the shortcode with the way it is structured using the WP Bakery page builder, since the page builder itself inserts all of the shortcode except the Table ID #. Do you have any ideas on how I can approach this? If you need to see screenshots of what I am talking about, can you explain to me how to add screenshots into this post?

    Thanks,

    Anthony

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 11 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    I’m not really sure what you mean, as I don’t know WP Bakery Page builder.
    Can you maybe create a screenshot and upload it to e.g. https://imgur.com/ and post a link here?

    Regards,
    Tobias

    Thread Starter spiderboy222

    (@spiderboy222)

    5 years, 11 months ago

    Hi Tobias,
    Thank you for your reply, and I apologize for the delayed response. I thought it would be easier to make a short video showing you what I am talking about. It took a long time to upload to youtube due to a slow internet connection.

    This is a private video, so nobody will see it without this link.

    Thanks,

    Anthony

    Thread Starter spiderboy222

    (@spiderboy222)

    5 years, 11 months ago

    Hi Tobias,
    I figured something out that may have me closer to a solution on this. I remembered that the WPBakery Page Builder settings has an area where I had to create an element for the shortcode to be able to be added. In their program it’s called a “shortcode mapper”. Anyway, I went into the settings of that, and there was an area where I could include a default value for the shortcode. So I added the extension code in there, and it created the following shortcode:

    [table id=”2 datatables_fixedheader=top /”]

    However, that did not prevent the header row from scrolling out of sight on the page, so something is causing a problem in that code. The software automatically generates that shortcode, and I noticed that it adds quotes before the ID number, and before the closing bracket. Do you think those quotes would cause the extension code not to work? If not, do you see anything in that code that maybe I entered incorrectly as a default value?

    Thanks,

    Anthony

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 11 months ago

    Hi Anthony,

    thanks for that screencast! I see what you mean now!

    Indeed, this WP Bakery Page builder feature with the “Table Shortcode” block does not seem to allow for customization with Shortcode parameters.
    (I do see a “gear” symbol in the header bar of that block. Does that maybe offer more options?)

    Therefore, I’d recommend to not use that, but a “normal” “Text block”. Then, you could add the full Shortcode into that text block.

    (For your second post, about the “shortcode mapper”: Yes, those “wrong” quotation marks would break things here, so that I can’t recommend this approach either.)

    Note that you might then also need to add that datatables_fixedheader_offsettop Shortcode parameter that is mentioned on the Extension’s page, because your site already seems to have a fixed navigation bar at the top.

    Regards,
    Tobias

    Thread Starter spiderboy222

    (@spiderboy222)

    5 years, 10 months ago

    Hi Tobias,
    Thank you for your reply. Sorry for the delayed response; I have just now had some time to focus on this.

    That’s a great idea on using a text block instead of the “shortcode mapper”. This has gotten me closer to a solution, but there is still a problem. This is the code that I have used in a text block:

    [table id=2 datatables_fixedheader=top datatables_fixedheader_offsettop=60 /]

    That is working, as far as the header remaining in position when I scroll down the page. However, for some reason, the table is losing it’s formatting when it is done in this manner. I’ll show you the difference in how it is showing with this code, versus how it should look with proper formatting, when it is displayed on another page that is still using the “shortcode mapper” table shortcode.

    This is the page with the code in the text block, with the incorrect formatting. You can see that the text is a different font/size, and the spacing in the header text is wrong, having a large space between each row of header text:

    https://genexhaust.com/magnetic-dipsticks-and-oil-change-tubes-will-fit-champion-models/

    Please also note, that on that page, the header row has three rows of text to display the header/title of each column, but when the page is scrolled, and the header remains in place, the top row of text disappears from the header.

    This is a page that has the correct formatting using the “shortcode mapper” table shortcode (but where the header is not fixed in position)

    https://genexhaust.com/magnetic-dipsticks-will-fit-firman-models/

    If you could possibly figure out why the formatting of the table is getting lost on the first page, I think this problem would be solved.

    Thanks,

    Anthony

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 10 months ago

    Hi Anthony,

    it looks like, from copy/paste, more than just the pure Shortcode was inserted into the Text block, namely HTML <pre> and </pre> tags.
    You should be seeing those when switching from the “Visual” to the “Text” editor of this Text block. Can you please try that and then remove everything that’s around the pure Shortcode?

    Regards,
    Tobias

    Thread Starter spiderboy222

    (@spiderboy222)

    5 years, 10 months ago

    Hi Tobias,
    My friend, you are truly brilliant. While the WP Bakery plugin does not have a traditional “text” editor side of things, it does have a “Gutenburg” editor, which appears to be essentially the same thing. This was the first time I have ever looked at anything through the gutenburg editor, as I am not really familiar with it at all.

    Before even checking the gutenburg editor, I pasted the code into a notepad document, and then copied it from there into the text block, and that corrected the formatting issue.

    The header row still cuts off just a bit, which appears to me that it is just slightly going underneath of the other fixed position header message for the page. If that cannot be changed, I can live with it this way. It does not look horrible this way, it just cuts off the top line of the header row.

    https://genexhaust.com/magnetic-dipsticks-and-oil-change-tubes-will-fit-champion-models/

    Is there any way to add any additional code in there that would position the header row just a little lower so that the top line stays visible? If not, it’s no big deal.

    Thanks,

    Anthony

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 10 months ago

    Hi,

    great to hear that it’s working now!

    I can’t really reproduce that problem with the header going under the other fixed header… That’s 60 pixels high, so things are aligning nicely for me.

    There is however a slight padding issue. To fix that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    body .tablepress th,
body .tablepress td {
  padding: 8px;
}

    Regards,
    Tobias

    Thread Starter spiderboy222

    (@spiderboy222)

    5 years, 10 months ago

    Hi Tobias,
    Thank you for your reply. I added that CSS underneath of the color CSS code in the Custom area. I cleared the cache, and opened a new private window using Firefox, and the issue is corrected.

    I checked it in several browsers and it displayed properly in each of them, with all three lines of text in the header row showing. So that problem is resolved. Thank you so much. I do have one last question if you don’t mind.

    When I created all of the tables for the pages that I have, I did so by importing excel spreadsheets, and then editing the table rows as necessary. That worked perfectly. My question is, let’s say I have an existing table, and later I need to add an additional 25 rows of data, with each row having 6 columns. Is it possible to import those additional 25 rows of data into an existing table from a separate spreadsheet, which only has those 25 rows of data on it? Or would all of that data have to be manually typed into the table?

    Thanks,

    Anthony

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 10 months ago

    Hi Anthony,

    when importing table data from a file, you can choose to create a new table, you can replace an existing table, or you can append the data to an existing table. From what I understand, the latter is what you want, right?

    Regards,
    Tobias

    Thread Starter spiderboy222

    (@spiderboy222)

    5 years, 10 months ago

    Hi Tobias,
    Correct, I would want to append the data to an existing table. Some of these tables have links on the data, which was time consuming to put in place. I just looked at the import area, and I see the append option for importing into an existing table. My apologies, I should have looked at that closer before asking. Hopefully whenever I need to use that option, I won’t have any issue.

    I think that answered that question, and I think I’m good to go now. 🙂

    Thank you so much for all of your help; it is greatly appreciated.

    Best regards,

    Anthony

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 10 months ago

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Tablepress Fixed Header extension – problem due to shortcode’ is closed to new replies.