0

basically we have this scoped tab in lwc writing using an slds scoped tab, which looks like below: enter image description here

We want to make the New button float right.

The code looks like below:

<div class="slds-tabs_scoped">
  <ul class="slds-tabs_scoped__nav" role="tablist">
    <li class={chatTab} title="Dial" role="presentation">
      <div
        class="slds-tabs_scoped__link"
      >
        Chats
      </div>
    </li>
    <li class={appointmentTab} title="Contact" role="presentation">
      <div
        class="slds-tabs_scoped__link"
      >
        Appointments
      </div>
    </li>
    <li class="slds-tabs_scoped__item" title="Dial" role="presentation">
      <div
        class="slds-tabs_scoped__link"
      >
        Interactions
      </div>
    </li>
    <li class="slds-tabs_scoped__item">
      <button
        class="slds-button slds-float_right slds-button_neutral slds-m-top_xx-small"
        onclick={handleNewButton}
      >
        New
      </button>
    </li>
  </ul>
</div>

I have gone through a bunch of articles. In the normal html ul>li structure, this seems to work with float:right applying to the li. As suggested in this answer: https://stackoverflow.com/questions/16425420/make-an-item-in-list-align-to-right-using-css-3 . However, this doesn't seem to work in the slds scoped li. I tried to go through each definition of css in the browser inspector but haven't got any clue which has limited this to work.

The closest thing which we currently applied closed is to apply a min-width to the li element. But that won't work with different window sizes.

Any suggestions?

1 Answer 1

0

For god sake, I finally got this working. Honestly I don't even know why this is working but it is working somehow. So posting here for any other's future reference:

<div class="slds-tabs_scoped ">
  <ul class="slds-tabs_scoped__nav slds-grid" role="tablist">
    <li class={chatTab} title="Dial" role="presentation">
      <div
        class="slds-tabs_scoped__link"
      >
        Chats
      </div>
    </li>
    <li class={appointmentTab} title="Contact" role="presentation">
      <div
        class="slds-tabs_scoped__link"
      >
        Appointments
      </div>
    </li>
    <li class="slds-tabs_scoped__item" title="Dial" role="presentation">
      <div
        class="slds-tabs_scoped__link"
      >
        Interactions
      </div>
    </li>
    <li class="slds-tabs_scoped__item slds-col">
      <button
        class="slds-button slds-float_right slds-button_neutral slds-m-top_xx-small"
        onclick={handleNewButton}
      >
        New
      </button>
    </li>
  </ul>
</div>

basically just need to apply slds-grid to the ul tab and slds-col to the button's li tab. And that can do the trick.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .