Split UDinputfield in UDModal

Universal Dashboard Universal Dashboard Help
1

Hi All -

Has anyone tried to split a UDinputfields in a UDmodal?

So, I have like 22 input fields that pop-up in the UDmodal. However, instead of everything appear vertically and user has to scroll up and down - is it possible to split this input fields into 2 columns in a wider UDmodal or make input field appear max 8-9 in one column?

2

@adam -

Is this possible? Our users are complaining the UDmodal is too long, and they need to scroll. I am hoping the UDmodal can be made wider, and UDinputfield is split horizontally. I know this is possible in UDform.

3

Hi @cn9ne,

You could specify the width of the modal with the -width param. I believe it takes and Int in pixels.
As for the styling of inputs: iā€™d try with CSS to set a static width of the inputs. The browser should stack em automatically.

4

The input fields are stack vertically - with 22 input fields the user has to scroll up and down. What they requested is - to split the input fields horizontally to the side. So this looks like we divide the modal to few columns, with 8 or so input fields in each columns.

It is not really an issue, but what they want is for everything to appear on the screen instead of scrolling up and down. I am not sure if this is even possible - input fields overflow to the side instead of vertically stacked.

5

@cn9ne Iā€™m beating you with input fieldsā€¦I got something like 40+ input feilds!!! So I split these into groups of 4 using some CSSā€¦It is CSS that will fix the issue for youā€¦as I am a super-nice guy here is my theme which splits it to columns of 4 inputs per rowā€¦

New-UDTheme -Name 'Basic' -Definition @{
    'textarea.materialize-textarea' = @{
        'width' = "60vw"
    }
     '.input-field' = @{
        'width' = "25%"
    }
    '.row .col.l4' = @{
        'width' = "100%"
    }
    '.row .col.s12' = @{
        'width' = "100% !important"
    }
    '.svg-inline--fa' = @{
        'display' = 'flex'
    }
    'input[type="text"]:not(.browser-default)' = @{
        'height' = '2.5rem'
        'width' = "75%"
    }
    'main'         = @{
        'padding-left'   = '70px'
        'padding-right'  = '70px'
        'padding-top'    = '5px'
        'padding-bottom' = '5px'
    }
    'input[type="password"]:not(.browser-default)' = @{
        'height' = '2.5rem'
        'width' = "75%"
    }
    '.sidenav li > a' = @{
       'background-color' = "#2C387E"
	    'color' = "#FFFFFF"
    }
    '.container' = @{
        'color' = "#fff"
    }
    '.card .card-action a:not(.btn):not(.btn-floating):not(.btn-large):not(.btn-small):not(.btn-large)' = @{
    'color' = "#fff !important"
}
     '.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating)' = @{
	'color' = "#fff !important"
}
'.input-field > label' = @{
	'color' = "#717171"
}
'.slider'                                             = @{
    height = "50px !important"
}
'.rangeslider'                                        = @{
    background = "#fe982c !important"
}
'.rangeslider-horizontal .rangeslider__handle::after' = @{
    'content' = "none !important"
}
'label' = @{
	'font-size'= "1rem"
	'color'= "#f97807"
}
} -Parent 'Default'

This should give you rows of for using 25% of the width :crazy_face:

1 Like
6

Thanks @psDevUK.

I am using ā€˜displayā€™ = ā€˜gridā€™, so I guess it wont split like yours - it just shorten the input fields by 25%. What I am trying to achieve is split UD input fields in UDmodal to a couple of columns. The users want every input fields to be displayed on screen (UDmodal), instead of the need to scroll down.

7

So what I figured, I can split columns in UDmodal but cant split the UDinputfields itself - unless I want to create multiple UDinput. But having multiple ā€œsubmitā€ button is not good. I guess I will need to create individual UDselect & UDtextboxt with only one submit button.

It just that I hate the select wrapper / input is not at the same length / width with UDtextbox. Any idea on how to ensure it has the same width with UDtextbox input field?

image
image870Ɨ221 7.79 KB

8

@cn9ne said it to a good few people lately, but you can get rid of new udinputā€¦just nest the controls, and create your own submit buttonā€¦on the form that I got 40+ fieldsā€¦I created another NEW STYLE, input which just used my UD-RangeSlider, and my UD-Field both components that DO NOT go inside a UDInputā€¦I put the 40+ controls on the page in a 4x4 layout that I sent youā€¦then I do a lot of Get-UDElement and get the value of what has been entered into each field when they press the button, I then make it into a spreadsheet from all the results. I hope this gives you a different angle to tackle the problem.

1 Like