How to control the indicator gap on an Apache Royale Jewel form?

Question

I have a simple form:

<j:Form id="myForm3" x="720 "y="120" height="100" width="300">
    <j:FormItem label="data24"> 
        <b:TextInput id="data24"/>
    </j:FormItem>
    <j:FormItem label="data25"> 
        <b:TextInput id="data25"/>
    </j:FormItem>
    <j:FormItem label="data26"> 
        <b:TextInput id="data26"/>
    </j:FormItem>
<j:Form />

I want to control the gap between the label and the text input box. I thought I could do it with CSS but I can't find the right combination. How do do control this gap?

Or is there a better way to do the form?

score 0 · Answer 1 · answered Sep 08 '20 at 18:36

0

gap in FormItem is controlled trough the layout bead. By default In the following example (modeled like yours), I added a HorizontalLayout bead only to the first FormItem to show the difference with the rest:

<j:Form id="myForm3" x="720 "y="120" height="100" width="300">
    <j:FormItem label="data24">
        <j:beads>
            <j:HorizontalLayout gap="8"/>
        </j:beads> 
        <j:TextInput localId="data24"/>
    </j:FormItem>
    <j:FormItem label="data25"> 
        <j:TextInput localId="data25"/>
    </j:FormItem>
</j:Form>

I changed id for localId since html doesn't like duplicates, so better use always the later.

Note 1: default gap is in Jewel Theme

j|FormItem
    gap: 2
    itemsVerticalAlign: itemsCentered

Note 2: a gap = 2 means in default Jewel Theme, 2x3 = 6 pixels. The values are baked in CSS, and are multiples of 4. All the default numbers can be configured in Jewel Theme through SASS for more flexibility.

answered Sep 08 '20 at 18:36

Carlos Rovira

507
2
11

That helped somewhat. What I want is the label to be closer to the input box. Gap=0 doesn't get me there. I suspect there is padding or room being left for the "required" flag? Also, can you elaborate on localid versus id? There's nothing like that in Flex. I'm struggling coming from flex where thsings are laid out similiar but different... Example: I had no idea that a horizontallayout bead was applicable. I can't even figure out Themes. Very frustrating – wrkoch Sep 08 '20 at 22:06
hi, about localid: https://stackoverflow.com/questions/55923924/whats-the-difference-between-id-and-localid-in-apache-royale – Carlos Rovira Sep 10 '20 at 10:26
About beads and themes, did you check Royale documentation? https://apache.github.io/royale-docs/features-and-concepts#strands-and-beads and https://apache.github.io/royale-docs/component-sets/jewel/theme-creation#theme-basics – Carlos Rovira Sep 10 '20 at 10:30
I know is difficult since Royale is like Flex, but is not Flex ;). I think is a matter of time you get your mind around new concepts. Royale takes the best of Flex and removes the bad, also add all new things in the new modern front end development plus many other new things like strand/beads. – Carlos Rovira Sep 10 '20 at 10:32
I also recomend you to join us in our mailing list to get more support and keep up to day (https://royale.apache.org/mailing-lists/), and thanks for using SOF to fill your doubts, I'm glad of help you :) – Carlos Rovira Sep 10 '20 at 10:33
Still can't get the gap to close. Will probably abandon Jewel Forms. Yes I've been through the docs and tried to apply them. In most cases I failed. I find the docs difficult to interpret and not having complete simple examples hurts. There's a lot of snippets and very complicated examples but they don't really help. The API is OK but it doesn't tell me which beads, etc can be applied where. Not having a real-time debugger is also painful. – wrkoch Sep 10 '20 at 11:14
Hi just was preparing some code to post a new answer for you. But I want to let you know that Jewel FormItem will be refactored in the following days, since current implementation has some issues and is not as flexible as we want. – Carlos Rovira Sep 10 '20 at 11:20

score 0 · Answer 2 · answered Sep 10 '20 at 11:23

although the last response was ok. Here's code you'll need for your specific use case. You'll need to add a css rule to hide the "required" part. I did at form level, but it could be done at form item level too, but guess you want to remove in all the form:

<j:Form localId="myForm3" x="720 "y="120" height="100" width="300" 
        className="remove-required">
        <j:FormItem label="data24">
            <j:beads>
                <j:HorizontalLayout gap="0"/>
            </j:beads> 
            <j:TextInput localId="data24"/>
        </j:FormItem>
        <j:FormItem label="data25">
            <j:beads>
                <j:HorizontalLayout gap="0"/>
            </j:beads>
            <j:TextInput localId="data25"/>
        </j:FormItem>
    </j:Form>

    <fx:Style>
        .jewel.form.remove-required .jewel.label.required {
            display: none;
        }
    </fx:Style>

That did it -- Thank You!! I can see it's going to take some time to get used to the CSS. I never would have found that combination — wrkoch, Sep 11 '20 at 21:07
Glad that solve your issue. Maybe for this concrete use case just need a `HGroup` or `VGroup` with a `Label` and a control (`TextInput`). That could be enough for you since it seems you don't need really what FormItem provides. Hope the `FormItem` refactor planned will be more flexible and have this kind of things into account :) — Carlos Rovira, Sep 13 '20 at 08:05

How to control the indicator gap on an Apache Royale Jewel form?

2 Answers2