7

Based on my understanding of the documentation, your CSS cannot reach into the child component of the lightning-button component: Styles defined in a component’s style sheet are scoped to the component. This rule allows a component to be reused in different contexts without losing its style. It also prevents a component’s styles from overriding styles in ...


6

I believe you need this type of component <lightning:buttonIcon iconName="utility:edit" variant="bare" onclick="{! c.handleEdit }" alternativeText="Edit" /> Btw, check out this awesome library of Salesforce Lightning components: https://developer.salesforce.com/docs/component-library/bundle/lightning:buttonIcon/example


4

You need to create a lightning component that implements force:lightningQuickAction. After this you will be able to override your Action using this lightning component. You can program your client side controller to set a callback function, that would call your Apex class to perform some logical calculation. This is fairly simple and you can find numerous ...


4

Your application needs to use SLDS: <aura:application extends="force:slds"> <c:Searchform /> </aura:application>


4

If you use lightning:layout, you can expand the button to use slds-size_full to take up the entire containing grid. Example: <lightning:layout> <lightning:layoutItem size="2"> <lightning:button class="slds-size_full" name="test1" label="Test 1" /> </lightning:layoutItem> <lightning:layoutItem size="4"> ...


4

You don't have to manually apply onclick event listener to <lightning-button>. But you can handle this or any other event in the container component. Just define the function handleNext: <!--container.html--> <template> <lightning-button class="slds-m-left_small nav-button" label="Next" ...


3

Thanks to Wei Ni's answer (do upvote that), I think I now better understand what is going on. I have been adding this CSS to my component: .scaled-down button { transform: scale(0.75); } which outputs this into the resulting HTML page: <style type="text/css"> .scaled-down[cvnp-claims_claims] button[cvnp-claims_claims] { transform:scale(.75) ...


3

I haven't tried it myself, but if this can get background color working, it should work for the size as well. https://sfdcfacts.com/lwc/color-columns-of-data-table-lwc/ Basically, what it does is adding class attribute as part of cell attributes then manually assign class to it when define data. {label: ‘Diet Type’, fieldName: ‘diet’, type: ‘text’, ...


3

Yes, by setting a width to your element, for example: component.cmp <lightning:button class="myBtn" variant="brand" label="Submit" onclick="{! c.handleClick }"/> <lightning:button class="myBtn" variant="brand" label="Longer Submit" onclick="{! c.handleClick }" /> <lightning:button class="myBtn" variant="brand" label="Very long Submit" ...


2

Easier solution would be to use lightning:button instead as it has a disabled property. <lightning:button variant="neutral" label=">" onclick="{!c.nextAddress}" class="slds-grow" disabled="{!rowValue > listAddress.length}"/> Note: check if listAddress.length or listAddress.size works. This is just a psuedo code. If you really want to use a ...


2

We use the disabled attribute of the ui:button || lightning:button components. Here is an example. <aura:component> <aura:attribute name="username" type="String" default="" /> <ui:inputText required="true" value="{!v.username}" label="Username" updateOn="keyup" /> <ui:button disabled="{!empty(v.username)}" class="slds-...


2

My bad, my bad... I had an outer div (from previous experiments) also handling onclick with {!c.buttonClicked}. That's what was generating the error, the event was being captured twice and standard html tags lightning doesn't support event.getSource()


2

You will require jspdf in the lightning component. Include it with ltng:require and then call a function on the button click. Here is the jsfiddle which you can have a look.


2

You can define typeAttributes for your custom data type. static customTypes = { toggleButton: { template: freezeUnfreezeButton, typeAttributes : ['disabled'] } }; Then you need to pass value for this attribute with your data. @track columns = [ { label: 'Name', fieldName: 'Name', type: '', typeAttributes: { ...


1

you can simply assign index to button and then use that index to get other values from list <aura:component implements="flexipage:availableForAllPageTypes,lightning:availableForFlowScreens" access="global"> <aura:attribute name="testlist" type="List" default="[1,2,3]" /> <aura:iteration items="{!v.testlist}" var="item" indexVar="index"...


1

Based on our conversation, I have put together a sample Aura component that enables/disables a Lightning button. Here it is: SimpleButton.cmp <aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="SimpleButtonCtrl"> <aura:attribute name="cons" type="List" /> <aura:attribute name="isDisabled" type="...


1

You've basically fallen for the same problem as in your previous question. You can't control the "fill" of the component. CSS styles are applied to the component as a whole. Your basic choices are default, inverse, yellow, or red. However, in this case, there's good news. SVG support has been added to LWC, so you can use a custom SVG file and style it as you ...


1

You can try to add you text with transparency and remove opacity on hover. .my-button-text { opacity: 0; } .my-button-text:hover { opacity: 1.0; } Hope it can help resolve you problem.


1

Check for the size of listAddress in your js controller if it is greater than rowValue, then set another variable for eg. flag to true and use this variable in disabled property of the button. JS Controller if(rowValue > listAddress.length){ component.set("v.flag",true); } else{ component.set("v.flag",false); } Component <button class="slds-...


1

Everything @glls said is correct. This is to just help point out the areas where you might consider some changes... <div style="width:200px;"> //This makes the max width of everything inside 200px. <div class="slds-grid slds-grid_pull-padded-medium"> <div class="slds-col slds-p-horizontal_medium"> <lightning:layout ...


1

You basically are putting your button in a box within another box that is in a bigger box, then you are telling your button to expand to its fullest within the smallest box. Either take your button out of the smallest box, aka div and or change the display property value, property values can be found here


Only top voted, non community-wiki answers of a minimum length are eligible