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.

Improve this question
8
  • Have you tried applying any styles yet?
    – Adrian Larson ♦
    Commented Jun 15, 2016 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
    Commented Jun 15, 2016 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 ♦
    Commented Jun 15, 2016 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
    Commented Jun 15, 2016 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
    Commented Jun 16, 2016 at 13:20

2 Answers 2

Reset to default
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.

Improve this answer
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.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .