It seems like I'm facing a CSS problem (I'm using less), but struggling to come up with an appropriate title. The issue at hand is that one of my directives is being pushed upwards, causing the other directives to be displaced down.
Check out this screenshot for visual reference:
I have these two directives nested inside an ng-repeat. The second directive has an ng-if condition which ensures it displays only after 7 "repeats." Here's the HTML snippet from my index:
<div ng-repeat="acqui in acquis" class="repeated">
<card-info class="card" acqui="acqui" ng-style="{'background-image':'url(img/company/' + acqui.seller.img + '.jpg)'}"></card-info>
<ad-info class="ad-style" ng-if="!(($index + 1) % 7)"></ad-info>
</div>
Although my card-info directive functions as expected, introducing the ad-info directive causes all cards on the line to shift downwards. Below is the code for the ad-info directive:
<div class="ads">
<div class="ad">
<h4>Ad</h4>
<h1>Company</h1>
<img src="img/ad.png">
<h2>Category</h2>
<div class="lineup">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rhoncus nunc ligula, eget vehicula neque pellentesque quis. Donec euismod est vel nulla auctor, nec tempus nulla fringilla.
</p>
<a href=""><h6 class="left"><u>More Info</u></h6></a>
<a href=""><h6 class="right"><u>Advertise with Us</u></h6></a>
</div>
</div>
Here's the CSS layout (formatted differently due to the less preprocessor):
.ad-style {
.ads {
.shadow;
width: 350px;
height: 530px;
display: inline-table;
background-color: black;
margin: 0 10px 0 10px;
h1 {
text-align: left;
font-weight: 900;
font-size: 50px;
color: white;
margin: 0 0 0 20px;
padding-top: 8px;
font-family: @Raleway;
}
img {
margin-top: 50px;
width: 300px;
}
h2 {
font-family: @Open-Sans;
font-weight: 600;
color: white;
}
p {
color: white;
font-size: 15px;
text-align: center;
margin: 0 30px 0 30px;
font-family: @Open-Sans;
font-weight: 300;
}
h4 {
float: right;
color: white;
font-weight: 300;
margin: 15px 20px 0 0;
}
h6 {
font-family: @Open-Sans;
font-weight: 300;
font-size: 10px;
margin-top: 40px;
}
.left {
float: left;
margin-left: 20px;
color: white;
}
...
}
}
On experimenting, I discovered that removing certain elements like h4, h1, img, and h2 from the ad structure resolves the positioning issue. However, eliminating any combination of these four elements still results in the same problem, hinting towards a styling conflict concerning these specific elements.
Some attempted fixes include setting .ad-style to position relative and .ads to position absolute. This adjustment rectified the height alignment concerns but caused the ad-info directive to overlap the subsequent card-info directive. While I could settle for this workaround if there's a way to address the overlapping, I'd prefer avoiding such solutions as they are deemed poor practice.
While the earlier method didn't yield success, I managed to find a genuine solution. By rearranging the placement of h1, h2, img, and h2 below the closing div tag of the lineup class, and positioning all ad-info elements utilizing transform translate, the issue was resolved. Nonetheless, I consider this approach somewhat hacky and wish to explore alternative remedies.
Besides the vertical offset affecting the entire directive, all internal alignments within both directives seem intact. I am currently stumped and unsure of the next steps. Resolving this situation marks the final hurdle before launching this project, therefore, any help or suggestions would be greatly appreciated. Thanks!