Dropdown item onClick does not show the overlay correctly

user_10413428 0
Viewed 47

I want to add a short cut image to every dropdown item, therefore, I have written the following code:

<a class="dropdown-item" id="dropdown_new_line">
    <span style="float: left">New Line</span>
    <span style="float: right;">
        <img class="icon" 
             src="{% static "laneDetectionApp/icons/icons8-+-100.png"%}" alt="image of + key">
    </span>
</a>

This looks like the following:



And I want that it looks like the following:

So my question is, what do I have to do so that the highlight color goes over the whole element?

bootstrap-4 twitter-bootstrap html javascript
2 Answers

Test this

<a class="dropdown-item clearfix" id="dropdown_new_line">
    <span class="float-left">New Line</span>
    <span class="float-right">
        <img class="icon" 
             src="{% static "laneDetectionApp/icons/icons8-+-100.png"%}" alt="image of + key">
    </span>
</a>
user_81060450

You need to clear the floating using this class :

.clearfix{
    clear:both;
}

And adding this class over the parent element:

<a class="clearfix dropdown-item" id="dropdown_new_line">
    <span style="float: left">New Line</span>
    <span style="float: right;">
        <img class="icon" 
                src="{% static "laneDetectionApp/icons/icons8-+-100.png"%}" alt="image of + key">
    </span>
</a>
user_10163560
Related