CSS Customization for account balance display

I am trying to customise the css so that I can display the error under limited screen place but, not able to do. Can you help me to understand how can this will be achievable? I had gone through the documentation and saw dwolla-error is indeed customizable for .

Hi @Pratibha_Rai1!

Is your drop-ion component wrapped in a container div with a set width? If not, I’d give it a try and see if it fixes the UI issue.

Yes @shreya I am using div. Shall I remove it? And one more thing is it possible to resize the component?

Hi Pratibha, I would keep the div and give it the desired width that you’d like.

Here’s an example from our examples repo on GitHub:

<div class="orange-border">
  <dwolla-balance-display customerId="{{customer.id}}"></dwolla-balance-display>
</div>

#css
.orange-border {
    padding: 20px;
    width: 470px;
    margin-left: auto;
    margin-right: auto;
}

Yes, you can resize and update the styles of the balance display component using the classnames and IDs listed in this CSS file - drop-ins-examples/balance.css at main · Dwolla/drop-ins-examples · GitHub

Thanks @shreya for the explanation. I will follow the same for the implementation.

1 Like

Hi @shreya I have implemented what you have suggested and it worked.

But, currently in the creation of unverified customer I want to add some css changes since the inputs are not populating as expected. I went through the docs which listed out the classes available for customization and I tried for reducing the width of the email input element by adding the below lines of code in css file

.dwolla-input-email {
width: 250px;
}

Is anything else I am missing? And the dwolla-customer-create is placed inside the orange-border for the size constraints.

Hi Pratibha! I’m afraid dwolla-input-email is not a class used in this drop-in. However, there is one for dwolla-customer-input (as shown in the screenshot below).

The best way to grab the class/id of the exact div would be to use the browser dev-tools and inspect the element you’re looking to update.

Hope that helps!

@shreya It seems since we are using ReactJS and incorporating the dwolla components. The elements are not directly accessible for modification.

The elements are under shadow-root. We doing the work around. Thanks for the help.

1 Like

Hi @shreya I have tried multiple ways for trying to change the css, but not working. Do you by any chance have any idea how we can change using Reactjs?

Hi @Pratibha_Rai1 – sorry for getting back to you late! I shared this with our developer and they mentioned you should be able to style the components even in React with your own stylesheet when it’s loaded into the component in the configuration step. Are you updating the styles in the loaded stylesheet?

dwolla.configure({
    environment: "sandbox",
    styles: "/styles/update-custom.css",
    tokenUrl: "/tokenUrl",
    success: (res) => Promise.resolve(res),
    error: (err) => Promise.resolve(err),
});

@shreya this is our code implementation.
window.dwolla.configure({
environment: ‘sandbox’,
styles: ‘./styles.css’,
…}

We have the required css in this file. Do you want me to share the file also? But it’s kind of same with only changes to the width of the elements.