Hi, I am trying to create custom form input (with a button which navigate somewhere - like in the pi...

# kvision

[Tomas Kormanak]

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?

[Robert Jaros]

Do you need a form component compatible with FormPanel container?

[Robert Jaros]

Or just a simple input component?

[Tomas Kormanak]

Yes, it's a part of form.

[Tomas Kormanak]

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

[Robert Jaros]

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}")
    }
}

[Robert Jaros]

Should work with both standard and horizontal FormPanel layout.

[Robert Jaros]

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

[Tomas Kormanak]

Thank you, it works