DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Sort Order Indicators too small

Sort Order Indicators too small

hpegmslicensemgmthpegmslicensemgmt Posts: 21Questions: 6Answers: 0
in DataTables

Dear all,
In the new version of DataTables, the sort order indicators have shrunk ...

Is there any way to get them bigger again, so that even old men can see them :-)

Best regards,
David

Replies

  • hpegmslicensemgmthpegmslicensemgmt Posts: 21Questions: 6Answers: 0

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    They look really small in your screenshot. What browser and OS are you using there?

    They look like this for me (Firefox, OpenSuSE Tumbleweed):

    table.dataTable thead > tr > th.sorting::before,
table.dataTable thead > tr > th.sorting::after {
  font-size: 1em;
}

    will make them bigger with 1.12: http://live.datatables.net/zurikeka/1/edit .

    Allan

  • hpegmslicensemgmthpegmslicensemgmt Posts: 21Questions: 6Answers: 0

  • hpegmslicensemgmthpegmslicensemgmt Posts: 21Questions: 6Answers: 0

    Hmmm, even in your example pages I see the sort order indicators very small...
    Running Chrome on Windows 10 and also tried with Edge... and also the same from my Business VDI...

  • hpegmslicensemgmthpegmslicensemgmt Posts: 21Questions: 6Answers: 0

  • hpegmslicensemgmthpegmslicensemgmt Posts: 21Questions: 6Answers: 0

    On your entry page they are normal size....

    On a former version of Datatables (in another project) it worked well:

    • Included libraries:
    • JSZip 2.5.0, pdfmake 0.1.36, DataTables 1.10.21, AutoFill 2.3.5, Buttons 1.6.3, Column visibility 1.6.3, Flash export 1.6.3, HTML5 export 1.6.3, Print view 1.6.3, ColReorder 1.5.2, FixedColumns 3.3.1, FixedHeader 3.1.7, KeyTable 2.5.2, Responsive 2.2.5, RowGroup 1.1.2, RowReorder 1.2.7, Scroller 2.0.2, SearchPanes 1.1.1, Select 1.3.1
      */

    I've recently upgraded to the newest Datatables version.

    Best regards,
    David

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    The old version of DataTables used images for the sorting icons. 1.12 replaced that with UTF8 characters which can be easily coloured and size changed.

    Very odd indeed that the examples and the landing page show different sizes for you - they all use the same code.

    Allan

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    I'm wondering if perhaps we should set it to a fixed pixel size rather than being em based... Reason being is that if a page has a small base font-size, the icons will be reduced in size automatically. Might that be what is happening on your own pages?

    Allan

  • lenamtllenamtl Posts: 265Questions: 65Answers: 1
    edited August 2022

    I do agree with @hpegmslicensemgmt , these are not enough visible and not intuitive
    The old icons was using 3 icons unsorted, asc, desc and they were a lot bigger.
    I'm trying to get the old icons back for my project.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    I think they look about the right size here - I wouldn't want them any bigger.

    Can you give me a link to your page showing how they are for you please? It might be the font-size on your page causing them to be really small.

    Allan

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    edited August 2022

    They look fine in that example. However the BS5 example on a Mac with Chrome is small and different sizes for ASC and DESC, for example:

    The BS 3 and 4 examples look the same.

    Kevin

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    I think that has been fixed with this commit. I need to get that punted out with a new release.

    Allan

  • lenamtllenamtl Posts: 265Questions: 65Answers: 1

    Here is what I see BS5

    The problem with 2 arrow using bigger size is the space between the two will be small and maybe not userfriendly.

    I rever back to the old icon method that 1.10 using (3 seperate icons 100%)

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Have you tried using the nightly?

    Allan

  • lenamtllenamtl Posts: 265Questions: 65Answers: 1
    edited August 2022

    Using the nightly
    The arrow does not have enough space between the two.
    I found it less intuitive especialy when no sort.

    I still prefer the old icon method, 1 icon for each at 100% instead of 2 icon at 50%
    Something like this, but I will set a more darker color.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    The old icons were Bootstrap specific, and I wanted something that would work across all styling frameworks to make the maintenance of it easier. What browser and OS are you using point?

    Thanks,
    Allan

  • lenamtllenamtl Posts: 265Questions: 65Answers: 1
    edited August 2022

    Hi,

    I understand..

    I'm using Chrome and Opera PC / Windows
    I have checked on other computers and the space between the two is a bit more visibe but not much.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Do you have zoom set on the page perhaps?

    Allan

  • lenamtllenamtl Posts: 265Questions: 65Answers: 1

    No zoom, 100%

Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.