Alignment of search and edit buttons in editor

javismiles

I have editor with 1 edit buttton and the search area. When the screen is large, the search button is right aligned and the edit button is left aligned. But when screen is mobile size, the search button becomes center aligned and the edit button also, and the edit button looks really weird hanging in the air. How can I make sure that both edit and search areas are left aligned in mobile size, they look so odd center aligned, thank u

javismiles

I can see that these are culprits:

@media screen and (max-width: 640px)
div.dt-buttons {
float: none !important;
text-align: center;

@media screen and (max-width: 640px)
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
float: none;
text-align: center
}

do you advice so just edit those? in what css file are they? or any other way you recommend? is there any parameter we can use in editor to influence this alignment?

allan

I would suggest adding:

@media screen and (max-width: 640px)
div.dt-buttons {
  text-align: left;
}

@media screen and (max-width: 640px)
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
  text-align: left;
}

to your CSS if that is the style you want. That will override the defaults used by DataTables and Buttons.

Allan

javismiles

thank you Allan