WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded
[resolved] Search box runs off page (24 posts)

  1. BonnieLeePanda
    Member
    Posted 1 year ago #

    Hi!

    The search box runs off the page for some reason. You can see it here.
    https://support.cfsystemsonline.com/?page_id=16&preview=true&preview_id=16&preview_nonce=4a60a86cd5
    Any suggestions??

    Thanks!
    this table rocks!!!

    http://wordpress.org/extend/plugins/wp-table-reloaded/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your post.

    Unfortunately, I can't check your table, as the link you have posted only links to a page preview, which is not accessible for outside users, but only registered/logged-in users of your site.
    Could you therefore please publish that page, so that I can take a look?

    Thanks,
    Tobias

  3. BonnieLeePanda
    Member
    Posted 1 year ago #

    Hi Tobias!!!

    Thanks so much for responding. Sorry I didn't give you the right link. Here's where I uploaded the table. :)

    https://support.cfsystemsonline.com/?page_id=16

    thanks so much for your help!!

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for the new link! Now I can see your table! :-)

    The reason for this behavior is in your theme, which sets some weird default CSS code for form elements on your page.

    To fix this, please add the following code to the "Custom CSS" textarea on the "Plugin Options" screen of WP-Table Reloaded.

    .dataTables_filter label,
    .dataTables_filter input,
    dataTables_length label,
    dataTables_length select {
      float: none;
      width: auto;
    }

    Regards,
    Tobias

  5. azizhaf
    Member
    Posted 1 year ago #

    Hi Tobias,

    i am new in WP and i want to display a search box in which a light color text should be displayed "search by Name". and when a user click on a search box the text should be disappeared. Can you help me please i am waiting for your kind and quick response.

    Regards,
    Aziz

  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Aziz,

    thanks for your question.

    Unfortunately, I can not directly help with this, as this seems to be more of a theme related question. You might want to try in the Themes and Templates section of the forums.

    Or do you want this for search box that you get above a table that was made with the WP-Table Reloaded plugin?

    Regards,
    Tobias

  7. BonnieLeePanda
    Member
    Posted 1 year ago #

    Thank you Tobias! That looks beautiful now. I ended up putting float:right so the search: would be on one line and the box be on the next. Looks great. Thanks!!! :)

  8. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    awesome! Great to hear that this worked so nicely!

    Best wishes,
    Tobias

  9. azizhaf
    Member
    Posted 1 year ago #

    Thanks Tobias for your response,
    yes i am interested in the search box that is displayed above the table and it is related to the WP-Table Reloaded plugin. Have you any guideline please help me out.

    Regards,
    Aziz

  10. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Aziz,

    thanks for the clarification! Then this is of course the correct place to ask!

    The best way that I see for this is to use the HTML5 "placeholder" attribute. Please try adding the following code to the "functions.php" of your theme or into a small new plugin.

    add_filter( 'wp_table_reloaded_js_frontend_all_commands', 'wp_table_reloaded_add_filter_placeholder' );
    function wp_table_reloaded_add_filter_placeholder( $commands ) {
      $commands .= '$(".dataTables_filter input").attr("placeholder", "Search by Name");';
      return $commands;
    }

    This will add "Search by Name" to the search field of all tables.

    Regards,
    Tobias

  11. BonnieLeePanda
    Member
    Posted 1 year ago #

    Hi Tobias, so the search box is not not running off the page, but is there a way to make the search box longer, and the show entries box shorter??

    https://support.cfsystemsonline.com/?page_id=16

  12. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    ah, I made a mistake in my code above.

    Can you please try again with

    .dataTables_filter label,
    .dataTables_filter input,
    .dataTables_length label,
    .dataTables_length select {
      float: none;
      width: auto;
    }
    .dataTables_filter input {
      width: 150px;
    }

    And to you really want the "Search:" and the search field on different lines? To me, that just looks wrong and ugly...

    Regards,
    Tobias

  13. BonnieLeePanda
    Member
    Posted 1 year ago #

    Tobias, you made it look beautiful!!!! Thank you! No I don't want it on two lines, that's just perfect! Thank you thank you thank you! :):):):)

  14. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    sure, no problem! :-) You are very welcome! Good to hear that you like it now!

    Best wishes,
    Tobias

  15. azizhaf
    Member
    Posted 1 year ago #

    Dear Tobias,

    As per our earlier conversation, you gave me a chunk of code i.e mention below. `add_filter( 'wp_table_reloaded_js_frontend_all_commands', 'wp_table_reloaded_add_filter_placeholder' );
    function wp_table_reloaded_add_filter_placeholder( $commands ) {
    $commands .= '$(".dataTables_filter input").attr("placeholder", "Search by Name");';
    return $commands;
    }`

    whenever i apply this chunk of code my whole site crashed ... but when i replace the original file its working again. please tell me what i do wrong. waiting your kind response.

    Regards,
    Aziz

  16. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    What does "my whole site crashed" mean? Do you get any error messages?

    And where exactly did you place this code? It should go at the end of the "functions.php" file of your theme (before the ?> at the end), or into a small "Plugin Extension, which needs to be created with the instructions at http://tobias.baethge.com/2009/12/introducing-wp-table-reloaded-extensions/

    Regards,
    Tobias

  17. azizhaf
    Member
    Posted 1 year ago #

    Hi Tobias,

    crashed mean 504 error has been occurred " something goes wrong with the server". displayed and i was edited the file that is placed in the "/wp-content/plugins/contact-form-7/includes"

    But after i replace the original file then the error was gone and now after reading your instructions i edited the functions.php file located at/wp-content/themes/invictus but nothing is happen. please help me out. Thanks

    Regards,
    Aziz

  18. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    can you please post the link to the page with the table? I can then check if the code was inserted into the page correctly.

    Regards,
    Tobias

  19. azizhaf
    Member
    Posted 1 year ago #

    Hi,

    please find below link and in the tender table i want the placeholder in the search box. waiting your kind and quick response. Thanks

    Regards,
    Aziz

  20. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Aziz,

    unfortunately, your post doesn't contain a link... Can you please try again?

    Thanks,
    Tobias

  21. azizhaf
    Member
    Posted 1 year ago #

    HI Tobias,

    Plz find below link.

    http://test.pdma.gop.pk/tenders/

  22. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for the link! Now I can see your table.
    From what I can see, the code is inserted successfully, but probably executed to early. Namely, the filter input is not yet in the page, when the code tries to change the placeholder.
    Therefore, please try again with this code:

    add_filter( 'wp_table_reloaded_js_frontend_all_commands', 'wp_table_reloaded_add_filter_placeholder' );
    function wp_table_reloaded_add_filter_placeholder( $commands ) {
      $commands .= 'setTimeout(function() { jQuery(".dataTables_filter input").attr("placeholder", "Search by Name"); }, 400);';
      return $commands;
    }

    With this, the code will be delayed a little bit, so that the input field should be in the page.

    Regards,
    Tobias

  23. azizhaf
    Member
    Posted 1 year ago #

    Dear Tobias,

    looking Cool now, Bundle of Thanks for your cooperation and your quick response. Will disturb you again ;)

    Regards,
    Aziz

  24. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Aziz,

    great to hear that it is working now :-) Thanks for the confirmation!

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic