Vue Native NativeBase Header Text Width Issue

Question

I'm trying to use Native Base to create a header for my Vue Native mobile application. However, the <nb-body> doesn't seem to take up the right width.

Here is the <template> section:

<template>
  <nb-container>
    <nb-header>
      <nb-left>
        <nb-button transparent>
          <nb-icon name="menu" :on-press="toggleDrawer" />
        </nb-button>
      </nb-left>
      <nb-body>
        <nb-title class="header-text">{{headerTitle}}</nb-title>
      </nb-body>
      <nb-right>
        <nb-button transparent>
          <nb-icon name="funnel" />
        </nb-button>
      </nb-right>
    </nb-header>
    <slot />
  </nb-container>
</template>

And here is my CSS:

<style>
  .header-text{
    font-family: Graduate-Regular;
    text-align: center;
  }
</style>

An example of what this looks like.

My headerTitle cuts off into ellipses (...) even when it has more room to use. When I add something like width: 120% to my CSS, it fits. But, and correct me if I'm wrong here, I don't think it is good practice to put an arbitrary amount for the width.

Is there any way to let the nb-body take up all the space between the nb-left and the nb-right, or maybe a way to let it take up just as much space as it needs?

Thank you so much.

Answer 1

Use flex. In this scenario they add up to 1. The left and right take up 1/5 and 1/5 of the header. The Body with take up 3/5.

      <nb-left :style="{flex:.2}>
        <nb-button transparent>
          <nb-icon name="menu" :on-press="toggleDrawer" />
        </nb-button>
      </nb-left>
      <nb-body :style="{flex:.6}>
        <nb-title class="header-text">{{headerTitle}}</nb-title>
      </nb-body>
      <nb-right :style="{flex:.2}>
        <nb-button transparent>
          <nb-icon name="funnel" />
        </nb-button>
      </nb-right>