Nativescript: Allow borders to be applied on a per-side basis in CSS
I'm finding that I frequently need to put a border on one side of a UI component, but NativeScript currently does not support this. I'm requesting that the following CSS properties be added:
border-top-widthborder-top-colorborder-right-widthborder-right-colorborder-bottom-widthborder-bottom-colorborder-left-widthborder-left-color
To be consistent with CSS, I would also like the border-width and border-color shorthands to work like they do in CSS.
Update: You can vote for this feature at https://nativescript.ideas.aha.io/ideas/NS-I-110.
Thanks.
tjvantoll
All 58 comments
Yes please :+1:
lscown
on 1 Oct 2015
:+1:
PeterStaev
on 1 Oct 2015
:+1:
tsvetan-ganev
on 2 Oct 2015
:+1:
kishmiryan-karlen
on 5 Oct 2015
@tjvantoll do you have any workaround now?
kishmiryan-karlen
on 5 Oct 2015
:+1:
kvelikov
on 14 Oct 2015
So how do we set a border to a specific side right now?
rclai
on 5 Nov 2015
What I’ve been doing is something like <stack-layout style="height: 2; border-color: red; border-width: 2;"></stack-layout>, which is definitely hacky, but it works until per-side borders are truly supported.
tjvantoll
on 5 Nov 2015
Oh haha okay, thanks.
rclai
on 5 Nov 2015
It feature is just vital! :+1:
tenorok
on 22 Nov 2015
+1
stevetayloruk
on 23 Nov 2015
+1
sitefinitysteve
on 8 Dec 2015
+1
karlix
on 8 Dec 2015
+1
firescript
on 16 Dec 2015
So how do we set a border to a specific side right now? Like the TabView does for the border-bottom?
RusEu
on 2 Jan 2016
+1
tiagordc
on 7 Jan 2016
+1
maykefreitas
on 19 Jan 2016
+5
swlemp
on 1 Feb 2016
+1
lelong37
on 8 Feb 2016
+1
dragGH102
on 11 Feb 2016
+1
nripendra
on 19 Feb 2016
+1
Premitium
on 23 Feb 2016
+1
gadonski
on 1 Mar 2016
+1
treio
on 4 Mar 2016
Common, lets tag this with "high" we all need it, height:1 StackLayout is suuuuper bloaty and hacky
sitefinitysteve
on 7 Mar 2016
:+1:
PanayotCankov
on 9 Mar 2016
+1
erkanarslan
on 10 Mar 2016
+1
paveldk
on 14 Mar 2016
+1
runningBuffalo
on 15 Mar 2016
+1
vdende
on 21 Mar 2016
+1
mariocosme
on 24 Mar 2016
+1
k3yb0ardn1nja
on 29 Mar 2016
+1
JoshDSommer
on 1 Apr 2016
+1
yezarela
on 15 Apr 2016
+1
Daxito
on 27 Apr 2016
+1
leocaseiro
on 3 May 2016
Guys, vote here, please: https://nativescript.ideas.aha.io/ideas/NS-I-110
@tjvantoll would you mind add this link to your description?
leocaseiro
on 11 May 2016
great idea @Leo.
done!
On May 11, 2016 5:18 AM, "Leo Caseiro" [email protected] wrote:
Guys, vote here, please: https://nativescript.ideas.aha.io/ideas/NS-I-110
—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub
https://github.com/NativeScript/NativeScript/issues/859#issuecomment-218351516
dragGH102
on 11 May 2016
@leocaseiro: @tjvantoll would you mind add this link to your description?
Done!
And just an fyi to everyone watching here, per-side borders are pretty easy to do on Android, but a complete pain on iOS—which is why this hasn’t been implemented in the modules yet. Getting per-side borders right on iOS is a big engineering challenge, and it’s not as simple as adding a few properties into a list. (Side note: I took a stab at implementing border-bottom on an iOS UITextField and failed horribly myself.) That being said, we realize there’s a lot of demand here so we do want to tackle this. If you want to see this implemented add your vote to help us prioritize.
tjvantoll
on 23 May 2016
+1
luigi7up
on 13 Jun 2016
đź‘Ť
kenhowardpdx
on 26 Jun 2016
đź‘Ť
jmak
on 29 Jun 2016
+1
kwong93
on 8 Jul 2016
probably a dependency to #1763
valentinstoychev
on 13 Jul 2016
Will it require :first-child and :last-child pseudo class selectors after it?
PanayotCankov
on 21 Jul 2016
+1
jorendemaeyer1996
on 1 Aug 2016
+1
carakan
on 2 Aug 2016
@tjvantoll iOS has sufficient APIs to draw it.
PanayotCankov
on 3 Aug 2016
FWIW, I just use a background image for what i've needed so far ( a single line underneath an element)
philpalmieri
on 24 Aug 2016
+1
ahmedelgendy
on 29 Aug 2016
+1
mragwa
on 29 Aug 2016
https://github.com/NativeScript/NativeScript/pull/2743 adds basic support for non-uniform borders.
Current limitations are:
- Different border radii on the four corners are not yet supported
- Border radius is supported only when the border width and color is uniform on all four sides.
- Images on iOS will still render behind the border as they always have, until a fix is provided.
hamorphis
on 17 Sep 2016
hamorphis
on 17 Sep 2016
... So happy right now
sitefinitysteve
on 17 Sep 2016
:neckbeard:
hamorphis
on 17 Sep 2016
Awesome!!!
JoshDSommer
on 19 Sep 2016
Outstanding issues
- [ ] Support uniform and non-uniform border radii on non-uniform border colors and/or widths.
- [ ] Some iOS components such as Image, HtmlView and ListView will render behind the borders. Quick workaround is to place the component inside one of our Layouts and set the borders on the Layout instead.
- [ ] iOS ScrollView cannot render non-uniform borders nicely with the current approach of adding for child layers to the UIView in order to draw the borders. When scrolling starts these 4 layers fly all around the place.
- [ ] Android ScrollView draws no borders at all.
NOTE: Progress, Slider, Switch and SearchBar do not render borders by design.
hamorphis
on 20 Sep 2016
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
![lock[bot] picture](https://avatars1.githubusercontent.com/in/6672?v=4&s=40)
lock[bot]
on 29 Aug 2019
Related issues
kn9ts
·
3Comments
dhanalakshmitawwa
·
3Comments
dxshindeo
·
3Comments
hshristov
·
3Comments
Pourya8366
·
3Comments
Most helpful comment