Angular conflict with basic css

Question

i am trying to do the below steps to have my grids as i want:

How to set auto-margin boxes in flexible-width design using CSS?

The solution that they offer here is nice, and its works if i put this code outside angular, but the problem is when i insert this inside angular component, for example app-root

if i put the below code, outside the component(inside the index.html) works, but in another componet not.

error

i thinks that some functionality of angualr is breaking my basic css code, because if outside of app-root components works and inside of it doesnt, but i dont have any style, is strange.

good

Could you show us the css on the `strech` element ? I have a feeling that something is missing here — Morphyish, Aug 03 '19 at 15:10
.stretch { width: 100%; display: inline-block; font-size: 0; line-height: 0 } — Ratchet, Aug 03 '19 at 15:12
btw it doesnt make sense that inside component angular doesn't workd and outside yes. — Ratchet, Aug 03 '19 at 15:13
Is it the same in both cases ? Because looking at the html code and expected result, it feels like the last element should be the one taking all the empty space on the bottom right, but with the Angular example it doesn't. — Morphyish, Aug 03 '19 at 15:14
the code is exactly the same, i don't know if after that angular put something hidden in the DOM — Ratchet, Aug 03 '19 at 15:17
while angular doesn't add anything to the DOM especially outside of its root. Try to check the `computed` tab to make sure the css on the 3 different elements (container, div and .stretch) is actually the same. You might have some conflicting css somewhere from your angular app. — Morphyish, Aug 03 '19 at 15:24
Nop, is exactyle the same, i have checked it the computed tab, seriously, i don't understand what is happening — Ratchet, Aug 03 '19 at 15:36
wait wait, I just noticed something. In the first image none of your boxes look justified as they should. So without angular your boxes are not justified, which means there's a chance that the `stretch` span element isn't working either ! Still not a solution to your issue, but it could mean that your actual issue isn't angular even though there's something wacky happening. — Morphyish, Aug 03 '19 at 15:42
@EthanVu if is outside in the style.css if is inside the component in the app.component.css — Ratchet, Aug 03 '19 at 15:50
a stackblitz will save some of us time to put your exact case up... and easier to try to help... — Akber Iqbal, Aug 03 '19 at 16:26

score 1 · Accepted Answer · answered Aug 03 '19 at 17:07

I would suggest to use flex for layout instead. No tricks needed, flex support it all. Try this:

.container {
    border: 2px dashed #444;
    min-width: 800px;
    max-width: 1400px;

    /*No tricks needed, flex support it all*/
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.container > div {
    margin-top: 16px;
    border: 1px dashed #f0f;
    width: 200px;
    height: 200px;
    display: inline-block;  
}

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Angular conflict with basic css

1 Answers1