DOM option (mobile form factor)

IMTanuki

environment:
- bootstrap 5.0.1
- jquery 3.6.0
- dt src https://cdn.datatables.net/v/bs5/dt-1.10.25/af-2.3.7/b-1.7.1/b-colvis-1.7.1/cr-1.5.4/date-1.1.0/fc-3.3.3/fh-3.1.9/kt-2.6.2/r-2.2.9/rg-1.1.3/rr-1.2.8/sc-2.0.4/sb-1.1.0/sp-1.3.0/sl-1.3.3/datatables.min.js"></script>

problem(s):
I'd like to configure the dom option such that controls for the xs breakpoint (mobile) are the same as for larger form factors:
- len and filter controls are on 1 line
- info summary and pagination controls are on 1 line

Or, alternatively, I'd like to change the alignment for each control.

For mobile, the control elements are set up as display: block, so I'm not sure that any custom classes added to the dom option can do this (I can only apply formatting to the entire block).

Is there any way around this? This is arguably only a cosmetic issue...

test case:
https://vtcc-cis-1151-webdev-02.easternwind.asia/site/custom/pages/xmd-pag-00-sandbox.html

current dom option config:
dom: "<'row'<'col-sm-12 col-md-6 mt-2 mb-2'l><'col-sm-12 col-md-6 mt-2 mb-2'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5 mt-2 mb-2'i><'col-sm-12 col-md-7 mt-2 mb-2'p>>",

Thx!

IMTanuki

Just got to the button container options, so I've answered my question.

a lot of options here...:>)

IMTanuki

This actually does exactly what I wanted:

dom:
"<'row'<'d-none d-md-flex justify-content-between mt-2 mb-2'lf>>" +
"<'row'<'d-flex d-md-none justify-content-between mt-2 mb-2'lf>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'d-none d-md-flex justify-content-between mt-2 mb-2'ip>>" +
"<'row'<'d-flex d-md-none justify-content-between mt-2 mb-2'ip>>" +
"<'row'<'d-none d-md-flex justify-content-end mt-2 mb-2'B>>" +
"<'row'<'d-flex d-md-none justify-content-center mt-2 mb-2'B>>" ,

notes
1. datatables.js control labels need to be tweaked (shortened) just a bit to avoid wrapping - so, do a compare before upgrading to the next version.
2. second line for each group of controls is reduindant, but I left them in as a placeholder to add additional classes for each breakpoint.

results
https://imtanuki.tinytake.com/tt/NTUyODA0N18xNzIzOTE1MQ

colin

Thanks for reporting back,

Colin