Struggling with the challenge of absolute and relative positioning in CSS. My GUI allows users to view folders and select how many columns they appear in, as shown in the images provided. Beneath each folder is an input field for renaming and a clear button.
The issue arises when the width of the columns changes, causing the absolute positioning of the clear button to misalign. See examples here: Picture 1 - correctly positioned; Picture 2 - misaligned button.
<div ng-class="colStyle" ng-repeat="folder in getFolders(currentFolder)">
<input type="image" ng-src="{{folder.img}}" ng-click="enter(folder)"/>
<div ng-show="showFont && editing" class="testing">
<input type="text" ng-model="folder.name"/>
<img class="clearName" src="img/clear.png" ng-click='clearName($index, folder)'/>
</div>
</div>
My HTML code uses "colStyle" from responsivegridsystem.com to define the number of columns displayed. Relevant CSS classes are "testing" and "clearName":
.testing{
position: relative;
margin: 0px;
padding: 0px;
}
.clearName{
position: absolute;
left : 80%;
top: 5px;
}
The problem lies in setting the absolute position of the clear button based on column changes. How can I ensure it remains consistent regardless of the number of columns chosen?