Customize search bar

  • Resolved duber777

    (@duber777)


    5 years, 9 months ago

    Hello.
    Please tell CSS for increase the width of the search bar (field) and how to put it in the center of the table header ?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author WBW Plugins

    (@woobewoo)

    5 years, 9 months ago

    Hello @duber777,

    If you do not use filters, then the search can be moved to the center by adding this style to the tab for custom styles: https://prnt.sc/t9doc4

    .wtbpTableWrapper .dataTables_filter {
display: block;
float: none;
    text-align: center;
}

    To increase the width use this style:

    .wtbpTableWrapper .dataTables_filter input {
width: 200px;
}
    Thread Starter duber777

    (@duber777)

    5 years, 9 months ago

    Hi.
    During this time i found a solution:

    .wtbpTableWrapper .dataTables_filter label {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -40px);
}	
.wtbpTableWrapper .dataTables_filter input[type=search] {
	width: 300px !important;
}

    but your version is better – it doesn’t break the layout, thanks.

    By the way, for some reason styles are not applied without !important
    at least on the Astra theme.

    • This reply was modified 5 years, 9 months ago by duber777.
    • This reply was modified 5 years, 9 months ago by duber777.
    • This reply was modified 5 years, 9 months ago by duber777.
    Plugin Author WBW Plugins

    (@woobewoo)

    5 years, 9 months ago

    Hi.

    Thank you, we will check the priority of custom styles.

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

The topic ‘Customize search bar’ is closed to new replies.