Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

overrides: "styles" does not style labels or anything outside of the "input"

See original GitHub issue

General information

SDK/Library version: 1.13.0
Environment: sandbox
Browser and OS: Chromum 69.0.3497.100 (Official Build) Arch Linux (64-bit)

Issue description

according to: https://developers.braintreepayments.com/guides/drop-in/customization/javascript/v3

I’m supposedly able to add a “styles” object to the create call in order to create some styles. the passed in object has absolutely no effect.

  await DropIn.create({
    authorization: tokenizationKey,
    container: dropInContainer,
    locale: 'en_US',
    card: {
      cardholderName: {
        required: true
      },
      overrides: {
        styles: {
          label: {
            width: '100%'
          }
        }
      }
    }
  })

I tried copy and pasting what is in the guide:

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  container: '#dropin-container',
  card: {
    overrides: {
      styles: {
        input: {
          color: 'blue',
          'font-size': '18px'
        },
        '.number': {
          'font-family': 'monospace'
          // Custom web fonts are not supported. Only use system installed fonts.
        },
        '.invalid': {
          color: 'red'
        }
      }
    }
  }
})

the input color did not turn blue, and the font did not change to monospace

Issue Analytics

State:
Created 5 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

crookedneighborcommented, Oct 5, 2018

I appreciate the feedback and we’ll take steps to improve the documentation.

We made a specific choice to use Hosted Fields (a separate iframe for each card input) instead of a single iframe so that CSS customization would be easier to accomplish. In the previous iteration of Drop-in, which was a single iframe, this was a frequently requested feature. There’s a limit to the kinds of css we allow to be injected into the Braintree hosted iframes, so having a single iframe wouldn’t allow for as much customization as the current implementation.

Again, we’ll take steps to improve the documentation around it. I can see why it was confusing.

0reactions

SampsonCrowleycommented, Oct 5, 2018

Thanks for the help

Top Results From Across the Web

React-native: Override the style of an external component

If the component does not support any styling properties, there is no one true way to override its styles, since any additional props...

How to Override CSS Styles - W3docs

When an important rule is used on a style declaration, this declaration will override any other declarations. When two conflicting declarations with the...

5 Ways to Make Basic Style Changes to Your Marketo Forms

Here are 5 ways to add simple snippets of CSS code to give your forms some fresh style, along with how to add...

10 Most Common Bootstrap Mistakes That Developers Make

You can overwrite in your own stylesheet default bootstrap colors, styles, margins, paddings, everything. There is no need to touch the bootstrap.css ...

Forms - Bootstrap

Checkboxes and radio buttons support HTML-based form validation and provide concise, accessible labels. As such, our <input> s and <label> s are sibling ......