NativeScript: how to make a square button with css without hard-coding the width and height

Question

I'm writing an app with Angular 8 and NativeScript 6.4.1.

I want to create a perfectly square button. I'm not able to hard-code the height and width.

e.g. height: 20px width: 20px is not good for me because my app will run on different devices with different screen sizes.

I have tried these suggestions:

https://spin.atomicobject.com/2015/07/14/css-responsive-square/

https://dev.to/tchaflich/a-width-responsive-perfect-square-in-pure-css-3dao

It doesn't seem to work for me.

Here is my playground:

https://play.nativescript.org/?template=play-ng&id=j8Gsd1&v=3

How can I make perfectly square buttons?

code snippet:

.sqaure-button {
    height: 40%;
    width: 40%;
}

.sqaure-button:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
    <Button class="sqaure-button" backgroundColor="pink"></Button>

This image is the desired result in terms of the square sizes and the device size:

I'm not able to hard-code the width and height. That's all I mean. — user1261710, Apr 16 '20 at 14:18
You should not use px unit system when you want measurements to be relative to device density. If you do not specify one, default it will use dp units. There are no `:after` element or display attribute in NativeScript, it's not running in a browser. — Manoj, Apr 16 '20 at 21:51
Why was the question closed? I want to make a square button. Where is the lack of clarity? — user1261710, Apr 17 '20 at 09:54

score 0 · Answer 1 · answered Apr 16 '20 at 14:25

.square-button {
 width: 40%;
 height: 40%;
}

This actually should work by chance, I think the probability of something like this to give a square is very low that it works only when the parent is a square. You're saying take 40% of the height of the parent, say it's 1000px and take 40% of the width of the parent say it's 2000px, Now you see why it isn't a square?

We need to take a better reference than the width/height of the parent as those won't be the same, Dynamically using js or whatever, set the width/height to 50% of the parent's height. It should give a square, Now edit it to suit your needs, Perhaps set one (width or height) from the parent and set the other as the one you've already set.

score 0 · Answer 2 · answered Apr 17 '20 at 13:12

I tried this again with nothing else in my view layer; just the button.

I got a perfectly square button using 'dp' units.

.button-square {
    height: 90dp;
    width: 90dp;
}

<ActionBar title="Home">
</ActionBar>

<Button class="button-square" backgroundColor="pink"></Button>

Here is my playground: https://play.nativescript.org/?template=play-ng&id=j8Gsd1&v=6

I tried it with percentages and it doesn't work:

.button-square {
    height: 40%;
    width: 40%;
}

NativeScript: how to make a square button with css without hard-coding the width and height

2 Answers2