0

I am trying to use the first example of input groups using components from Bootstrap-Vue website

My Code is as below :

 <div>
        <b-input-group prepend="Search" class="mt-3">

             <!-- inputbox is a child component -->
                <inputBox></inputBox>

                    <b-input-group-append>
                        <b-button variant="outline-success">Button</b-button>
                        <b-button variant="info">Button</b-button>
                    </b-input-group-append>
          </b-input-group>
  </div>

My inputBox component code is as below:

<template>
  <div>
    <b-form-input></b-form-input>
</div>
</template>

When using the above code , my input box looks like this

enter image description here

instead of looking like below

enter image description here

How, can I make it occupy the entire width?

skr
  • 1,700
  • 1
  • 15
  • 39

1 Answers1

2

That's because you are wrapping b-form-input with a div. Anyhow, if you are sure that you need to bring b-form-input into another component then add this style to root div tag:

<template>
  <div style="flex: 1 1 0%">
    <b-form-input></b-form-input>
  </div>
</template>

IF there are no items other than b-form-input then why not place b-form-input as root element without div wrapper:

<template>
  <b-form-input></b-form-input>
</template>
Syed
  • 15,657
  • 13
  • 120
  • 154
  • Thank you, it works both the way, I had tried without div earlier but it didn't work means I had made some mistake at that time. – skr Apr 02 '20 at 17:44