New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[b-tabs] Manually added tabs in the "tabs" slot don't resize well #1248

Closed
Sobient opened this Issue Oct 26, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@Sobient

Sobient commented Oct 26, 2017

When using the small attribute on b-tabs and adding a button in the template slot, the padding for the button (the + in the picture) is off as the picture below shows:

bilde

<b-tabs card lazy small v-model="tabIndex">

One can easily replicate this issue on the live docs page for dynamic tabs as well.

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Oct 26, 2017

Have you tried using any of the bootstrap utility classes on the + to adjust its position (i.e. the margin adjustment classes or passing adjustment classes, see https://bootstrap-vue.js.org/docs/reference/spacing and http://getbootstrap.com/docs/4.0/utilities/spacing/)?

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Oct 27, 2017

I have discovered what you need to do. On your blank tab <b-nav-item>, you need to manually add the small class to it. Only the <nav-items> added dynamically via <b-tab> components get the small class when the small prop is added to <b-tabs>.

<b-card no-body>
  <b-tabs small card>
   <b-tab ...> ... </b-tab>
   <b-tab ...> ... </b-tab>
   <b-nav-item slot="tabs" class="small" @click.prevent="newTab" href="#">
    +
   </b-nav-item>
  </b-tabs>
</b-card>

Currently the small class gets added to each <b-nav-item> that is defined by a <b-tab>. We may need to move the small to the parent ul.nav wrapper. This will case the small size to be inherited by all of the tab controls.

tmorehouse added a commit that referenced this issue Oct 27, 2017

fix(tabs): Apply `small` class to parent `ul.nav`
Applying the `small` class to the parent `ul.nav` rather than the individual `nav-items` allows for proper sizing of items added to the "tabs" named slot.

Addresses issues #1248

tmorehouse added a commit that referenced this issue Oct 27, 2017

Update tabs.vue
Applying the `small` class to the parent `ul.nav` rather than the individual `nav-items` allows for proper sizing of items added to the "tabs" named slot.

Addresses issues #1248

@tmorehouse tmorehouse added this to the v1.0.0 milestone Oct 27, 2017

tmorehouse added a commit that referenced this issue Oct 27, 2017

fix(tabs): Apply `small` class to parent `ul.nav` (#1255)
* fix(tabs): Apply `small` class to parent `ul.nav`

Applying the `small` class to the parent `ul.nav` rather than the individual `nav-items` allows for proper sizing of items added to the "tabs" named slot.

Addresses issues #1248

* Update tabs.vue
@Sobient

This comment has been minimized.

Sobient commented Oct 27, 2017

It doesn't make sense to manually re-work any additional buttons added to the toolbar with the correct size; they should automatically get the right one since they belong to the same parent anyway.

Thanks for patching it in.

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