You are viewing limited content. For full access, please sign in.

Question

Question

Change Color of field background in repository

Forms Version 10
Updated November 13, 2018
asked on October 14, 2016

 

 

Any suggestions on how I can get my form to look like the below?  I need the fields to save to the repository with a background color.  I've attempted to use both of the below in my CSS.  I can get the Field to change in the pre submittal form, but not in the tiff which is saved in the repo.

.ro input[readonly] {background-color: purple !important;}

input[type="text"], textarea {background-color : #d1d1d1;}

 

 

0 0

Answer

SELECTED ANSWER
replied on October 14, 2016

Hi Andres,

The reason for this is because your CSS rules operate on input and textarea elements; however, when a form is stored to the repository, these are converted to div elements, so these rules no longer apply. You can use the following CSS and it should work:

.ro input[readonly], .ro div[type="text"] {background-color: purple !important;}

input[type="text"], textarea,
div[type="text"], div[type="textarea"] {background-color : #d1d1d1;}

Just out of curiosity, what is the use case for setting a field background to html purple? It seems rather dark. Or is this just a sampling of a fuller style with other rules excluded?

Hope this helps!

 

0 0
View 8 previous replies
replied on October 14, 2016

Thank you so much for the answer.  This actually solves a couple other issues I've been having.  The actual color is meant to be a slight gray.  I was using the purple for testing as it is a bit more obvious at a quick glance.  Funny, that would probably make for a pretty stark form.  Thanks again for the quick response.

 

Andres    

0 0
replied on April 19, 2017

Hi James,

 

I used something similar to your answer and it worked for text and textarea boxes. However, it didn't work for date boxes.

 

I used a CSS line that gave all text input boxes a black border and a blue background color when saved to repository. In the next line, I took the exact same code and just replaced "text" with "date" and when saved to repository none of the changes are there for date fields. Do you know what I'm doing wrong?

0 0
replied on April 19, 2017

Hi Brian, there is no type="date" for input elements, the date fields are also text-type inputs from an HTML standpoint. What selectors are you using, exactly? I have no issues using the following to account for both single-line and date fields:

input[type="text"], div[type="text"] { background-color: red; }

 

0 0
replied on April 19, 2017

I'm using

.form-q input

.form-q div[type="text"]

0 0
replied on April 19, 2017

That set of selectors works for me as well.

You can simulate the HTML which is calculated for the Save to Repository task by previewing the form in the Thank-you page of a submission. If you do that, check whether the CSS is also preserved there. If not, use the DOM Explorer in developer tools pane (F12) to inspect the element and see if there are other CSS rules which are conflicting with it.

0 0
replied on April 19, 2017

I tried using nothing in place of .form-q and then tried using .ro instead.

From using Inspect I don't see anything that jumps out.


<li attr="Date_Request_Generated_" attrtype="date" [...] class="form-q label-left">
[...]
   <div class="cf-field" style="word-wrap: break-word;"> == $0

etc.

I could try specifically using .cf-field, but some of the other fields that aren't dates have that class and they work fine.

0 0
replied on April 19, 2017

Is this something I should open a support case over? I spent a lot of time learning how to change the CSS for this form and it would be a shame if everything is styled except for the dates.

0 0
replied on October 17, 2018

Hi james, 
 

i am changing the input background color dynamically using javascript

/**************CHART CSS*********************************/
.rouge input[readonly] {background-color:#ff4d4d !important; transition: 0.4s linear;}
.orange input[readonly] {background-color:#FF851B !important;transition: 0.4s linear;}
.jaune input[readonly] {background-color:#FFDC00 !important; transition: 0.4s linear;}
.vert input[readonly] {background-color:#2ECC40 !important; transition: 0.4s linear;}
/********************************************************/
function colorer(field,valeur)
{
  var a=parseFloat(valeur);
  if(a<0.25)
  {$(field).addClass('rouge'); $(field).removeClass('vert'); $(field).removeClass('jaune');$(field).removeClass('orange');}
  else{
  if(a>=0.25 && a<0.5)
  {$(field).addClass('orange'); $(field).removeClass('vert'); $(field).removeClass('jaune');$(field).removeClass('rouge');}
  else{
  if(a>=0.5 && a<0.75)
  {$(field).addClass('jaune');  $(field).removeClass('vert'); $(field).removeClass('rouge');$(field).removeClass('orange');}
  else{
  if(a>=0.75)
  {$(field).addClass('vert'); $(field).removeClass('rouge'); $(field).removeClass('jaune');$(field).removeClass('orange');}
  }
 }
}

this working perfectly in my form but when i store the form to repository its saving without any background color just the default transparent, 

i'd appreciate any hint or help from your part

thank you. 

0 0
replied on October 17, 2018 • Show version history

Hi,
i just managed to make it work so all i did is create another css class for div type

/**************CHART CSS*********************************/
.rougeDiv div[type="text"] {background-color:#ff4d4d !important; transition: 0.4s linear;}
.orangeDiv div[type="text"] {background-color:#FF851B !important;transition: 0.4s linear;}
.jauneDiv div[type="text"] {background-color:#FFDC00 !important; transition: 0.4s linear;}
.vertDiv div[type="text"] {background-color:#2ECC40 !important; transition: 0.4s linear;}
/********************************************************/

cheers !

0 0
replied on November 13, 2018 • Show version history

What version of Forms does this work in? I have been trying to figure out how to add color to a form for awhile now and stumbled on this post. I tried this in Forms 10.3.1 and still get no color.

CSS

.colorGreen {
    background-color: #3DDD8D;
    color: white;
}

.colorGreenDiv div[type="text"] {
      background-color: #3DDD8D;
    color: white;
  !important;
}

Javascript

  $('.color input').on('change', function() {
    
    if($(this).val() == 'green'){
      $('.color').addClass('colorGreen');
    $('.color').addClass('colorGreenDiv');
      }
  });

I type "green" into the field and click submit, no green on the document.

0 0
replied on November 13, 2018

Just found a method to get it working. This is a combination of many posts across answers on the subject, and really without understand what in the world is actually going on.

 

$(document).on('ready', function() {
  
//If this is true, this code will be executed in the gap between submission and the document being created
//All the fields will be different types, the values of the fields will change, you will have no access to the console or development tools
//To get any idea of what is going on you must instantiate a div and append it to the form, then write log info to that div
//Welcome to the twilight zone
  if ($('[name=IsLocked]').val() == 'True'){ 
    if($('.color div').text() == "greengreen") //You must double all values you are expecting in conditions now
    $('.color').addClass('colorGreenDiv');
   
    Log($('.color div').text());
    
    return;
  }
 
  //Start Normal Code Execution Here
  $('.color input').on('change', function() {
    
    if($(this).val() == 'green'){
      $('.color').addClass('colorGreen');
    
  }
      
  });

  
});

function Log(string){
  
  var customLog = document.createElement("div");
 
 customLog.innerHTML = string;
  
    var x = document.getElementsByClassName("cf-formwrap");

    x[0].appendChild(customLog);

}

 

0 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...