Use CSS to change the style of each row depending on the content in it

Updated September 25, 2018 21:54

Templates are helpful in displaying your data. But if your template requires rules to be applied to specific CSS selectors, using Conditional Display is the best approach for this.

There are many applications for this method. To maintain brevity & simplicity, we will only cover three useful examples.

1 - Display element B if element A is empty

In this example, we have a table view displaying student information. Some have grades, and some don't. We would like to display "No grades yet" when necessary.

HTML template:

<h2>{{Name}}</h2> 
<p> {{Job}}</p> 
<div class="grades_container"> 
   <p>Grades : </p> 
   <p class="grades">{{Grades}}</p> 
   <p class="no_grades">No grades yet</p> 
</div>

CSS Style:

.grades_container{ 
background:lightgrey 
} 
.no_grades{
display:none 
} 
.grades:empty + .no_grades{ 
display:block 
}

Copy this template

2 - Display element B if element A's attribute is empty

In this example, we have a table view of team members. Some of them have profile photos while some don't. We need to customize the template so that it won't display a broken image when someone's {{photo}} column is empty - and instead display a generic avatar.

HTML template:

<img class="profilePicture" src='{{Picture}}'> 
<img class="noProfilePicture" src="yourDefaultLinkPicture"> 
<p>{{Name}} - {{Job}}</p>

CSS Style:

.noProfilePicture{ 
display:none 
} 
.profilePicture[src=""] { 
display: none; 
} 
.profilePicture[src=""]:empty + .noProfilePicture{ 
display: block; 
}

Copy this template

With this code, we keep a default image hidden with display:none; and we hide this image and display the default one if the src of profilePicture is empty.

3 - Display and style elements depending on their value

In this example, we will create a conditional template that will display a different content depending on the referenced-value of a {{marker}}. We are going to create a simple to do list: the task can either have 'done', 'postponed' or 'to do' as its status. Tasks that are done will also display a completion date.

HTML template:

<div class="taskContainer">
  <strong>{{Task}}</strong>
  <p data-status="{{Status}}" class="status"></p>
  <p class="date">Done the : {{Done the}}</p>
</div>

CSS Style:

.status[data-status="postponed"]:after {
 content : "This task was postponed.";
 color : orange
}

.status[data-status="to do"]:after {
 content : "This task still has to be done.";
 color : blue
}

.status[data-status="done"]:after {
 content : "This task is done ! ";
 color : green
}

.date { 
 display : none 
}

.status[data-status="done"] + .date {
 display : block
}

Copy this template

Comments

17 comments

Michael Pietschmann December 20, 2017 15:10

I have setup "3 - Display and style elements depending on their value" for a table, and it works great to style whether a value is "Satisfactory" (green) or not (red), but when the user exports the to CSV, this column is blank, anyway to fix this?

1

Permalink
Awesome Table December 21, 2017 09:31

Hi Michael Pietschmann,

Would it be possible for you to share your Awesome Table view and your spreadsheet at

"support@awesome-table.com"? Make sure you give us access to your spreadsheet. If you have sensitive data, you can make a copy with similar data.

Thank you.

Thomas

0

Permalink
Ryan Harwood February 09, 2018 08:21

Can this be used in a table format as well? I'm using this sheet and only want information for each row in the "Link" column to display if there is an actual link in the Tweet. I'd like the cell to be blank or contain "N/A" when the message "http://ifttt.com/missing_link?1518163033" is displayed due to the tweet not containing an external link.

Thanks

Ryan

0

Permalink
Awesome Table February 16, 2018 16:32

Hi Ryan Harwood,

Indeed, it is definitively possible to do that with conditional display in Awesome Table. You can use conditional display with any type of view.

Kind regards,
Thomas

0

Permalink
Charlie Debley February 22, 2018 11:05

Hi Awesome Table.

I am pretty new at this so far but I am learning as I go on. I have a Google Form which has questions dependant on previous answers which means that depending on the answer there can be non relevant fields depending on the category selected. So I would like certain columns to be hidden depending on the category selected on a certain column. is this at all possible?

Thanks

Charlie

0

Permalink
Awesome Table February 23, 2018 10:01

Hi Charlie Debley,

It would be great if you could share your Awesome Table view and your spreadsheet at "support@awesome-table.com". Make sure you give us access to your data.
If you have sensitive data, you can make a copy with similar data. In this way, I will be able to know if your request is possible.

Thanks in advance.

Thomas

0

Permalink
Raffaele Paparella April 01, 2018 10:30

Hi Ryan Harwood,

how did you do? I can not do it.

I have also seen the example on the documentation but it does not work well.

tk

0

Permalink
Awesome Table April 03, 2018 09:55

Hi Raffaele Paparella,

What you can do is share your spreadsheet and your Awesome Table view at "support@awesome-table.com" and explain in details what you want to achieve.
If you have sensitive data, you can make a copy with similar data. Just make sure to give us access to your data.

Thanks in advance.

Thomas

0

Permalink
Raffaele Paparella April 03, 2018 11:27 (Edited April 03, 2018 15:31)

Thank you Thomas for answering me.
This is my problem.
I would like "Display element B if element A is not empty!
In the example: if "Document ID" is present (Col. S), display "Document Link" (Col. R).
Link sheet: https://docs.google.com/spreadsheets/d/1VpSih2NQcVVfFWCYoga9ZgIOA4Cj9K0kS_6g6fS0_Wo/edit#gid=0

Thank you very much for your help

0

Permalink
Awesome Table April 04, 2018 08:54

Hi Raffaele Paparella,

Could you also share your Awesome Table view? But please share them with us at "support@awesome-table.com". It's easier to communicate with the email support.

Thanks in advance.

Thomas

0

Permalink
Raffaele Paparella April 04, 2018 09:20

Done. Thanks, Thomas

0

Permalink
Raffaele Paparella April 04, 2018 12:56

Hi Thomas,

I want to clarify that what I do has no commercial purposes but only social, culturale (NO PROFIT).

Thank You

0

Permalink
Awesome Table April 04, 2018 14:19 (Edited April 04, 2018 14:21)

Hi Raffaele Paparella,

No problem!The email support is for everyone.
It doesn't matter if you have a paid use or not.

Kind regards,
Thomas

1

Permalink
Raffaele Paparella April 06, 2018 12:53

Great Thomas,

I would like to publicly thank Thomas for his professionalism and willingness to solve my problem.

I could not find the solution.

The solution is clean and works as I wanted.

Thank you for all the time you have dedicated to me.

I learned something new

raffaele

0

Permalink
Awesome Table April 09, 2018 09:15 (Edited April 09, 2018 09:16)

Hi Raffaele Paparella,

Thank you for your kind message!

I'm glad you resolved your issue and you like our product. It's a satisfaction for us!
And we are also very happy that you are satisfied with Awesome Table support.

Kind regards,
Thomas

1

Permalink
Germán Bobadilla April 18, 2018 18:21

Can I display information if the user enters an exact ID (number)? I'm asking this because every time my students type their ID, when they are typing the fourth number, if it matches the same as another student, it shows that student's grade, until he/she continues to the fifth number.

I'm looking for a a way in which just after they have typed (7 digits) can only the results be displayed.
https://sites.google.com/view/germanbobadilla/advanced-1/sha-101-01

0

Permalink
Awesome Table April 23, 2018 10:50

Hi Germán Bobadilla,

Unfortunately, it is not possible yet to display the results only if you are typing 7 numbers in the filter. It's the default behavior of the StringFilter.

Kind regards,
Thomas

0

Permalink

Please sign in to leave a comment.

1 - Display element B if element A is empty

2 - Display element B if element A's attribute is empty

3 - Display and style elements depending on their value

Articles in this section