Custom GMail CSS Prevents Click

Question

I am using Stylish and the below CSS to customize the Multiple Inboxes Lab such that instead of the inboxes being in 1 vertical column, they are now in 2 columns with the first inbox taking over the top. The CSS does indeed work to give me the look I want.

However, for some reason I cannot discern, I am no longer able to click the emails within the inboxes. Thoughts as to why? Or how I can fix it?

/* example look */
| First Inbox |
| 2nd  | 3rd  |
| 4th  | 5th  |

/* each inbox */
.BltHke.nK {
  width: 49%;
  float: left;
  padding-right: 1%;
}

/* first inbox */
.nH.nn > .nH > .nH:first-child > .BltHke {
  width: 100%;
}

You may be covering up the click targets and/or Google may be doing evil things to the pages (again). Try setting those 2 selectors to `z-index: 0;` (or 1) and make sure the click targets have a higher index. ... May need a userscript for this. ... The `width: 100%;` may be the culprit. Try to think of another way to do that. — Brock Adams, Oct 08 '15 at 21:53

score 1 · Accepted Answer · answered Oct 09 '15 at 19:51

Thanks to Brock Adams' hint, I figured out that pieces of the lower (or original) inbox were covering up the multiple inbox space due to my float: left rules.

To fix it, I had to float those pieces as well with the following code.

/* fix float over multiple inbox area */
.D.E.G-atb.bP {
    float: left;
}

.ae4.UI {
    float: left;
}

Custom GMail CSS Prevents Click

1 Answers1