Formatting of Disabled Fields

Forms
#1

Good Afternoon,

We have a number of forms where depending on the status of an item we disable various fields, generally as an item progresses through a process fields a disabled to lock data down. The issue we have is that there appears to be big difference in the format of display of different types of fields which makes the form look a little messy and unprofessional, the screen shot below shows a typical example where different types of fields are displayed next to each other on an edit form...

image
image.png856×694 20.4 KB

I have had to set the CONTROL FontColor to Black as otherwise some of the text is very difficult to read as you can see below...

image
image.png846×696 20.3 KB

I know this may seem a fairly minor issue but there really does need to be some form of uniformity here as we are trying to provide the best user experience we can for our internal clients....

Thanks

#2

Hello @Tony_Duke,

I've forwarded the information to our developer team to investigate the issue.

And for now, you can change the background color of the controls with the following CSS. Please use it in the CSS editor.


.k-widget.form-control {
    background-color: #e9ecef !important;
}

span.k-widget.k-dropdown.k-header.form-control {
    background-color: #dee2e6 !important;
}
#3

White or black color font on single fields do not display properly on IPhones. They display properly on my laptop and Android Tablet but on IPhones it displays as greyish. Changing color on CSS does no good.

#4

Hello @avs270,

Could you please share the CSS that you are using to change the font to troubleshoot the issue.

Thank you!

#5

$(fd.field('anafield').$el).find('input').css('background-color','red');
$(fd.field('anafield').$el).find('input').css('color','white');

1 Like
#6

Hello @avs270,

Thank you!

This is Safari browser feature. You can use this code to change the color of the font, it also works for desktop browsers.

  $(fd.field('Title').$el).find('input').css('background-color','red');
  $(fd.field('Title').$el).find('input').css('-webkit-text-fill-color', 'white')
#7

That worked! Thank you.

1 Like
#8

How would you change the code below to get it working on a Plain Text control?

$(fd.field('Title').$el).find('input').css('background-color','red');

#9

try $(fd.control('Title').$el

#10

I tried this and it didn't work.

$(fd.control('NetworkSpecs').$el).find('input').css('background-color','red');

Any suggestions?

#11

I also tried this, thought it was working but it is not.

Any ideas?

$(fd.control('CustomSubmit').$el).css('background-color','red')

#12

I have not tried to format the text at all, I hide/show it based on a condition, and this is what works for me:

$(fd.control('NetworkSpecs').$el).hide();

Also, when doing css, on your example try:

$(fd.control('CustomSubmit').$el).css('background-color','red !important')

1 Like
#13

Yes, this works!

$(fd.control('fieldname').$el).css('background-color','green');

2 Likes
#14

How do I modify this, so that the CSS applies to the Cell Properties of the field?

I'm using the code below, but it does not apply to the Cell properties of the field.

$(fd.field('DateTime1').$el).find('input').css('background-color','green');

image

#15

Dear @adasilva,
What exactly are you trying to do with CSS? Set input's background color or set cell's background?

In either case, what you have is not CSS, but JavaScript. To modify it to CSS, use:

background-color:green;

#16

Hi Nikita,

I need to use JavaScript to set the background color of a Cell for a particular field.

Thanks

#17

Hello @adasilva,

You need to give a CSS class to the cell, e.g. 'red-cell'
image
And you can use this code to change its color dynamically:

$('.red-cell').css('background-color','red');
1 Like