A modern programming language that makes developers happier.

kotlinlang

image.png

Hi, I am trying to create custom form input (with a button which navigate somewhere - like in the picture). Any recommendation how to do it?

Do you need a form component compatible with `FormPanel` container?

I came up withi this::
```open class TextWithButton(value: String? = null, name: String? = null, label: String? = null) :
    Text(value = value, name = name, label = label) {
    
    private val linkButton = Button("", icon = "fas fa-external-link-alt", className = "col-sm-1")

    init {
        add(linkButton)
    }
}```
but the problem is how to manipulate label and input element to make them smaller to fit the button in the row

Check this out:
```open class TextWithButton(value: String? = null, name: String? = null, label: String? = null) :
    Text(value = value, name = name, label = label) {

    private val linkButton = Button("", icon = "fas fa-external-link-alt", className = "col-sm-1")
    private val groupContainer = SimplePanel("input-group") {
        add(input)
        add(linkButton)
    }

    init {
        privateChildren?.remove(input)
        privateChildren?.remove(invalidFeedback)
        addPrivate(groupContainer)
        addPrivate(invalidFeedback)
    }

    override fun styleForHorizontalFormPanel(horizontalRatio: FormHorizontalRatio) {
        addCssClass("row")
        addCssClass("kv-control-horiz")
        flabel.addCssClass("col-sm-${horizontalRatio.labels}")
        flabel.addCssClass("col-form-label")
        groupContainer.addSurroundingCssClass("col-sm-${horizontalRatio.fields}")
        invalidFeedback.addCssClass("offset-sm-${horizontalRatio.labels}")
        invalidFeedback.addCssClass("col-sm-${horizontalRatio.fields}")
    }
}```


Should work with both standard and horizontal `FormPanel` layout.

Using `input-group` you have no trouble with vertical alignment.