I successfully applied rounded corners to the first and last elements of a styled button using CSS.
Here is how it looks:
The issue arises when I dynamically insert new buttons using Angular's ng-if. The new buttons disrupt the rounded corners of the first and last child elements. For example, here is the same image with additional buttons added under specific conditions:
As shown in the image above, introducing dynamic buttons through ng-if causes problems with the rounding.
How can I modify the code so that the rounded corners of the first and last children remain intact even when dynamic buttons are added or removed? I prefer not to manage two separate lists based on ng-if, but instead maintain one list with conditional elements.
The original HTML code snippet:
<div id="flyoutmenu" style="float:left">
<ul>
<li>
<a href="" ng-click="sliderChanged(1)"> <i class="ion-plus-circled"></i></a>
</li>
<li>
<a href="" ng-click="sliderChanged(-1)"> <i class="ion-minus-circled"></i></a>
</li>
<span ng-if="isDragabillyOn">
<li>
<a href="" ng-click="hideMonitor(monitor.Monitor.Id)"> <i class="ion-close-circled"></i></a>
</li>
<li>
<a href="" ng-click="toggleStamp()"> <i class="ion-pin"></i></a>
</li>
</span>
</ul>
</div>
The CSS styles being used:
#flyoutmenu ul {
list-style: none;
margin: 0;
padding: 0;
color: white;
z-index: 99;
font-size: 0.7em;
font-family: sans-serif;
text-transform: uppercase;
}
#flyoutmenu ul li a i {
font-size: 2.5em;
font-family: sans-serif;
text-transform: uppercase;
}
#flyoutmenu li {
display: inline-block;
margin-bottom: .2em;
padding: 0.7em;
margin-right: 4px;
line-height: 100%;
}
#flyoutmenu li:first-child {
/*background: rgba(192, 57, 43, 0.7);*/
background: rgba(108, 122, 137, 0.7);
-webkit-border-radius: 5px 0 0 5px;
}
#flyoutmenu li:only-child {
/*background: rgba(192, 57, 43, 0.7);*/
background: rgba(108, 122, 137, 0.7);
-webkit-border-radius: 5px 5px 5px 5px;
}
#flyoutmenu li:last-child {
-webkit-border-radius: 0 5px 5px 0;
}
/* Ensure this rule follows last-child */
#flyoutmenu li:only-child {
background: rgba(108, 122, 137, 0.7);
-webkit-border-radius: 5px 5px 5px 5px;
}
#flyoutmenu li:nth-child(n+2) {
background: rgba(108, 122, 137, 0.7);
z-index: -1;
}