Saved States modal switching to Dropdown when managing a State

growe19

I am not a developer and very much a copy and paste coder. Using tutorials to my best advantage, tweaking them to do what I require. I've looked at all the Datatables examples and got this far, however...

I have a button for Saved States. When clicked it loads the Modal to Create State or Manage the previously saved ones.

Link to test case: https://garyrowe.co.uk/acc/?mode=dev
There is also: ?mode=live and ?mode=ip
If you would like to see data in the table you need SimHub (https://www.simhubdash.com/download-2/) and the Swoop plugin (https://www.racedepartment.com/downloads/simhub-swoop-plugin.48487/)
Debugger code (debug.datatables.net): https://debug.datatables.net/uwupek
Error messages shown: None
Description of problem:
- On the Modal that appears the dropdown arrow button is wider than the button with the Saved State Title on it.
- When you click on the dropdown arrow it loads a dropdown menu from the button in the menu bar instead of a new Modal.
- In summary the UI is all off basically.

sandy

Hi @growe19 ,

You have some strange initialisations for the buttons. For example

{
    extend: 'savedStatesCreate',
    collectionLayout: 'fixed columns', //three-column // fixed columns
    collectionTitle: '<span class="text-dark"><h3>Manage Layout States</h3></span>',
    className: 'btn-dark'
},

Why are you setting the collection layout to be fixed columns? Setting things like this is what is causing the issues you are seeing.

Thanks,
Sandy

growe19

I saw it in an example for one thing and assumed it was needed for all of them to get the modal to appear. I do actually want the modal. The UI works less with that line commented out. I did try to explain I don't really know what I'm doing.

growe19

Is there a CSS way to change the sizes of the buttons on this modal?

colin

This thread here discusses resizing buttons generally, so may be helpful,

Colin