B4J Tutorial SithasoDaisy TailwindCSS UI Toolkit: Q & A

Hi there

NB: Where possible, please include a simple project that demonstrates your use case.

Do you have any questions about SithasoDaisy UI Toolkit?

You can shoot it here and we will oblige.

Thanks in advance?


Join on Telegram

SithasoDaisy

TailwindCSS WebApps using b4x
t.me t.me

Check $5 WebApps

SithasoDaisy WebApps @ $5 Each

Hi there Disclaimer: These WebApps are hosted on Netlify and the back-end hosted on PocketHost (just for demonstration purposes). You will have to set up the SQLite Webserver on your own machine for a better experience. PocketHost is not recommended for production purposes as its slow compared...
www.b4x.com www.b4x.com
 
Last edited:
Click to expand...
MichalK73

MichalK73

Well-Known Member
Licensed User
Longtime User
For example, I noticed that when there is a button in the modalform, this happens, and a button outside the modalform on the same page works perfectly.
 
S

sdleidel

Active Member
Licensed User
Longtime User
MichalK73 said:
For example, I noticed that when there is a button in the modalform, this happens, and a button outside the modalform on the same page works perfectly.
Click to expand...
I have no problems with modals..

Add event.preventDefault on the click event as a first line.

And all is fine…
 
MichalK73

MichalK73

Well-Known Member
Licensed User
Longtime User
Mashiane said:
The videos you sent via whatsapp also helped to see what was happening. Glad you got help. All the best with your projects.
Click to expand...
Yes it was a good solution. Online in a few minutes it was possible to find a solution. Faster than we would have had to write each other posts here.
Many thanks for your help.
A small mistake big problems.;)
 
S

sdleidel

Active Member
Licensed User
Longtime User
SDUITEXTBOX as Password
I found a problem with "toggleeyes".
When you press the Button to toggle the "eyes" the Browser say:

sithasodaisy.js:3 Uncaught TypeError: Cannot read properties of null (reading '_melement')
at _B.remove (sithasodaisy.js:3:382056)
at _B.setappendicon (sithasodaisy.js:372:153056)
at _B.toggleeyes (sithasodaisy.js:372:152308)
at banano_sithasodaisydemo_demotext.txtpassword_append_click (app.js:3:387161)
at HTMLUnknownElement.<anonymous> (sithasodaisy.js:3:163530)
at HTMLUnknownElement.n (bananocore.js:5:5659)
_B.remove @ sithasodaisy.js:3
_B.setappendicon @ sithasodaisy.js:372
_B.toggleeyes @ sithasodaisy.js:372
txtpassword_append_click @ app.js:3
(anonymous) @ sithasodaisy.js:3
n @ bananocore.js:5

Is this a Bug ?
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
sdleidel said:
SDUITEXTBOX as Password
I found a problem with "toggleeyes".
When you press the Button to toggle the "eyes" the Browser say:

sithasodaisy.js:3 Uncaught TypeError: Cannot read properties of null (reading '_melement')
at _B.remove (sithasodaisy.js:3:382056)
at _B.setappendicon (sithasodaisy.js:372:153056)
at _B.toggleeyes (sithasodaisy.js:372:152308)
at banano_sithasodaisydemo_demotext.txtpassword_append_click (app.js:3:387161)
at HTMLUnknownElement.<anonymous> (sithasodaisy.js:3:163530)
at HTMLUnknownElement.n (bananocore.js:5:5659)
_B.remove @ sithasodaisy.js:3
_B.setappendicon @ sithasodaisy.js:372
_B.toggleeyes @ sithasodaisy.js:372
txtpassword_append_click @ app.js:3
(anonymous) @ sithasodaisy.js:3
n @ bananocore.js:5

Is this a Bug ?
Click to expand...
This bug has been fixed, please get SithasoDaisy 2 from the same link sent to your email.
 
S

sdleidel

Active Member
Licensed User
Longtime User
Question:
I have a Table with a Footer.

How i can Export the Table as PDF with the Footer ?
Or how i can get the Data (Values) from the footer ?
 
MichalK73

MichalK73

Well-Known Member
Licensed User
Longtime User
Hello.
How to use appdrawer as navbar ? I don't want to use a side menu, on the page is enough for me, for example, 4 items in navbar, but that it would behave like appdrawer to switch to the next selected page.
 
MichalK73

MichalK73

Well-Known Member
Licensed User
Longtime User
Mashiane said:
Use the SDUIMenu and set "Menu Vertical" to true
Click to expand...
It doesn't work.
The menu is vertical.

Whether it is true or false in SDUIMenu there is always a vertical menu and not horizontal items in the bar.
1704878425082.png

1704878452598.png
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
MichalK73 said:
It doesn't work.
The menu is vertical.

Whether it is true or false in SDUIMenu there is always a vertical menu and not horizontal items in the bar.
Click to expand...
I should have said false, my bad, You NEED to set it to be Horizontal via code like this demo example.

1704880079835.png


Update: Will make this toggle-able in next release.
 
MichalK73

MichalK73

Well-Known Member
Licensed User
Longtime User
I tested it a little differently.

1704880403960.png



B4X: 
Sub navmenu
    menu2.AddItem("jeden", "Pod strona nr 1")
    menu2.AddItem("dwa", "Pod strona nr 2")
    menu2.AddItem("trzy", "Pod strona nr 3")
    menu2.AddItem("cztery", "Pod strona nr 4")
    menu2.Active="jeden"
    Dim id As List = Array As String("jeden","dwa","trzy","cztery")
    For Each name_id As String In id
        Dim b1 As SDUIButton = menu2.Button(name_id)
        b1.Ghost
    Next
End Sub

1704880502642.png

I will still see what you wrote above. ;)
 
MichalK73

MichalK73

Well-Known Member
Licensed User
Longtime User
Mashiane said:
I should have said false, my bad, You NEED to set it to be Horizontal via code like this demo example.

View attachment 149512

Update: Will make this toggle-able in next release.
Click to expand...
Yes now it works ok, but there was another small problem.
I set identical colors for navbar and menu but there is a background difference and they don't coincide.

1704881901910.png

B4X: 
    menu3.Horizontal
    menu3.AddItem("jeden", "Pod strona nr 1")
    menu3.AddItem("dwa", "Pod strona nr 2")
    menu3.AddItem("trzy", "Pod strona nr 3")
    menu3.AddItem("cztery", "Pod strona nr 4")
    menu3.BGColorIntensity("grey",500)
    appnavbar.BGColorIntensity("grey",500)
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
MichalK73 said:
Yes now it works ok, but there was another small problem.
I set identical colors for navbar and menu but there is a background difference and they don't coincide.

View attachment 149516
B4X: 
    menu3.Horizontal
    menu3.AddItem("jeden", "Pod strona nr 1")
    menu3.AddItem("dwa", "Pod strona nr 2")
    menu3.AddItem("trzy", "Pod strona nr 3")
    menu3.AddItem("cztery", "Pod strona nr 4")
    menu3.BGColorIntensity("grey",500)
    appnavbar.BGColorIntensity("grey",500)
Click to expand...
Will check.
 
MichalK73

MichalK73

Well-Known Member
Licensed User
Longtime User
Another question.
I have a sub page that is called from the navbar menu. There is no appdrawer on the home page.

The GUI page code is built from code and not from designer.
Due to the fact that there is no appdrawer on the page that generates the 'pageviewer' I have to put the page code into "#body" but then it deletes and disappears the navbar with pgindex. How to add from the code level "pageviewer" to make nav bar remain after switching to subpage ??

pgindex: 
Sub Initialize                    'ignoreDeadCode
    'initialize the app
    app.AddApp(Me, Main.AppName)
    BANano.Await(app.UsesJQuery)
    BANano.Await(app.UsesSignaturePad)
    'set the font of the app
    app.Font = "font-sans"
    'load the base layout
    BANano.LoadLayout(app.Here, "baselayout2")
'    BANano.LoadLayout(app.Here, "baselayout")
    'link this app to the drawer, this is needed
    'when adding pages to side nav
    appdrawer.app = app
    'create the drawer menu
'    CreateDrawerMenu
    'add any other page not added to the drawer menu
'    AddPages
    navmenu
    'show the home page
    pgHome.Show(app)
End Sub

Private Sub menu2_Click (item As String)
    Log(item)
    Select item
        Case "jeden"
            pgone.Show(app)
    End Select
End Sub

pgone: 
'***** DO NOT DELETE OR CHANGE THIS FILE *****
#IgnoreWarnings:12, 9
Sub Process_Globals
    'this is the name of the page
    Public name As String = "one"
    Public title As String = "Page One"
    Public icon As String = ""
    'this variable holds the page controller
    Public page As SDUIPage
    'this variable holds reference to the app
    'usually for constants and other things
    Public app As SDUIApp
    'the variable referencing banano lib
    Private banano As BANano        'ignore
End Sub

'sub to show the page
Sub Show(duiapp As SDUIApp)            'ignore
'    page.AddPage(Me, name)  ===>>> [B]THIS ERROR 'not pageviewer[/B]'
    page.AddPageTo(Me, "#body", name)
    page.Root.p(6)
   
    'get the reference to the app
    app = duiapp
    'build the page, via code or loadlayouts
    BuildPage
End Sub


Sub getName As String
    Return name
End Sub

Sub getIcon As String
    Return icon
End Sub

Sub getTitle As String
    Return title
End Sub

'start building the page
private Sub BuildPage
'    banano.LoadLayout(app.PageViewer, "adblanklayout")
    page.Root.designMode(False)
    page.Root.mxAuto
    page.Root.AddRows2.AddColumns1
    page.Root.BuildGrid
   
    Dim lab1 As SDUILabel = page.Cell(1,1).AddLabel("la","Witam strona one")
   
End Sub
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
MichalK73 said:
Another question.
I have a sub page that is called from the navbar menu. There is no appdrawer on the home page.

The GUI page code is built from code and not from designer.
Due to the fact that there is no appdrawer on the page that generates the 'pageviewer' I have to put the page code into "#body" but then it deletes and disappears the navbar with pgindex. How to add from the code level "pageviewer" to make nav bar remain after switching to subpage ??

pgindex: 
Sub Initialize                    'ignoreDeadCode
    'initialize the app
    app.AddApp(Me, Main.AppName)
    BANano.Await(app.UsesJQuery)
    BANano.Await(app.UsesSignaturePad)
    'set the font of the app
    app.Font = "font-sans"
    'load the base layout
    BANano.LoadLayout(app.Here, "baselayout2")
'    BANano.LoadLayout(app.Here, "baselayout")
    'link this app to the drawer, this is needed
    'when adding pages to side nav
    appdrawer.app = app
    'create the drawer menu
'    CreateDrawerMenu
    'add any other page not added to the drawer menu
'    AddPages
    navmenu
    'show the home page
    pgHome.Show(app)
End Sub

Private Sub menu2_Click (item As String)
    Log(item)
    Select item
        Case "jeden"
            pgone.Show(app)
    End Select
End Sub

pgone: 
'***** DO NOT DELETE OR CHANGE THIS FILE *****
#IgnoreWarnings:12, 9
Sub Process_Globals
    'this is the name of the page
    Public name As String = "one"
    Public title As String = "Page One"
    Public icon As String = ""
    'this variable holds the page controller
    Public page As SDUIPage
    'this variable holds reference to the app
    'usually for constants and other things
    Public app As SDUIApp
    'the variable referencing banano lib
    Private banano As BANano        'ignore
End Sub

'sub to show the page
Sub Show(duiapp As SDUIApp)            'ignore
'    page.AddPage(Me, name)  ===>>> [B]THIS ERROR 'not pageviewer[/B]'
    page.AddPageTo(Me, "#body", name)
    page.Root.p(6)
  
    'get the reference to the app
    app = duiapp
    'build the page, via code or loadlayouts
    BuildPage
End Sub


Sub getName As String
    Return name
End Sub

Sub getIcon As String
    Return icon
End Sub

Sub getTitle As String
    Return title
End Sub

'start building the page
private Sub BuildPage
'    banano.LoadLayout(app.PageViewer, "adblanklayout")
    page.Root.designMode(False)
    page.Root.mxAuto
    page.Root.AddRows2.AddColumns1
    page.Root.BuildGrid
  
    Dim lab1 As SDUILabel = page.Cell(1,1).AddLabel("la","Witam strona one")
  
End Sub
Click to expand...
Did you see the 3 page template project? This has 1 drawer and navbar and additional pages that one can navigate to with the drawer and navbar intact in pgindex.
 
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article
B4J Tutorial [Web][SithasoDaisy] Mastering the TailwindCSS Grid
Replies
0
Views
260
Mashiane
Mashiane
MichalK73
  • Article
B4J Tutorial SithasoDaisy TailwindCSS - Multilanguage
Replies
2
Views
778
MichalK73
MichalK73
Mashiane
SithasoDaisy: Mashy Teaches TailwindCSS using b4x (with eBook)
4 5 6
Replies
110
Views
21K
Mashiane
Mashiane
Mashiane
  • Article
B4J Library [Web] SithasoDaisy: TailwindCss WebApps powered by B4x & BANano
3 4 5
Replies
86
Views
15K
Mashiane
Mashiane
Mashiane
  • Article
Share My Creation [Web] SithasoDaisy: TailwindCSS + DaisyUI Toolbox
3 4 5
Replies
84
Views
18K
Mashiane
Mashiane
Top