Dialogs: Provide ability to set different color/font style for title

Currently the default label color per styles is applied to both the contents of the dialog and also the title. It will be nice to have ability to specify different colors - one for title and one for the message.
Reason for this is that I want to mimic as closely as possible the default iOS alert style - i.e. bold blue title and black text. From what I see with the current implementation this is not possible.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

@PeterStaev

Hi @PeterStaev,
Thank you for your suggestion.
One option to change the color of the Label and Button text is to Applying a global CSS style color to Label and Button, which will also affect the style of dialogs.

Regarding that, another option is to use non-fullscreen modal page, which will allow you to style the child components inside it as you wish and to set up the Color and the FontStyle of the text.

@tsonevn

Hey @tsonevn ,
Both workarounds will not work:

Changing the Label color/weight globally will affect both the title and the message.
According to the docs the modal page on iPhone is always displayed full screen.

@PeterStaev

Hi @PeterStaev,
Does it applicable for you, to create custom CSS selector, which allows setting the specific style for the Dialogs. For example:

Dialog{
color:red;
font-size:24;
}

@tsonevn

Hi @tsonevn , I've tried putting that style in app.css but seems it does not have any effect (I'm using {N} w/o Angular). Also wont that again style all the text on the dialog? What I want to achieve is when I use this:

dialogs.alert({
     title: "Success",
     message: "Contact Saved!",
     okButtonText: "OK"
});

The "Success" word to be bold/black (or whatever the default iOS style is) while the text "Contact Saved!" to be whatever style I've setup for Label/Dialog. Instead I'm getting this:

Which makes the title indistinguishable from the message.

@PeterStaev

Hi @PeterStaev.
Excuse me if I was not clear enough,
My question was if it is applicable for you, such a dialog selector to be created in the feature for some of the next NativeScirpt versions.
Regarding that, if I understand you correctly, you would like to change the style for each dialog individually.

Aha, ok the selector would make sense as long as it does not style the message label as well.

But how about we extend this in the following way, to give the most flexibility:

Style applied to both body and title

Dialog {..}

Style applied to title only

Dialog title {...}

Style applied to the body only

Dialog body {...}

This would be really great for styling a Delete option different from the rest of the options. For example, Delete in this list should be styled differently, like with red bold text (examples of this are in many iOS applications)

if Dialog can have some extra property like 'cssClass' which can be set when creating dialog and this class will be added to dialog layout container then it will be very nice feature have.
+1

is there any progress on this issue?

It would be great to at least have the option to add a "destructive button" that would be red.

@frapaa

agreed with @frapaa. would love to leverage this.

Any progress or updates on this?

Obviously complete CSS control would be ideal. In the mean time we could add an option to use destructiveButtonText as an alternative to cancelButtonText for alert. It would then apply the destructive style (red) on iOS.

+1 for styling options for dialogs

Right now this feature is more important due to the iOs 13 dark mode.
Now by default, without specifing otherwise, in dark mode the Label color is white!, so if we want our texts to be dark we must style the labels, afecting this to the dialogs too.

So we need urgently the ability to distinguish between plain label or dialogs texts.

I have found that scoping any Button and Label styles to Page leaves the OS's defaults (white label, blue button) in dialogs and menus, which was a good enough solution for us. So if you do Button { color: black } or Label { color: black } anywhere in your CSS, change it to Page Button { color: black }; Page Label { color: black}, and your alerts will be legible in both dark and light mode.

What's the status on this?

Any update on this?

Right now this feature is more important due to the iOs 13 dark mode.
Now by default, without specifing otherwise, in dark mode the Label color is white!, so if we want our texts to be dark we must style the labels, afecting this to the dialogs too.

So we need urgently the ability to distinguish between plain label or dialogs texts.

A bit off topic but how did you manage to place buttons side by side? I can't find any info on NativeScript.com or anywhere else on how to achieve this layout.

Thank you in advance!

Any workaround or update on this ?

@andrewm-mitchells

@andrewm-mitchells That is for iOS. As I know, you can't do it on Android.

@vahidvdn

@vahidvdn @andrewm-mitchells

Try :
confirm({ title: 'Your title', message: 'lorem ipsum, cancelButtonText: 'Nope', okButtonText: 'Yup' })

If you want full customisation of your dialog you can use nativescript-material-dialogs which allows you to use a custom view in which you can do whatever !
There are a few examples in the vue demo app

I have found that scoping any Button and Label styles to Page leaves the OS's defaults (white label, blue button) in dialogs and menus, which was a good enough solution for us. So if you do Button { color: black } or Label { color: black } anywhere in your CSS, change it to Page Button { color: black }; Page Label { color: black}, and your alerts will be legible in both dark and light mode.

Thanks so much!!!!!!! This helped out a team of me, a co-worker, and a college student team so much 👍👍

Thanks for the request. Built-in dialogs follow the platform's native alert styling, and we don't plan to add separate title styling. For fully custom dialogs, @nativescript-community/ui-material-dialogs supports custom views, or you can show your own view with showModal. Closing.

Navigation Menu

Repository navigation

Dialogs: Provide ability to set different color/font style for title #3830

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Dialogs: Provide ability to set different color/font style for title #3830

Description

Activity

tsonevn commented on Mar 21, 2017

PeterStaev commented on Mar 21, 2017

tsonevn commented on Mar 28, 2017

PeterStaev commented on Mar 28, 2017

tsonevn commented on Mar 28, 2017

PeterStaev commented on Mar 28, 2017

NathanaelA commented on Mar 28, 2017

davecoffin commented on Aug 25, 2017

bhavincb commented on Mar 9, 2018

MetaiR commented on Dec 4, 2018

fpaaske commented on Dec 19, 2018

drewcovi commented on Jan 2, 2019

danielnitu commented on Jun 21, 2019

lochstar commented on Jul 2, 2019

Izrab commented on Sep 4, 2019

Macarthurval commented on Oct 5, 2019

Mottokrosh commented on Oct 29, 2019

SmailHammour commented on Jan 24, 2020

vahidvdn commented on May 12, 2020

andrewm-mitchells commented on May 28, 2020

dtomaszewski commented on Aug 23, 2020

vahidvdn commented on Aug 24, 2020

dtomaszewski commented on Aug 24, 2020

farfromrefug commented on Aug 27, 2020

Austin117 commented on Apr 16, 2021

NathanWalker commented on Oct 23, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions