I have a working code, which expands the buttons on a map when user hover over. My problem is when user hover over a button on the right side it moves all the other buttons as well. I am not sure what am I missing. Here you can see the issue:
https://jsfiddle.net/qjwtum3c/2/
.extendable-button-container-right {
position: absolute;
top: 20px; /* Adjust top position */
right: 20px;
z-index: 1000;
}
.extendable-button-right {
background-color: #0d6efd;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
margin-bottom: 10px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5); /* Add shadow effect */
flex-direction: row-reverse;
}
.extendable-button-right i {
color: white; /* Change icon color to white */
transition: all 0.3s ease;
}
.extendable-button-right:hover,
.extendable-button-right:focus {
background-color: #0d6efd;
}
.extendable-button-right:active {
background-color: #0daafd;
}
.hint-right {
display: none;
font-size: 14px;
color: white; /* Change hint text color to white */
margin-right: 5px;
transition: all 0.3s ease;
text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
padding-right: 5px
}
.extendable-button-right:hover .hint-right,
.extendable-button-right:focus .hint-right {
display: block;
}
.extendable-button-right:hover i,
.extendable-button-right:focus i {
transform: scale(1.2);
}
2
Answers
Since the items are on the right side, I changed the
direction
todirection:rtl
.You can make them
float: right;
and between them have adiv
withclear:both
: