4

I'm wondering why my ui:button components aren't rendering correctly.

This is what the button is supposed to look like

correct style

but when I try to style the ui:button component it looks like this:

ugly button

the actual markup for the button is:

<ui:button class="slds-button slds-button--neutral slds-col--bump-left" press="{!c.back}">Edit</ui:button>

Am I forgetting something?

Edit: so to help clear some things up both pictures are from the exact same button in my app. The first image was created with <button>, the second is <ui:button>. I'm wondering why the styles changed when i switched from button to ui:button.

  • Have you tried applying any styles yet? – Adrian Larson Jun 15 '16 at 20:12
  • @AdrianLarson Thanks for the idea! i'm confident i could fix it that way... i dunno. it just feels... wrong? like i shouldn't have to and i'm missing something. – Ross Bassett Jun 15 '16 at 20:19
  • Fair enough. I'm not familiar enough with lightning to judge that, but I'm sure someone will come along and help out. – Adrian Larson Jun 15 '16 at 20:20
  • When you say not rendering correctly what is different ? You have used --neutral which has to renders with grey border and white background, not sure what I if am missing something here – Rao Jun 15 '16 at 21:57
  • @Rao in the first example the button has a flat styling. This is what I want. the second example has a heavy border/shadow -- It looks strange with the rest of the stylings. At first I prototyped the screens with standard HTML elements like <button> but when i switched over to <ui:button> the extra styling was added. the --neutral style is what I want but as you can see by the second example something else is happening. – Ross Bassett Jun 16 '16 at 13:20
8

So,

I brought this up with salesforce support. They couldn't provide a good answer. After spinning my wheels for a while i switched over to:

<button class="slds-button slds-button--neutral slds-col--bump-left" onclick="{!c.back}">Edit</button>

lessons learned: avoid ui components.

2

For what it's worth you can see a comprehensive list of all the styles added to the ui:button component here: https://github.com/forcedotcom/aura/blob/master/aura-components/src/main/components/ui/button/buttonFlavors.css

There's one sort of brute-force solution I used to just wipe out these styles, not with ui:button but with another component... I made my own component that does nothing but inherit from the ui element but I set all its custom CSS attributes to "inherit". So for ui:button it would look like this:

neutralButton.cmp:

<aura:component extends="ui:button">
    {!v.body}
</aura:component>

neutralButton.css:

.THIS{
    font-weight: inherit;
    font-size: inherit;
    margin: inherit;
    padding: inherit;
    text-decoration:inherit;
    text-align:inherit;
    border-radius:inherit;
    border:inherit;
    border-top:inherit;
    background:inherit;
    background:inherit;
    box-shadow:inherit;
    text-shadow:inherit;
}

.THIS:hover,
.THIS:focus,
.THIS.is-selected{
    background:inherit;
    background:inherit;
    text-shadow:inherit;
}

.THIS .label{
    white-space:inherit;
    color: inherit;
}
.THIS:hover .label,
.THIS:focus .label{
    color: inherit;
}
.THIS:disabled{
    cursor:inherit;
    background:inherit;
    box-shadow:inherit;
    text-shadow:inherit;
}
.THIS:disabled .label{
    color:inherit;
}
.THIS:disabled .label:hover{
    color:inherit;
}

And then use a c:neutralButton instead of a ui:button and it no longer hijacks the SLDS styles. Still it's a little silly that this ends up being the only reliable way to shut off hard-coded component styles.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.