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;
}
1 Like
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 }
I gave a personalized one with colors for my application and I share it with you
.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-buttonNoBorder {
color:#00355C !important;
font-weight: bold !important;
}
.dialog-buttonNoBorder:hover {
background-color:#EDEDED !important;
}
.dialog-header {
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom: solid #00355C 1px;
text-align: center;
padding: 10px 16px 6px 16px;
color:white;
background-color:#00355C;
border-left-color:#00355C;
}
Thanks for posting this. If you want to try it in your own project, paste it into Open Project CSS under the Project menu.
Hi George
Since the latest app studio updates, my css code for changing the msgbox is no longer working only in the dialog-buttonbar class (even though I put !immportant). Any value I put does not comply with projectcss, only if I change the property of this class after the first loading of the msgbox element
Below is an image with the class and msgbox with the problem and my css code that is in projectcss
.dialog-buttonbar {
border-bottom-right-radius: 15px;!important;
border-bottom-left-radius: 15px;!important;
padding:0px 0px 0px 0px;!important;
}
.dialog-buttonNoBorder:first-child {
border-bottom-left-radius: 15px;
}
.dialog-buttonNoBorder:last-child {
border-bottom-right-radius: 15px;
}
.dialog-buttonNoBorder {
padding:0 0 0 0;
color:#1b61a7 !important;
font-weight: bold !important;
height:100%;
}
.dialog-buttonNoBorder:hover {
background-color:#EDEDED !important;
}
.dialog-header {
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom: solid #1b61a7 1px;
text-align: center;
padding: 10px 16px 6px 16px;
color:white;
background-color:#1b61a7;
border-left-color:#1b61a7;
}
Could you make a small project, with just a MsgBox, that shows off this problem?
making the new project you asked,we remove
user-select: none; from the beginning porjectsCSS and works fine… i put it at the end…
i have no ideia why…
in attach follow the sample to you see. please see the projectcss comments
NSB_MsgBox.appstudio.zip (22.5 KB)
I tried your project and could not see the issue.
I ran it once as you attached it. I then commented out line 1 and uncommented line 44. I ran the app and tried the InputBox. The results look the same to me.
Am I missing something?