I have a table that I'm using @Web Queries in CSS to reformat so that they look better on mobile. I want to hide the text for a particular table column heading when it's displayed in mobile, however OS seems to be adding the value I want to hide in a html data-header value of the <td>.
In this case I want to hide the text that says "Your Average Score".
This is the HTML I see when inspecting in Chrome (see the data-header value):
How can I get it to not add that to the HTML?
I've also tried using an IF statement with the IsMobile() function to not have the text when it detects mobile, but that didn't work.
Hello
This is a table structure :
<table>
<thead>
<tr class="table-row">
<td class="table-row-subheader-background table-row-subheader-left" data-header="Your Average Score">Your Average Score</td>
<td class="table-row-subheader-background">Business Processes ID</td> </tr>
</thead> <tbody>
<tr>
<td data-header="Your Average Score">4</td>
<td data-header="Business Processes ID">4</td> </tr>
</tbody> </table> [Your Average Score hide the text]
css:.table-row-subheader-background.table-row-subheader-left {
display: table-cell;
}
@media (max-width: 768px) {
.table-row-subheader-background.table-row-subheader-left[data-header="Your Average Score"]
{
display: none;
} }
i hope it's helps!
Hello @Jack Thesing
I understand what you want in your application so you have to go to Outsystems Responsive UI and check how to use .phone class for better results,
You have to use this also, but this one only works on the particular device, and if you have to use the OutSystems class that is already built-in, then you have to use it !important that it be overwritten by your code
display: none !important ;
It will help you, thanks
Hi @Anushka singh and @Vaishali Bhatt,
Thank you both for your responses. They are helpful. It got me closer, but the whole header disappears now.
I still need the blue heading and the different categories (in white text, e.g. BUSINESS PROCESSES), but just hide the text "Your Average Score".
I've added some additional screenshots that show more of the grid, and the corresponding HTML.
Note: I think the challenge I'm running up against that you can see in the HTML below, is that the HTML table structure written by the platform, does not have the values in two separate <td>.
It's built using the Table Widget: