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

Question

Question

CSS for displaying help text in a table to the right of the cell

Forms
Updated April 7, 2021
asked on March 26, 2021

I know how to do this for other fields, but the same CSS does not appear to work when the field I am targeting is part of a table.  I'm sure there is a different way to target it, but I have no idea how.  If someone else knows how to target this, I would greatly appreciate it!  Here is the CSS I use to target a non-table field:

#q48 .cf-helptext {display: inline;}

 

0 0

Answer

SELECTED ANSWER
replied on March 29, 2021

Oh!  You're just trying to add a percent symbol?

I've done that before with Javascript.

Give this a try - assumes you table has a Class Name of myTable and the field(s) in the table that need the percent symbol have Class Name of myPercentField.

$(document).ready(function() {
  
  //Run the function to add the percent symbol to the table fields, when the form loads.
  addPercentToTableFields();
  
  //Run the function to add the percent symbol to the table fields, when the table changes or rows are added.
  $('.myTable').change(addPercentToTableFields);
  $('.cf-table-add-row').click(addPercentToTableFields);
  
  //When called, this function adds % symbols after all fields with the myPercentField class.
  //Initially the symbols are cleared, so that they can easily be added without duplicates.
  function addPercentToTableFields()
  {
    $('.myPercentSymbols').each(function() {
      $(this).remove();
    });
    $('.myPercentField input').each(function() {
      $(this).css('width', '75%');
      $(this).after('<span class="myPercentSymbols"> %</span>');
    });
  }
  
});

 

0 0

Replies

replied on March 26, 2021

I recommend using a class name instead of q identifiers - if you give your field a class name like myHelpText, you should be able to do CSS like this: 

.myHelpText .cf-helptext {display: inline;}

 

Note that I wasn't specifically able to test this, but I've done other forms with stuff in tables a lot like this without issue.

0 0
View 2 previous replies
replied on March 26, 2021

This makes sense, but does not appear to work for fields inside a table in Forms.  Thanks for trying!

0 0
replied on March 26, 2021

This worked for me inside and outside of a table: 

.yellowBackground input {background-color: yellow;}

 

I wasn't able to specifically test with the cf-helptext class because I couldn't find that.  I wonder if it is something that was added after version 10.2 (which I'm still on).

replied on March 26, 2021

Oh yeah.  Of course.  Didn't think that through.  Tables completely re-do a lot of the formatting around fields.  I just tried to do some testing to get it to work without much success (only spent 15 minutes, but still...)  To get it to work, you're going to have to determine what formatting the table is doing that is overriding your desired formatting and/or is different than how the fields are structured outside of the table, so that you can remove that or override it.

However, there is an alternative that may work for you.
Collections are similar to tables, but the fields within them operate the same way as fields by themselves - as far as structure and appearance of the individual fields is concerned.  Using CSS you can get the fields in a table to look almost the same way that a table would look, but then other formatting changes that may not work in a table, should work.

1 0
replied on March 29, 2021

Because of the detailed calculations and filling with lookup rules that apply to this particular table, I don't think a collection will work in this case.  I am going to try to incorporate the % symbol (my helptext) in the SQL table field I am pulling from so that it appears inside the table field instead of just being a number by itself and needing the % sign out to the side for clarity and readability.  Thanks for trying!

0 0
SELECTED ANSWER
replied on March 29, 2021

Oh!  You're just trying to add a percent symbol?

I've done that before with Javascript.

Give this a try - assumes you table has a Class Name of myTable and the field(s) in the table that need the percent symbol have Class Name of myPercentField.

$(document).ready(function() {
  
  //Run the function to add the percent symbol to the table fields, when the form loads.
  addPercentToTableFields();
  
  //Run the function to add the percent symbol to the table fields, when the table changes or rows are added.
  $('.myTable').change(addPercentToTableFields);
  $('.cf-table-add-row').click(addPercentToTableFields);
  
  //When called, this function adds % symbols after all fields with the myPercentField class.
  //Initially the symbols are cleared, so that they can easily be added without duplicates.
  function addPercentToTableFields()
  {
    $('.myPercentSymbols').each(function() {
      $(this).remove();
    });
    $('.myPercentField input').each(function() {
      $(this).css('width', '75%');
      $(this).after('<span class="myPercentSymbols"> %</span>');
    });
  }
  
});

 

0 0
replied on April 7, 2021

Thank you so much!  This worked perfectly.

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

Sign in to reply to this post.

Details
Related Posts
Loading ...