Cannot set label vertical padding on iOS

Did you verify this is a real problem by searching [Stack Overflow]

Yes

Tell us about the problem

I cannot set vertical padding of label elements on iOS. Padding values are applied like margin values. New space is added but background-color is not applied to that area. Because of that it looks same as applying margin.

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

CLI: 3.3.1
Cross-platform modules: 3.3.0
Runtime(s): 3.3.0

Please tell us how to recreate the issue in as much detail as possible.

Create a label element.
Set its background color.
Set its padding to something large.
Vertiacal padding is not applied.

@erkanarslan

Hi @erkanarslan,
Thank you for contacting us.
I tested your scenario with the latest version of NativeScript 3.4, which was released yesterday and was unable to recreate the similar issue with the vertical padding on iOS. For your convenience, I am attaching sample project and Gif file, which demonstrates how it is working.
Also please review the project and make the needed changes, which will allow us to recreate this behavior.
Archive.zip

@tsonevn

@tsonevn I noticed that padding is set incorrectly if label is inside flexbox-layout. Here are my xml, css codes and images from app:

The element with padding is the one that has task-state class.

<stack-layout class="task priority-border priority-{{task.priority}}">
	<label [text]="task.name" class="task-name"></label>
	<flexbox-layout class="task-details">
		<flexbox-layout class="flexible flex-center">
			<label [text]="task.state.name" class="task-state" [ngStyle]="{'background-color' : task.state.color, color : task.state.textColor}"></label>
			<label [text]="task | readableInterval" class="date flexible {{task.completedAt ? '' : (task.deadline | isOverdue) ? 'text-danger' : 'text-warning'}}"></label>
		</flexbox-layout>
		<flexbox-layout>
			<image *ngFor="let user of task.assignees" [src]="user.profile" class="user-profile"></image>
		</flexbox-layout>
	</flexbox-layout>
</stack-layout>

.task-state {
	border-radius: 4;
	color: white;
	padding: 2 6;
	margin-right: 8;
}

Look at the green element. In the first image below, padding is set as shown in the css code above. In the second image, padding is set to 6 6. Even though padding value is set to a greater value in the second one, its vertical padding is 0 or something very small.

@erkanarslan

Hi @erkanarslan,
I reused some part of the above-provided code samples, however, was unable to recreate the exact same behavior like the described one. For your convenience, I attached NS Angular sample project. Please review it again and make the needed changes, which will allow us to recreate the same behavior.
Archive.zip

It looks like this is fixed in version 3.4.0.
Thanks.

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.

Navigation Menu

Repository navigation

Cannot set label vertical padding on iOS #5194

Did you verify this is a real problem by searching [Stack Overflow]

Tell us about the problem

Which platform(s) does your issue occur on?

Please provide the following version numbers that your issue occurs with:

Please tell us how to recreate the issue in as much detail as possible.

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Cannot set label vertical padding on iOS #5194

Description

Did you verify this is a real problem by searching [Stack Overflow]

Tell us about the problem

Which platform(s) does your issue occur on?

Please provide the following version numbers that your issue occurs with:

Please tell us how to recreate the issue in as much detail as possible.

Activity

tsonevn commented on Dec 21, 2017

erkanarslan commented on Dec 21, 2017

tsonevn commented on Jan 2, 2018

erkanarslan commented on Jan 2, 2018

lock commented on Aug 27, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions