0

I want to be able to use a td as a btn-group, with a custom class but cant get it to work correctly

Markup

<td class="actions">
    <a href="/foo/bar" class="btn"><span class="fa fa-edit fa-lg "></span> Edit</a>
    <a href="#" data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="fa fa-caret-down fa-lg "></span></a>
    <ul class="dropdown-menu">
        <li><a href="/foo/bar"><span class="fa fa-times fa-lg "></span> Delete</a></li>
        <li><a href="/foo/bar"><span class="fa fa-times fa-lg "></span> Delete</a></li>
        <li><a href="/foo/bar"><span class="fa fa-times fa-lg "></span> Delete</a></li>
    </ul>
</td>

Less

td {
    &.actions {
        > a {
            .pull-left;
            .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
            &:first-child {
                .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
            }
        }
    }
}

I have tried a couple things such as &.actions:extend(:btn-group)

but the toggle does not show the UL and it does not create a button group (eg: the buttons have rounded corners all the way round)

Adding the btn-group class to the td and everything works fine.

dogmatic69
  • 7,574
  • 4
  • 31
  • 49
  • I guess it should be `extend(.btn-group all)` (note that this will generate quite bloating CSS though). See also related stuff: [1](http://stackoverflow.com/q/23840711), [2](http://stackoverflow.com/q/22983475), [3](http://stackoverflow.com/q/24113419), [4](http://stackoverflow.com/q/24240134). – seven-phases-max Nov 19 '14 at 12:26
  • Have tried `extend(.btn-group all)` with no change vs `extend(.btn-group)` – dogmatic69 Nov 19 '14 at 12:27
  • I can't imagine why it would not work. Well, `extend(.btn-group all)` is the correct method in this case, see `extend` docs and `.btn-group` definitions. Check the compiled CSS - if you did everything correctly `td.actions` should appear there everywhere `.btn-group` is (and if it's not double check the syntax you used). Also there's a [#2206 bug](https://github.com/less/less.js/issues/2206) (it will apply if you have your `td` nested wthin another ruleset) so instead of `&.actions:extend(.btn-group all)` it's more safe to put `&:extend(.btn-group all);` into the `.actions` ruleset. – seven-phases-max Nov 19 '14 at 12:51
  • Looks like it was the bug you mentioned, converted to use `&:extend(.btn-group all)` and it seems to work fine. Make it an answer and I will accept it. – dogmatic69 Nov 19 '14 at 15:41

1 Answers1

2

Assembling an answer from comments above. In this case extend all should be used since .btn-group is not just some single "flat" style but a set of selectors/rulesets with quite complex nesting hierarchy, so:

td {
    &.actions:extend(.btn-group all) {
        // ...
    }
}

Although because of the #2206 bug it might be more safe to write it as:

td {
    &.actions {
        &:extend(.btn-group all);
        // ...
    }
}
seven-phases-max
  • 11,765
  • 1
  • 45
  • 57