Salesforce Cookies #12

How to remove the arrows from lightning:input[type=”number”]?

I think this is a generic question and Salesforce devs have looked for the ways to get rid of the spin buttons on the input field without changing it to text type for a purely numeric behaviour. You just need a few lines of CSS to solve your problem.

We need some CSS which work across the browsers. Any browser like Safari, Chrome and Firefox have a specific bahaviour for number type inputs.

Component.css

In the CSS component of the Lightning component bundle, we need to include the following styling.

/* For Firefox browser */
.THIS input[type='number'] {  
   -moz-appearance:textfield;
}
/* For webkit browsers like Chrome and Safari */
.THIS input[type=number]::-webkit-inner-spin-button,
.THIS input[type=number]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

So it will look like as shown here.

Screenshot_2     Screenshot_1

In case if you have any concern or queries then please feel free to comment on the post.

Have fun with the CSS!!

How to recreate modal component for force:lightningQuickActionWithoutHeader ( Showing quick action same as Lightning Experience Standard modal )

If you are building a lightning component for a lightning-quick action then you must be having a hard time to add additional buttons to the footer. If you are implementing the force:lightningQuickActionWithoutHeader interface in the component then you can get rid of the default header and footer and can create your own footer with the buttons of your choice. But still, it doesn’t match with the Lightning Experienceince view. I had the same issue on a recent project and I was able to make it look like the default button’s pop-up.

In order to get the lightning experience matching modal, you need to make some tweaks in the CSS along with lightning design system CSS. You need to include some styles which will modify the standard style so you can get the same look and feel.

After Salesforce Spring ’18 release, Tag Not Allowed in Components. You can’t add a  tag in component markup or when you dynamically create a component in JavaScript code. This restriction ensures better component encapsulation and prevents component styling interfering with the styling of another component.

So,  In order to use a workaround, we will have to include a CSS in our lightning component using a static resource to modify the CSS of the container which is wrapping the lightning component.

.cuf-content{
    padding:0 !important;
}
.slds-p-around--medium{
    padding:0 !important;
}
.slds-modal__container{
    width:80% !important; // You can update the width as per your need
    max-width:80% !important;
}
.slds-modal__content{
    overflow-y:hidden !important;
    height:unset !important;
    max-height:unset !important;
}

Above provided CSS needs to be loaded as an external resource. You will need to copy and paste the CSS into a file and save it as a static resource. Make sure file extension is “.css”. For instance, assume we have uploaded it as a static resource and named it “quickActionStyle”.

Sample Component

Screenshot_1

 

Now, the quick action will look like below.

Screenshot_6

So, we are able to achieve what we were looking for with some small tweaks. If you have any question and concern then feel free to comment on the post.

You can also use the aura:html tag to inject this CSS in your lightning component.

Use the following CSS in aura:html tag as shown below.

Happy Easter!!