How to remove margin between nativescript buttons?

Question

Hey I'm trying to create my own bottom nav in nativescript with vue, but I can't get the buttons to fill up the entire space. Any ideas why it isn't working? I have the buttons in a gridlayout component, and I set both height/width properties to 100% but there's still some space between buttons.

<template>
  <GridLayout rows="*" columns="*,*,*" horizontalAlignment="stretch">
    <Button
      row="0"
      col="0"
      text="Potty Logger"
      :class="{ active: active == 0, '-primary': active != 0 }"
      @tap="goTo(0)"/>
    <Button
      row="0"
      col="1"
      :class="{ active: active == 1, '-primary': active != 1 }"
      :isEnabled="active != 1"
      text="Walk Tracker"
      @tap="goTo(1)"/>
    <Button
      row="0"
      col="2"
      :class="{ active: active == 2, '-primary': active != 2 }"
      text="History"
      @tap="goTo(2)"
  /></GridLayout>
</template>

<style lang="scss" scoped>
label {
  vertical-align: center;
  text-align: center;
}

button {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
}
</style>

Answer 1

Try setting

button {
  border-width: 1;
  border-color: your-background-color;
}