NativeScript
NativeScript copied to clipboard
NativeScript
Add CSS max-width support
I think it would be beneficial to include max-width as a CSS attribute within Nativescript. As a web developer I am finding myself wanting to use this attribute regularly, so I think it'd be a great addition to Nativescript's CSS subset.
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
@mikeres0 I'm often finding myself wanting a max-width property as well, particularly when trying to make the same layout look nice on a wide range of devices.
It doesn't look like it was implemented in conjunction with support for percentage based sizes, so perhaps this could be reopened?
After looking around, I agree that this is different that #412 and there isn't currently any simple way to achieve a max-width. Min-width already is supported so is there something that supporting max-width would do to break a bunch of other stuff? Please re-open this.
@ibnYusrat Probably because this is closed an it's not on NativeScript radar
@NickIliev could this please be reopened so it would get more visibility ?
@ibnYusrat @Jarrich @surdu we do have support for setting percentage for width which makes a good solution for max width. (e.g. setting width to be 80% of the parent width while using Label or a layout with transparent background). We also have a FlexBoxLayout which support alighItems and other flex properties (which in practice allows mimicking the max width behavior)
For all wondering why it would be so hard to implement max-width (more or less web concept) in the context of NativeScript mobile world take a look at this solution for native iOS..
Still, I am reopening this issue and marking it as a feature request Anyone interested in contributing can create a PR - a good blog post about NativeScript contributing can be found here.
@ibnYusrat @Jarrich @surdu we do have support for setting percentage for width which makes a good solution for max width. (e.g. setting width to be 80% of the parent width while using Label or a layout with transparent background). We also have a FlexBoxLayout which support alighItems and other flex properties (which in practice allows mimicking the max width behavior)
For all wondering why it would be so hard to implement max-width (more or less web concept) in the context of NativeScript mobile world take a look at this solution for native iOS..
Still, I am reopening this issue and marking it as a feature request Anyone interested in contributing can create a PR - a good blog post about NativeScript contributing can be found here.
80% at times looks nice on a phone, but looks terrible on a tablet if its a button (specially if that goes in landscape mode). So if I would like a button to span the screen on a phone in portrait mode, and not span the entire screen if we're in a tablet, I would prefer to lock that button not grow larger than, say, 300 width wise, and that could make it look very nice.
And this is just an example, there could be many many use cases for such a basic css property.
Examples Like this too:
When you have a BarChart, etc and you want to limit the max width of the container for tablets. React Native example here
Hi, guys, I'm using nativescript-vue, and you can try the codes below. It perfectly simulates the max-width effect.
<template>
<Page>
<AbsoluteLayout>
<FlexboxLayout alignItems="center" ref="accordionTheme" class="outter" width="80%">
<StackLayout width="auto" class="inner" backgroundColor="red" >
<Label text="This is a sample text." textWrap="true" />
<!-- <Label text="This is a sample text, This line shows what happens when it exceeds the set maximum width." textWrap="true" /> -->
</StackLayout>
</FlexboxLayout>
</AbsoluteLayout>
</Page>
</template>
<style>
.outter {
padding: 5 10;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 30px;
}
.inner {
padding: 2 5;
background-color: rgba(225, 20, 20, 0.7);
color: white;
border-radius: 30px;
font-size: 12px;
}
</style>
