My <ul> element dynamically adds <li> elements, and I am attempting to make the first <li> wider at 63% while the others are at 60%. However, the first one is only getting a width of 60%. Any thoughts on why this might be happening?
I need to achieve this using Javascript only, without utilizing a CSS file.
Below is the code snippet:
$('.list').css({
listStyle: 'none',
padding: '0',
height: '100%',
overflowX: 'scroll',
});
$('.item-wrapper').css({
background:'#FFFFFF',
width: '60%',
margin: '5px',
});
$('.item-wrapper').first().css({
width:'63% !important',
});
Edit: I forgot to include the resulting markup, here it is:
<ul class="list" style="list-style: none; padding: 0px; height: 100%; overflow-x: scroll;">
<li class="item">
<div class="item-wrapper" style="width: 60%; margin: 5px; background: rgb(255, 255, 255);">
<img class="thumbnail" src="images/frame_0001.png" alt="tumbnail" style="width: 25%;">
</div>
</li>
<li class="item">
<div class="item-wrapper" style="width: 60%; margin: 5px; background: rgb(255, 255, 255);">
<img class="thumbnail" src="images/frame_0002.png" alt="tumbnail" style="width: 25%;">
</div>
</li>
</ul>
EDIT 2: I attempted rearranging the order of the .css() functions but it did not resolve the issue.