Skip to content

Instantly share code, notes, and snippets.

@rootwork
Last active May 11, 2017 02:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rootwork/67ed42a0df5f3e17cd6845a1e9a22eb0 to your computer and use it in GitHub Desktop.
Save rootwork/67ed42a0df5f3e17cd6845a1e9a22eb0 to your computer and use it in GitHub Desktop.
Unset dropbutton/splitbutton in Drupal 8.3.x (convert dropbutton to side-by-side buttons)
@media screen and (min-width: 640px) {
.form-actions .dropbutton-wrapper {
float: none;
}
}
.js .form-actions .dropbutton-widget,
.js td .dropbutton-widget,
.dropbutton-widget {
border: 0;
}
/* UL styles are over-scoped in core, so this selector needs weight parity. */
.dropbutton-widget .dropbutton,
.js .dropbutton-widget .dropbutton {
border: 0;
}
.dropbutton li,
.js .dropbutton li {
display: block;
@media screen and (min-width: 640px) {
display: inline-block;
}
}
.dropbutton .dropbutton-action input {
padding: 0.5em 1.5em;
white-space: normal;
width: 100%;
@media screen and (min-width: 640px) {
width: auto;
}
}
.js .dropbutton-multiple .dropbutton-widget {
padding-right: 0;
}
.dropbutton-multiple .dropbutton .secondary-action {
display: block;
border: 0;
@media screen and (min-width: 640px) {
display: inline-block;
}
}
.dropbutton .dropbutton-toggle,
.js .dropbutton .dropbutton-toggle,
.dropbutton .dropbutton-arrow,
.js .dropbutton .dropbutton-arrow {
display: none;
}
@rootwork
Copy link
Author

rootwork commented May 11, 2017

There is an open issue in Drupal core to remove dropbuttons from the node publish/save interface. In the meantime, this is one way to unset the dropbuttons with just a CSS override.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment