button layout of searchpanes

mvwieringen

When looking at the example

https://datatables.net/extensions/searchpanes/examples/styling/bootstrap4.html

I See the same problem with bootstrap4 for the search button of the searchpanes plugin e.g. its
sized to big at least bigger then the clear button. It also seems the two sort buttons are sized to small
as some pixels are just cut off. I see this in both firefox and chrome so its not a misrender by a specific browser.

Marco

sandy

Hi @mvwieringen ,

Thank you for spotting that. That should be the issue fixed now as you can see at this example. This will be available in the next SearchPanes release which we hope will be in the next few weeks. Until then you can access the fix from the nightly builds.

Thanks,
Sandy

mvwieringen

Ok, but your new example still shows the search button being the same size as the textbox but the two sort buttons now have the same height as the clear button. Shouldn't the search button also have the same height ?

sandy

Hi @mvwieringen ,

The heights were the same, do you mean widths? I noticed a small difference between the clear and sort so I got that fixed, take a look at this example.

Thanks,
Sandy

mvwieringen

Hi, @sandy

No i mean the height but I think I understand what is happening. The Search button probably is sized accordingly to
the size of the text box in front of it. So its height is bigger then the 3 buttons after that. That kind of thrown me off that
its not a text-box and 4 buttons but a text-box with button and 3 extra buttons.

Marco

sandy

Hi @mvwieringen ,

Yes you are correct that it is a text box with a button and then three seperate buttons, but I'm seeing the heights as the same. See the picture below, I added a border to perhaps make this clearer.

Thanks,
Sandy

sandy

If you are seeing a different behaviour please provide a test case. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Thanks,
Sandy

mvwieringen

Hi, @sandy

Strange you get things aligned correctly I tested it now on windows in google chrome and with edge and see
there the same as on Linux in both Firefox and Chrome there e.g.

e.g. the first button has the same height as the text box and the 3 others are smaller.

But I unbderstand now it renders ok for you so I also understand why you see nothing wrong.
I really have no clue as to why it renders wrong with both the example and with any code using the 1.1.1 version.

Marco

sandy

Hi @mvwieringen ,

That is really weird! What browser versions are you using?

Thanks,
Sandy

colin

I've tried it on Android and Linux and the icons are the same for me too - so yep, as Sandy said, any additional info would be helpful,

Colin

mvwieringen

Hi, @sandy

I'm using google chrome 83.0.4103.106 on Ubuntu 20.04 but see the same with Firefox 77.0.1 again on ubuntu 20.04 but to be sure it was not the Linux client I alo tested windows with chrome and firefox there both around the same
versions as on Linux. I also cleared all content in chrome using ctrl-shift-del and reven restarted my proxy but I still
get the wrongly rendered button sizes.

Marco

sandy

Hi @mvwieringen ,

Maybe you have a font issue on your computer? Although we couldn't say for sure. At the moment because we can't reproduce it there isn't anything we can do to fix it, sorry.

If you (or anyone else viewing this now or in the future) have any additional clues or information on this then please do report it here so that we can try to trace it down.

Thanks,
Sandy

colin

It would also be worth trying in private browsing mode, just to make sure no extensions are at play here,

Colin