Unlike outlook desktop app which uses MS Word as its renderring engine, outlook web using webkit supports CSS to great extent. Below is HTML CSS email template for outlook web (Not the outlook desktop App),
I am using the CSS only "checkbox" hack, where clicking on a checkbox will hide and show data. Something like this, https://jsfiddle.net/a4qn2tuc/. Code of this fiddle works fine in outlook web app.
Using the checkbox hack, I am trying to show and hide data of a table row. Clciking on "click Me" shows the hidden row, here is the fiddle, https://jsfiddle.net/L5th9vdb/
The problem is that in outlook web, I am able to click on "checkbox" to show and hide data, but I am not able to click on "Click Me" button of the row to show and hide data. "Click Me" text is the label field, below is the snippet from the fiddle. Wrapping the checkbox within label tag isnt possible for my table design. Any idea on where I am making the mistake to make the label clickable? Wrapping the checkbox within label tag isnt possible for my table design.
Please note that the label "click Me" is clcikable for iOS, android, mac OS - the problem is only in outlook web.
Thanks for all the help.
Code :
<td style="padding: 6px;border: 1px solid #ccc;text-align:center;">
<label class="tab-label" for="row2">Click Me</label>
</td>