Search and Filter Buttons

Hi,

I’d like to fix the search and search filter buttons that show when the theme is applied and NinjaTables is utilized, i’ve tried a whole lot of ways to add a gap between the search box and the buttons and also to control the size but for whatever reason I can’t seem to get a consistent output.

Ideally i’d like some gap between the search box and the buttons and also a gap between the buttons themselves, i’d also like to control the height and width of the buttons to make things look a little more appropriately sized, both normal and hover. A less than ideal but entirely workable solution would be to just escape the css style altogether and just apply the default styling to those buttons.

Screenshots attached as this is an internal site, any help is greatly appreciated.

Thanks

Quick addition, this is what I have so far (mainly playing with controlling the width)

.footable .btn {
	padding: 10px;
	font-size:12pt !important;
	min-width: 100%;
}

Hi there
Hope you are having a good day and thank you for your question :slight_smile:
In order to check your question i need to see your live website, please provide url and i will take a look

Thanks for your response, here is a link to the test page (this is an internal site so all other links are behind SSO)

https://app.civilcorp.us/test-page/

Thanks again

Hey there

please try this css codes

.foo-table .form-group.footable-filtering-search input.form-control {
height: 40px;
}
.foo-table .form-group.footable-filtering-search .input-group-btn>button {
height: 40px !important;
color: white;
}

Thanks for the response, the additional CSS code seems to have fixed the height issue on the search button however the search filter button mouse-over event is still causing everything to shift, additionally, is there any way to add a gap between each button so they are not all stuck together?

Thanks

Hi There,
Thanks for getting back to me.
To prevent the ‘button resize’ on hover, you can use the following custom CSS.

.foo-table .form-group.footable-filtering-search .input-group-btn>.btn-default:hover {
border: 1px solid#2e3f83 !important;
}
As for the spacing, you can use the following custom CSS to add a margin to the buttons.
.foo-table .form-group.footable-filtering-search .input-group-btn>.btn{
margin-left: .2em !important;
}
Hope this helps.