Making the search bar larger and more obvious?

  • Resolved Violutus

    (@violutus)


    9 years, 5 months ago

    I’ve had a few users tell me they didn’t know I had search bars on my tables until I pointed them out, and I suppose coming from a fresh perspective, of not knowing where it is to begin with, might be confusing.

    Is there any way I can make the search bar be as wide as the table?

    As well as put the “Search:” inside the search bar instead of in front of it?

    https://www.ads-software.com/plugins/tablepress/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Yes, this is possible with some “Custom CSS”. To find that code, I’d need to take a look at the table. Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

    Thread Starter Violutus

    (@violutus)

    Sure,

    https://hubframe.com/conclave-rewards/

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for the link!

    To move the search text into the field, please add this to the “Custom Commands” textfield on the table’s “Edit” screen:

    "language": { "search": "_INPUT_", "searchPlaceholder": "Search..." }

    To then center and increase the size of the search field, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .dataTables_filter {
	float: none;
}
.dataTables_filter label input {
	width: 100%;
	font-size: 18px;
}

    Regards,
    Tobias

    Thread Starter Violutus

    (@violutus)

    Hi,

    I forgot to come back and say thanks for the help. Thank you.

    However I am now experiencing a related problem, I recently changed my tables so they have the pagination drop down menu, so the user can select how many rows to display.

    Now the search bar is off to one side, and extends beyond the page border, and gets cut off.

    How can I fix this?

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    you could change

    .dataTables_filter {
	float: none;
}

    to

    .dataTables_filter {
	float: none;
	clear: both;
}

    to move it to a separate line again.

    Regards,
    Tobias

    Thread Starter Violutus

    (@violutus)

    Thanks!

    Plugin Author Tobias B?thge

    (@tobiasbg)

    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 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Making the search bar larger and more obvious?’ is closed to new replies.