Issues with object alignment in material theme

[DSpeichert]

1. Icon and text are too close
2. Icon and text are almost overlapping
3. This text is wrapping around for no reason and has large font (isn't it too large?)
4. The buttons have top/bottom margins while the text on the left is aligned to the top of the row, which makes them unaligned together

[abhishekvalanju]

[abhishekvalanju]

Fixed all issues except 4. Having problems with the table vertical alignment

[mitchfeldman]

Yeah I'm having difficulty with #4 as well

[mitchfeldman]

@abhishekvalanju

I was able to get the course name and buttons to line up (Fig 1) by removing the div that contained the buttons (Fig 2) but now we need to figure out how to get the buttons to line up on the far side with CSS.

Fig 1.

Fig 2.

[DSpeichert]

1 & 2 do not seem to be an issue anymore, magically solved itself. To fix number 4 I suggest changing the strategy. Instead of changing the amount of space that buttons take, let's try to vertically center-align the text in all table cells so they match buttons. @abhishekvalanju @mitchfeldman

[mitchfeldman]

Yeah I tried that and basically everything I saw online. Getting one button over and lined up is easy but as soon as the other one gets there shit goes awry..

[mitchfeldman]

http://stackoverflow.com/questions/43857790/bootstrap-material-design-table-alignment-issues

^ created a post for number 4

[abhishekvalanju]

@mitchfeldman, have you tried the solution that is suggested in the stackoverflow above?

[mitchfeldman]

Yeah, didn't work. Not sure why he suggested centering it cause we want vertical alignment.. but trying vertical alignment moves it down like 5px. I think something is wrong with the HTML structure of the tables rather than CSS.