Plaid Link only partially visible

[damonjanis]

The Plaid Link control is only partially visible when I include it on the web page. I've looked through the styling and cannot figure out why it won't display on the whole page, hoping someone might have run into this and know how to make it work?

Here's a screen shot of what it looks like: https://cutt.ly/mywdR9

The template is:

<template>
  <section>
    <plaid-link
      env="development"
      publicKey="xxxx....xxxx"
      clientName="CSB"
      product="transactions"
      :webhook="$store.state.webhookUrl"
      v-bind="{ onSuccess }"
    >
      <template
        slot="button"
        slot-scope="props"
      >
        <br />
        <b-button
          class="is-primary"
          @click="props.onClick"
        >
          Connect to your bank
        </b-button>
      </template>
    </plaid-link>
  </section>
</template>

Thanks!

[pushchris]

So Plaid injects an iFrame into your page which is what you are seeing. They handle positioning this iFrame as fixed in such a way that it fills the whole screen (by setting left, right, top, bottom positioning elements). Could it be you are inadvertently messing globally with the positioning of the iFrame?

As an example these are the elements that get added to the iFrame:

<iframe id="plaid-link-iframe-1" src="" width="100%" height="100%" style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 9999999999; border-width: 0px; display: block; overflow-x: hidden; overflow-y: auto;"></iframe>

[damonjanis]

Thanks Chris! Yes that could be. The Vue app is using Buefy and it may have settings that are affecting the iframe positioning. I will dig into that.

[pushchris]

Sounds good! If you have some more specific code to go off of I might be able to be more help, but it's a little tough going just from an image. Going to close this issue for now, feel free to re-open if needed.

[Joshsteverson]

I had the same issue. Also using beufy, however the style enforcement may have come from elsewhere in our own styles. Regardless may be worth a mention to those that run into this issue. Once this was squashed with a scoped style, the component works great! thanks!

[damonjanis]

Thanks Chris and Josh for your input you got me to the root of the problem. In my case it turned out that Buefy is setting the iframe height to auto in the CSS. By overriding it in my vue component to

<style>
iframe {
  height: 100% !important;
}
</style>

that fixed the problem. Leaving this closed, just posting here in case anyone else runs into this with Buefy.

[pierrerappolt]

I have a similar problem but not with the actual size of not the iframe but the Plaid Link itself? The Plaid Link height is > 600px and not fitting in my 600px screen without scrolling