Question

Change dropdown text color in Modern Designer

Laserfiche Forms Layout Designer Classic Form Designer Version 11 Forms

Updated February 23, 2024

asked on February 22, 2024

I have a dropdown menu that I am populating with a lookup rule. Is possible to change the color of the text in the dropdown depending on a certain string within the value? If not, I can create it in Classic Designer and use javascript, but I am having issues getting the looping to work. This is what I have so far.

Thank You,

$(document).ready(function() {
var select = $('#q1')[0];
for (var i = 0; i < select.length; i++){
var stringVL = $("option").text();
var stringFind = stringVL.search( 'Half Year' )
if (stringFind > 0) {
$("option").css("color","red");
}

}

});

0 0

Answer

SELECTED ANSWER

replied on February 23, 2024

FYI - this is possible using CSS as well, in the Classic Designer.

You can do a wildcard match on the title attribute like this: [title*="Half"], therefore you can do CSS like this:

/*To color every drop-down on the form when it contains the word Half*/
option[title*="Half"] { color:red; }

/*To color only the drop-downs on the form that have the myClass class assigned to them - when it contains the word Half*/
.myClass option[title*="Half"] { color:red; }

Here's an example of it working (this is looking for the keyword "Second"):

Note - that both the Javascript solution provided by @████████ and this CSS solution, are just for the Classic designer. Unfortunately, I don't think you're going to be able to make this work in the new designer.

In the case of a Javascript solution, the Javascript in the New Designer runs in a sandboxed iFrame and only has access to components of the form and fields via the LFForm interface - anything that hasn't been set-up through that interface isn't possible to be accessed via Javascript. There is no way to modify the structure of form elements directly like that.
In the case of a CSS solution, the problem is that custom CSS added in the new designer, doesn't apply to the entire structure of the form, but rather applies specifically to a div element several layers deep in the page, and any children of that. Most of the form lives within that div, so it's accessible within the CSS, and not a concern. But the pop-up that displays when expanding a drop-down and listing its options exists in an entirely different part of the structure, so the CSS cannot be applied to that part of the page.

2 0

Replies

replied on February 22, 2024

Hi Kevin,

You can use some jQuery functions to realize this with Classic designer, I managed to do like this.

below is the code

var select =  $('#q1')[0]; 
  $(select).find('option').each(function(i, el){
    var ele = $(el);
    if(ele.val().indexOf('form') > -1){
      ele.css("color","red");
    }
  })

1 0

View 1 previous reply

replied on February 23, 2024 • Show version history

With the Classic designer, you need to let it know when to actually run that code. Most code examples here on LFAnswers do that via the document ready function, which runs when the form is loaded on screen. Like this:

$(document).ready(function() {
  var select =  $('#q1')[0]; 
  $(select).find('option').each(function(i, el){
    var ele = $(el);
    if(ele.val().indexOf('Half') > -1){
      ele.css("color","red");
    }
  });
});

Note that I didn’t test this myself, just doing a quick reply based on your screenshot.

1 0

SELECTED ANSWER

replied on February 23, 2024

FYI - this is possible using CSS as well, in the Classic Designer.

You can do a wildcard match on the title attribute like this: [title*="Half"], therefore you can do CSS like this:

/*To color every drop-down on the form when it contains the word Half*/
option[title*="Half"] { color:red; }

/*To color only the drop-downs on the form that have the myClass class assigned to them - when it contains the word Half*/
.myClass option[title*="Half"] { color:red; }

Here's an example of it working (this is looking for the keyword "Second"):

In the case of a Javascript solution, the Javascript in the New Designer runs in a sandboxed iFrame and only has access to components of the form and fields via the LFForm interface - anything that hasn't been set-up through that interface isn't possible to be accessed via Javascript. There is no way to modify the structure of form elements directly like that.
In the case of a CSS solution, the problem is that custom CSS added in the new designer, doesn't apply to the entire structure of the form, but rather applies specifically to a div element several layers deep in the page, and any children of that. Most of the form lives within that div, so it's accessible within the CSS, and not a concern. But the pop-up that displays when expanding a drop-down and listing its options exists in an entirely different part of the structure, so the CSS cannot be applied to that part of the page.

2 0

replied on February 23, 2024

The CSS worked perfectly! Thanks @████████

1 0

You are not allowed to follow up in this post.

Question

Question

Change dropdown text color in Modern Designer

Answer

Replies

Sign in to reply to this post.