Is it possible to apply my own css to the NSB.Msgbox ?
i.e.
if ios then NSB.Msgbox CSS = { }
if Andriod then NSB.Msgbox CSS = { }
So I can style the msgbox to look like a native message box.
Yes, it is possible. Display a message box in your app, then look at the Elements tab in the Chrome Debugger. You’ll see that the appearance is set by several classes, including dialog-header, dialog-content and dialog-text. If you override those classes in your code, they will change.
Share your story with the AppStudio Community! Quarantine Stories
Perfect, thank you worked a treat.
For anyone looking for a iOS style msgbox:
.dialog-buttonbar {
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
.dialog-buttonNoBorder:first-child {
border-bottom-left-radius: 15px;
}
.dialog-buttonNoBorder:last-child {
border-bottom-right-radius: 15px;
}
.dialog-header {
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom: solid lightgrey 1px;
text-align: center;
}
Thanks for posting this!
For those who are wondering, this code gets pasted into the Project CSS.
Share your story with the AppStudio Community! Quarantine Stories
Updated iOS Style NSB.Msgbox
/*!
- Custom NSB.MsgBox custom CSS
*/
.dialog-buttonbar {
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
.dialog-buttonNoBorder:first-child {
border-bottom-left-radius: 15px;
}
.dialog-buttonNoBorder:last-child {
border-bottom-right-radius: 15px;
}
.dialog-header {
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom: 0px;
text-align: center;
}
.dialog-content {
border-top: 0px;
}
.dialog-wrapper {
position: fixed !important;
left: 50%;
transform: translateX(-50%);
}
This CSS code no longer works, it seems it is not being added or applied when I run the app. I checked the Chrome console and the CSS is not added.
FIXED: Was an error in some of my other css missing a }