The functionality of Nativescript squared buttons is not functioning as expected

I recently developed a Nativescript app using Angular, incorporating customized buttons. However, I have encountered an issue where I am unable to achieve perfectly squared buttons with the desired appearance.

Here is my CSS code:

Button {
    font-size: 13;
    color: #fff;
    padding: 20;
    text-transform: uppercase;
    background-color: #3c3d37;
    font-family: 'Oswald';
    letter-spacing: .2;
    border-radius: 0;
}
Button:highlighted {
    background-color: #494a43;
}

https://i.sstatic.net/iQPQx.png

The image linked above shows a small border radius on the buttons. Despite setting border-radius: 10;, only slightly rounded corners are achieved. It appears that there may be a minimum border radius enforced by default.

Could it be possible that some other default style, such as a shadow effect, is inadvertently causing this small border radius?

cssnativescriptangular2-nativescript

Answer №1

It is not possible to achieve perfectly squared buttons in nativescript

Answer №2

To customize the background on Android, a method in NativeScript can be utilized (not 'using Nativescript') by swapping out the backgroundDrawable of the view:

var radiusValue = myView.borderRadius.value; // met with success using px unit only
var colorValue = myView.backgroundColor.android;

var backgroundDrawableAdjustment = new android.graphics.drawable.GradientDrawable();
backgroundDrawableAdjustment.setShape(android.graphics.drawable.GradientDrawable.RECTANGLE);
backgroundDrawableAdjustment.setCornerRadius(radiusValue);
backgroundDrawableAdjustment.setColor(colorValue);

myView.nativeView.setBackground(backgroundDrawableAdjustment);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Elements on the left side are not properly aligned

I've successfully coded the head banner and news containers below the header. However, I'm facing an issue with my left menus: Instead of aligning properly with the header and news containers, they are overlapping them. Here is the HTML Code: ...

htmlcsscss-float

Tips for dynamically updating the id value while iterating through a class

Here's the HTML snippet I am working with: <div class="info"> <div class="form-group"> <label class="control-label col-sm-2">Title</label> <div class="col-xs-10 col-sm-8"> <inpu ...

javascriptjqueryhtmlcss

Adjusting the vertical dimension of an Angular 17 Material Dropdown Field?

Check out this demo where I'm exploring ways to decrease the height of the select field. Here's the code snippet: <mat-form-field appearance="outline"> <mat-label>Toppings</mat-label> <mat-select [formControl]=& ...

htmlcssangularsassangular-material

dotdotdot.js is only functional once the window has been resized

For my website, I am attempting to add an ellipsis to multiline paragraphs that exceed a certain height. I have incorporated the dotdotdot jquery plugin from here. An odd issue arises when the page is refreshed, as the ellipsis does not appear until I res ...

javascriptjqueryhtmlcssjquery-plugins

CSS - Dynamic triangle separator

I've been working on creating a triangle-shaped CSS divider. Using the code snippet below, I was able to achieve the desired result: border-width: 4vw 75vw 0 23vw; However, this method feels a bit unconventional. Since you can't use percentages ...

htmlcssdivider

Apply CSS styles from a text area using v-html

I am currently working on developing a unique WYSIWYG application where users have the ability to write CSS in a textarea field and view its direct impact on the HTML content displayed on the page. As I was experimenting with different approaches, I attemp ...

javascriptcssvue.jswysiwyg

How can I reset a CSS position sticky element using JavaScript?

I have created a page where each section fills the entire screen and is styled using CSS position: sticky; to create a cool layered effect. Check it out here: https://codesandbox.io/s/ecstatic-khayyam-cgql1?fontsize=14&hidenavigation=1&theme=dark ...

javascripthtmlcssvue.js

Modify the text color of all input elements with Tailwind

I have been using this code in multiple sections of the app: <label className="input text-neutral-content"> Name <input type="text" className="grow text-base-content"/> </label> While I understand that ...

csstailwind-cssdaisyui

Center align for drop-down menu

I'm currently working on styling an asp:DropDownList element using custom CSS. I have successfully set the height, but I am facing a challenge with getting the text to align in the middle of the element rather than at the bottom. The vertical-align:mi ...

asp.netcss

Achieving the Menu Hover Effect - step by step guide to recreating this stylish effect

I recently came across a stunning hover effect on the main menu of a website (red rectangles above menu). It's quite impressive! I found it here: Now, I want to incorporate this same effect into my own website. Unfortunately, there doesn't seem ...

javascriptjquerycsshovereffects

Tips for allowing a position:absolute <div> to expand as though it were containing a lengthy <p>innerText

This div automatically adjusts its width to fit the content inside, even if it extends beyond the page boundaries. Is there a way to make this div expand to fill the entire width of the page without needing a paragraph? <div style="position:absolute;le ...

htmlcsswidthcss-position

The search filter on the bootstrap card failed to display the intended image

When I am searching for a specific image by name, the rest of the row's name keeps showing up. However, I only want to display the data relevant to my search. See the image below: Display: Select all data from the database. <?php $checkQuery = &qu ...

phphtmlcssanimation

Result from Nativescript ModalView

crongoramaModal() { let options = { context: {}, fullscreen: true, viewContainerRef: this.viewRef }; this.modalService.showModal(CronogramaManejoComponent, options) .then((result: CronogramaManejo)=>{ ...

angularreact-nativenativescript

Is it possible for the `position: fixed` property to interfere with mix-blend-mode, and if so, are there

Struggling to make box-shadows cooperate with different backgrounds? The traditional method involves using mix-blend-mode and adding a pseudo element behind the main one for the effect. You can see an example of this technique here (click the + icon in th ...

css

Finding the location of an "Apply" button on an Angular HTML page

There is an issue with the positioning of the apply button in the filter bar. Sometimes it displays in the next row instead of alongside the other filters. How can I determine the exact position of this apply button within the HTML page? <div class=&quo ...

htmlcssangularbuttonposition

Change the order of numbering in ordered lists

I am seeking a way to change the ordering of an ordered list to be in descending order. You can view a live example here. Instead of having the counter span multiple ol elements, I would like the counter to reset after each ol. For the live demo, the des ...

javascriptjqueryhtmlcss

Is there a way to adjust the transparency of an image without affecting any overlaid text while using Bootstrap's carousel feature?

I am currently working with Bootstrap v4 to build a carousel featuring an image with caption text. My goal is to have the image faded while leaving the text unaffected. Despite trying several non-Bootstrap solutions, I have been unsuccessful in achieving t ...

jqueryhtmlcsstwitter-bootstrapcarousel

What is the best way to incorporate two banners on the Magento homepage alongside my flexslider?

I recently made the switch from using a camera.js slider on my website to a Flexslider. The reason for this change was that I couldn't make the camera.js slider clickable, and I wanted to eliminate the 'Click here' button. However, now that ...

cssmagentocontent-management-systemflexsliderbanner

How can I move a nested child component out of an ancestor element with overflow set to hidden?

I'm facing an issue with a sliding carousel where the overflow-x property is set to hidden. The carousel displays 4 items at a time, and each item contains a button that triggers a pop-out menu positioned relative to its parent item. The problem arise ...

javascripthtmlcssreactjssass

What is the best way to compare two CSS files and selectively replicate just the discrepancies?

Is there a way to compare and copy different information from CSS files into another file? For instance, if I have two CSS files named a.css and b.css, is there a method to automatically select and copy only the differences between the two files? Thank y ...

htmlcssfileweb