am trying to make evenly spread three input text w...

# kmdc

[Rohan Maity]

am trying to make evenly spread three input text with MDCTextField
But is not getting evenly spread
But with core TextInput  got evenly spread

Div(
            attrs = {
                style {
                    display(DisplayStyle.Flex)
                    width(100.percent)
                    justifyContent(JustifyContent.SpaceBetween)
                    flexFlow(FlexDirection.Row, FlexWrap.Nowrap)
                }
            }
        ) {

            val annualCtcState = remember { mutableStateOf("") }
            MDCTextField(
                annualCtcState.value,
                {
                    type = MDCTextFieldCommonOpts.Type.Outlined
                    label = "Annual CTC"
                },
                {
                    style {
                        margin(8.px)
                        width(33.percent)
                        title("Annual CTC")

                    }
                    onInput {
                        annualCtcState.value = it.value
                    }
                }
            )

😕

[Big Chungus]

Could you paste a snippet that did not work for you as well?

[Rohan Maity]

this is the snippet

Div(
            attrs = {
                style {
                    display(DisplayStyle.Flex)
                    width(100.percent)
                    justifyContent(JustifyContent.SpaceBetween)
                    flexFlow(FlexDirection.Row, FlexWrap.Nowrap)
                }
            }
        ) {

            val annualCtcState = remember { mutableStateOf("") }
            MDCTextField(
                annualCtcState.value,
                {
                    type = MDCTextFieldCommonOpts.Type.Outlined
                    label = "Annual CTC"

                },
                {
                    style {
                        margin(8.px)
                        width(33.percent)
                        title("Annual CTC")

                    }
                    onInput {
                        annualCtcState.value = it.value
                    }
                }
            )

            val inHandPerMonthState = remember { mutableStateOf("") }
            MDCTextField(
                inHandPerMonthState.value,
                {
                    type = MDCTextFieldCommonOpts.Type.Outlined
                    label = "In Hand Per Month"
                },
                {
                    style {
                        margin(8.px)
                        width(33.percent)
                        title("In Hand per month")

                    }
                    onInput {
                        inHandPerMonthState.value = it.value
                    }
                }
            )

            val bonusState = remember { mutableStateOf("") }
            MDCTextField(
                bonusState.value,
                {
                    type = MDCTextFieldCommonOpts.Type.Outlined
                    label = "Bonus"
                },
                {
                    style {
                        margin(8.px)
                        width(33.percent)
                        title("Bonus")

                    }
                    onInput {
                        bonusState.value = it.value
                    }
                }
            )
        }

[Rohan Maity]

main issue is width is not working as it was in core TextInput

[Big Chungus]

🤦 my bad, missed the MDCTextField invocation in your initial snippet... Browsing code on mobile is hard 😅

[Rohan Maity]

yeah it is really 😅

[Big Chungus]

Have a look at the generated html. If I remember correctly, mdc textfield component is wrapped in a div, so your stiles are not applied on the textfield element. You can apply your styling to children elements via css class selectors.

[Big Chungus]

https://github.com/jetbrains/compose-jb/blob/master/tutorials/Web/Style_Dsl/README.md

[Rohan Maity]

I added the width style in child elements only

[Big Chungus]

Although it looks like a bug in mdc as width on parent should be respected by the children.

[Rohan Maity]

Plus its able to pickup the Div which I wrapped it in'

[Big Chungus]

You did not.

[Big Chungus]

I meant MDCTextField children that are rendered on the dom (not visible from kotlin dsl)

[Big Chungus]

Just check out what's actually rendered on the dom and you'll understand.

[Rohan Maity]

It is showing 33 percent width

[Big Chungus]

Hah, so it does. Then the problem is the exact opposite. Apply styling on mdc component root element via your wrapper div and css class selectors

[Rohan Maity]

did not get you 😐

[Big Chungus]

Width should be applied on the label

[Big Chungus]

I.e. parent of input element

[Rohan Maity]

Here parent, wrapping Div would not that apply with to parent only

[Big Chungus]

Yes, that's why you also need to make use of css selectors to apply styling to children via parent

[Big Chungus]

.mdc-textfield > {
  width: 30%
}

[Big Chungus]

Or something like that. Check compose web styling docs I've linked above on how to do it properly

[Rohan Maity]

I tried to add flexGrow for my purpose
but it did not add flexGrow in the final html

[corneil]

style { display(DisplayStyle.Flex)
flexDirection(FlexDirection.Row)
alignContent(AlignContent.SpaceEvenly)
}