Longer Editing box for fields on grid

Ask the Community Get Answers
1

Hi All

Has anyone worked out how to increase the size of a text editing box when a record inline from a grid display ?

We have a few image fields that have long url text addresses and it truncates such that you have to goto the end and work back or use the right arrow one letter at a time to reach where you need to make a correction.

image
image586×492 57.1 KB

Cheers

1 Like
2

Hi Ray

I tried this on a Rich Text Field and it displays all of the URL.

Your situation might different though.

Dean

1 Like
3

Yeah these are external URL files, it may be the length is determined from the field type ?

4

Add the following to your CSS. Play with the width to suit your needs - currently 700px.

/* Widen the entire drop container */
.drop.drop-element.drop-enabled.drop-open {
    width: 700px !important;      /* or whatever width you want */
    max-width: 700px !important;
}

/* Widen the inner content */
.drop.drop-element.drop-enabled.drop-open .drop-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px;  /* optional: add padding for nice look */
}

/* Now widen the input */
#cell-editor input.input {
    width: 100% !important;
    height: 40px !important;
    font-size: 16px !important;
    padding: 8px !important;
    box-sizing: border-box;
}

Widens the box for the url … with CSS its this:

image
image802×266 17 KB

Without was:

image
image475×276 14.2 KB

1 Like
5

Cheers mate will give it a shot this evening.

:grin::+1:

6

I use this in the CSS code. It applies to all inline editing text inputs.

.kn-form-col.is-constrained:has(.kn-input-short_text) {
    max-width: 95vw;
    width: 95vw;
}

Norm

1 Like
7

Thats a handy one to have - thanks Norm

1 Like
8

Yes much more elegant than my option.

1 Like