Jump to content

Is there a way to format a class element that also adds text?

Recommended Posts

Hi All

I have a page that is really slow and one of the issues is the sheer number of times a very straight forward look up table is used to convert my 10-point scale into the text description.

In SAS programming I'd use a proc format statement at the start of my program and apply to all the variables when I set the dataset. I've created a class statement (with the world's ugliest color scheme ) that creates the bar charts, and at the moment a div runs a lookup to put the text. But I was wondering if there was a way to add the text in the html class so my div only calls the value from the table once and is formatted and labelled. Hopefully I'm making some sense. I've attached an image of the bars this creates


This is my class statement in header

.html1 {width: 10%; height: 18px; background-color: #feece2;}
.html2 {width: 20%; height: 18px; background-color: #f37134;}
.html3 {width: 30%; height: 18px; background-color: #ec561a;}
.html4 {width: 40%; height: 18px; background-color: #fcb38a;}
.html5 {width: 50%; height: 18px; background-color: #64a7e6;}
.html6 {width: 60%; height: 18px; background-color: #1d63c4;}
.html7 {width: 70%; height: 18px; background-color: #f9844f;}
.html8 {width: 80%; height: 18px; background-color: #92ca1d;}
.html9 {width: 90%; height: 18px; background-color: #5eae0e;}
.html10 {width: 100%; height: 18px; background-color: #f96814;}


And this is a sample of one of the divs calling for the bar

      <div class="skill html[@field:PW_tbl_profiles_tech6]">[@lookupfield:PW_tbl_profiles_tech6]</div>




Link to comment
Share on other sites

I worked this out - so now I no longer need to look up for every item, I can now use the CSS content - and the label is going exactly where I need! (Obviously I now need to code the label!)

.html1::after { 
  content: "This is 1";
.html2::after { 
  content: "This is 2";
.html3::after { 
  content: "This is 3";
.html4::after { 
  content: "This is 4";
.html5::after { 
  content: "This is 5";
.html6::after { 
  content: "This is 6";
.html7::after { 
  content: "This is 7";
.html8::after { 
  content: "This is 8";
.html9::after { 
  content: "This is 9";
.html10::after { 
  content: "This is 10";


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...