Help with styling ... JSON vs HTML. Pics and Examples

Support
1

I pulled some HTML elements off of tailwindui.com

In this snippet, my group of questions are placed nicely within the white box (photo)

<!-- TECH-->
<div class="space-y-6">
    <div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6">
        <div class="md:grid md:grid-cols-3 md:gap-6">
            <div class="md:col-span-1">
                <h3 class="text-lg font-bold leading-6 text-gray-900">Tech Info</h3>
                <p class="mt-1 text-sm text-gray-500">All the nerdy stuff</p>
            </div>
            <div class="mt-5 md:mt-0 md:col-span-2">
                <form action="#" method="POST">
                    <fieldset>
                        ....a lot of other stuff here
            </div>
        </div>
        </fieldset>
        </form>
    </div>
</div>

Screen Shot 2022-03-25 at 5.05.34 PM
Screen Shot 2022-03-25 at 5.05.34 PM2870×1056 121 KB

I’m not familiar with HTML at all. I see that the white rounded corner box is declared at the top of the html code.

In JSON, it seems, I put a "styleClasses": "some styling here" outside of a fields block like so:

"fields": [{
    "something": "somethingHere"
}],
"styleClasses": "add my styling classes for the above fields here"

So … I’m thinking … if I just put what’s in the html <div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6"> into the styleClasses like so:

"styleClasses": "bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6"

it would look the same.

But it looks like…

Screen Shot 2022-03-25 at 5.11.45 PM
Screen Shot 2022-03-25 at 5.11.45 PM2846×368 18.4 KB

and it makes everything below it wonky.

Everything in my form has been HTML from tailwindui.com up until now because I need to add a timePicker and can only find the FM Examples that are in JSON.

What should I do? Ditch all the HTML stuff and just go with JSON?

2

Some libraries can be used in HTML blocks. Can see this example using vue-datetime.

The required DOM insertions are:

<!--Vue-DateTime-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/1.25.0/luxon.min.js" integrity="sha512-OyrI249ZRX2hY/1CAD+edQR90flhuXqYqjNYFJAiflsKsMxpUYg5kbDDAVA8Vp0HMlPG/aAl1tFASi1h4eRoQw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/vue-datetime@1.0.0-beta.14/dist/vue-datetime.css">
<script src="https://unpkg.com/vue-datetime@1.0.0-beta.13/dist/vue-datetime.js"></script>
3

Sorry also need this in your onAppLoad in your Global Action Scripts

Vue.component('vue-datetime', window.VueDatetime.Datetime);
4

I’m trying to replicate my HTML blocks into JSON blocks.

How do I move the text in the first column into the middle column?

Screen Shot 2022-03-25 at 6.44.46 PM
Screen Shot 2022-03-25 at 6.44.46 PM2872×1414 476 KB

5

Perhaps this may help with grid positioning: Grid Column Start / End - Tailwind CSS

6

OK.

So as I understand it …

I’m declaring a grid in my JSON block styleClasses, right?

 "styleClasses": "bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6 md:grid md:grid-cols-3 md:gap-6"

And then whatever is above this styleClasses and inside my fields block will be a part of this grid.

So, for each item, I need to tell it where to go within the grid?