Here's the problem. I have one haml page with a list that looks like this:
It's a list with elements formed by a div (left side) and an ul of buttons (right side). Here's the summarized code:
%li.rutinas-li{style: "overflow:visible"}
%div{ style: "display: inline-block;" }
= link_to ...
...
%br
%p ...
%br
%span
= ...
.thumbs-container
=link_to ...
= icon('thumbs-up', ...)
%strong ...
.thumbs-container
=link_to ...
= icon('thumbs-down', ...)
%strong ...
.thumbs-container
=link_to ...
= icon('star', ...)
%ul.pull-right.without-bullets.no-padding
%li.inline-block= link_to ...
%li.inline-block= link_to ...
%li.inline-block= link_to ...
%li.inline-block.dropdown
%a.dropdown-toggle{"data-toggle": "dropdown", type: "button"}
= icon('share-alt', ...)
%ul.dropdown-menu{style: "min-width:0"}
%li{style: "padding: 15px"}
= link_to ...
= icon('envelope', ...}
%li{style: "padding: 15px"}
= link_to ...
= icon('twitter', ...")
%li{style: "padding: 15px;"}
= link_to ...
= icon('facebook', ...)
I need the line 1 {style: "overflow:visible"} because the last ul is a dropdown that looks like this:
And if I remove it the dropdown is cropped. However, this css property causes also that when the screen is smaller ( a mobile phone, for example), the list is displayed like this:
And I would like it like this instead:
As the overflow is permitted, the list of buttons on the right are overflowing the parent and his white separators, it is kind of ugly. But if I remove {style: "overflow:visible"} the dropdown won't be visible when I click on it