B4J Tutorial SithasoDaisy TailwindCSS UI Toolkit: Q & A

MichalK73 · Mar 20, 2023

I have a problem and don't know what the fault is. I have Designer view1 for the site.
In the 2nd row there are 2 columns 1 and 2. In the 2nd jet button and it works.
In R2C1 it is blank.

I make myself a DIV in the code and plug it under R2C1 but it doesn't display in that position but completely underneath everything.

B4X:

    Dim c1 As SDUIDiv  =page.Root.Cell(2,1).AddDiv("c1")
    c1.wFull.p(5).bgColor("white").border("1px").borderColorIntensity("grey",200).rounded("lg").shadow("md")
    Dim tit As SDUILabel = c1.AddLabel("tit","Another big project")
    tit.Root.mb(2).textSize("2xl").fontBold.trackingNormal
    Dim opis As SDUILabel = c1.AddParagraph("op","Another success story in which the use of the B4J tool was crucial. The project is a little older, but I think it is interesting to many people.    I was in charge of preparing signature headers For imprinting data on pharmaceutical products. It Is a mechanical print, such As on various medicines, where the batch control number And the date of validity And occasionally also the date of manufacture are printed.    In production, many batches of different products were made daily, so these...")
    opis.Root.textColor("blue").fontNormal.trackingNormal
    
    Dim b As SDUILink = c1.AddAnchor("link", "Click ...","#")
    b.Root.bgColorIntensity("purple",600).rounded("lg").hover("bg purple 800").focus("outline none"

In Browser.

Why is this being done?
I set specifically where it should appear and it is underneath.

MichalK73 · Mar 20, 2023

Hmmm
As in R2C1 I put in the SDUIDIV in Desinger then I can insert data and the data is displayed.

In browser

So there must be a DIV already in the desinger located. It's a pity, I thought it was possible to dynamically add the element depending on how the page works.
As there is no DIV element on the designer it displays under the page as above.

Mashiane · Mar 20, 2023

Hi, i need your help, can you please send me your layout that you were talking about so that i can investigate why its not working as expected?

Thank you so much.

asales · Mar 20, 2023

Due to my questions (posts 68, 78, 79, 80) that I can not get a soluction, I have one more:
can I use this SithasoDaisy in production or is to early?

Mashiane · Mar 20, 2023

asales said:
Due to my questions (posts 68, 78, 79, 80) that I can not get a soluction, I have one more:
can I use this SithasoDaisy in production or is to early?

The radiogroup and maxlength was fixed with version 1.31.

I have been looking at date picker, i dont have a solution as yet.

Mashiane · Mar 20, 2023

asales said:
One more to my question list:
- Everytime that I deploy a project, it create this files in the assets subfolder of www:
600by600.jpg, SithasoDaisyLogo.jpg, daisyui.jpg, .woff2 and .ttf extension files.

I don't use this files and it is don't in the assets folder of my project.
How can I remove this files automatically when I compile the project?

Thanks in advance.

These are files that come with the sithasodaisy.b4xlib, these are internal to the library.

You can just remove these in the b4xlib if you dont want them.

Mashiane · Mar 20, 2023

SithasoDaisy is already being used in production apps. All the original components from the daisyui website have been wrapped for SithasoDaisy.

We have been adding plugins to enhance the functionality of the library.

So yes, you can use it for production. I wish you all the best and if you have additional questions please dont hesitate to ask.

Thank you.

MichalK73 · Mar 21, 2023

Mashiane said:
Hi, i need your help, can you please send me your layout that you were talking about so that i can investigate why its not working as expected?

Thank you so much.

I have added 2 subpages: working and notworking. I have added Desinger templates.

Mashiane · Mar 23, 2023

asales said:
The SDUIFullCalendar component is great, but:

1- I can translate the month, week, days and buttons use the locale property:
View attachment 139670
but I could not translate this button ("today"):
View attachment 139669

2 - If I resize the browser or access the calendar using a mobile, it don't show correctly:
mobile
View attachment 139671

desktop
View attachment 139672

It seems this lib was not built for full responsiveness.

on the original site, when resizing the calendar it does not do it well.

Mashiane · Mar 23, 2023

asales said:
1- I can translate the month, week, days and buttons use the locale property:

I have added the locales for this. You can set such in the AD or code.

B4X:

fc = page.Cell(1, 1).AddFullCalendar("fc")
    'https://fullcalendar.io/docs/locale-demo
    fc.Locale = "af"

Mashiane · Mar 23, 2023

MichalK73 said:
I have added 2 subpages: working and notworking. I have added Desinger templates.

NotWorking...

Mistakes...

1. You cannot name a component/element grid, grid is a 'class' name internal to TailwindCSS, this will create conflicts in the end.
2. The name of the page in the code is notworkin, this should be the same name on the layout for the page, Page Name* property, in you code this is "grid", change it to notworkin, same as the code module name.

3. You cannot use .Cell(X, Y) to refer to non-existing elements. Let me explain, The names of the elements you have specified are exactly this. The page class is named "grid", there is no element in your layout that starts with "grid" except the page. There is no gridr2c1 below, i.e. page.Cell(2, 1)

This below...

B4X:

Dim c1 As SDUIDiv  =page.Cell(2,1).AddDiv("div1")

This means, find an element with id "[grid]r[2]c[1]"
If the element does not exist, append it to the existing layout. This is added at the bottom of existing elements.

you need to fix you element names on the layout. I had changed the page name to notworkin in my example so that you see clearly what the issue is.

All the best.

Updated notworkin

Output.

You can also do this without changing your element names to start with the page name.

1. Generate members for your elements
2. Then

B4X:

Dim c1 As SDUIDiv = R2C2.root.AddDiv("div1")

MichalK73 · Mar 23, 2023

Mashiane said:
1. You cannot name a component/element grid, grid is a 'class' name internal to TailwindCSS, this will create conflicts in the end.

I don't think it has an impact because it wouldn't work in the good working version either.

Mashiane said:
2. The name of the page in the code is notworkin, this should be the same name on the layout for the page, Page Name* property, in you code this is "grid", change it to notworkin, same as the code module name.

I have checked as you say, in the version as the names match and as the names do not match. In each case it is the same.

Mashiane said:
Dim c1 As SDUIDiv = R2C2.root.AddDiv("div1")

This has helped and works perfectly, even if the Page Name in Design is different to the 'name' in the module.

sdleidel · Mar 25, 2023

I have a question about SDUITable.
How can I determine the total items ?
So the items (number) that you have previously written with Setitem in the table.

Enrico Fuoti · Mar 26, 2023

Hello Mashiane,
In my effort to use Sithaso as my preferred web development tool, i found out that I could not find a way to generate printouts. Is there a way that I don't know, to create printable reports? If not, do you think that is something you could do to integrate something like that in the future? perhaps Jasper reports integration ?

Mashiane · Mar 26, 2023

sdleidel said:
I have a question about SDUITable.
How can I determine the total items ?
So the items (number) that you have previously written with Setitem in the table.

Will add a "Size" property and will be available soon.

Mashiane · Mar 26, 2023

Enrico Fuoti said:
Hello Mashiane,
In my effort to use Sithaso as my preferred web development tool, i found out that I could not find a way to generate printouts. Is there a way that I don't know, to create printable reports? If not, do you think that is something you could do to integrate something like that in the future? perhaps Jasper reports integration ?

One can do these in Ms Word currently. Please see these posts...

SithasoDaisy: How to create a Client List Report in MS Word

Hi By the end of this, you will be able to: 1. Get a client list from a REST API database. For this case we will use a fake REST API fom https://randomuser.me/ 2. Load this client list to a SDUITable. We will use the abstract designer & then add columns to the table. 3. Export this client list...

www.b4x.com

SithasoDocxTemplator: Creating MS Word Documents from Dynamic Templates in JavaScript

Hi the This was an interesting find: https://docxtemplater.com/, also its just so easy to use and understand. Below is my template. I am attempting to generate the API documentation for the SithasoDaisy ebook. This was easy to achieve using tables on the demo. And yes, I could fire up...

www.b4x.com

Mashiane · Mar 30, 2023

Found a responsive calendar...

asales · Mar 30, 2023

Mashiane said:
Found a responsive calendar...

View attachment 140739

Very nice. I'll check the modifications that you mention before. Thanks.

MichalK73 · Apr 3, 2023

I have a small problem.

I have a page where there is a background (graphic) and a modal window with data to enter.
When I press the button it checks if the data needed is entered, if not it displays a message. When the message is displayed, the background of the page disappears.

Mashiane · Apr 3, 2023

MichalK73 said:
I have a small problem.

I have a page where there is a background (graphic) and a modal window with data to enter.
When I press the button it checks if the data needed is entered, if not it displays a message. When the message is displayed, the background of the page disappears.

View attachment 140916 View attachment 140917

I must say that is some amazing UI right there. Its possible that the sweetlalert is interfering with the background image. I will have to investigate the matter as soon as possible.

Later.

B4J Tutorial SithasoDaisy TailwindCSS UI Toolkit: Q & A

Well-Known Member

Attachments

Well-Known Member

Expert

Expert

Expert

Expert

Expert

Well-Known Member

Attachments

Expert

Expert

Expert

Well-Known Member

Active Member

Active Member

Expert

Expert

Expert

Expert

Well-Known Member

Expert

Similar Threads