Elbow component needs margins to match other elements

[ghost]

I've come across this issue while using lcars-columns to lay out components. (lcars-column makes the ideal layout tool for responsive design since columns can be turned off. So when I create lcars-rows, I create them within an lcars-column).

Also, there is naturally a gap between the object in the adjacent/next column, which doesn't suit this element. Here's what I've done (I'm sure there is a better solution, but I wanted to try):

<div class="lcars-elbow-top-col-container">
            <div class="lcars-elbow left-top  lcars-dodger-blue-alt-bg" ></div>
</div>
<div class="lcars-elbow-bottom-col-container">
            <div class="lcars-elbow left-bottom  lcars-dodger-blue-alt-bg" style="margin-bottom:0px" ></div>
            <div style="height:.25rem;background-color:#36f;width:7.5rem;" ></div>
</div>

CSS .lcars-elbow-top-col-container{ margin-bottom:.25rem;} .lcars-elbow-bottom-col-container{ margin-top:.25rem;margin-bottom:0px;}

I also made 2x lcars-elbow-extend element (top and bottom). Seen in Nemesis but also TNG Season 1.

The elements which extend these I have seen in Nemesis and I created as lcars-elbow-align (align because it doesn't extend, there is a gap).

I'll attach my HTML + CSS. lcars-dev.zip

At the moment I'm going through all TNG TV epiodes and Movies and making screenshots for reference so at least we have info on which elements were original and which came later. It might help identify new components or decide which elements should be defered only for specific style-sheets. Just an idea.

[joernweissenborn]

I know the issue. There is option to give an element the last-child property to tell it does not need margin when you nest layouts.

[ghost]

Oh, very cool! Thanks, I'll look into this more. I guess this is resolved in that case. User error :)

[jrwarwick]

@tenleftfingers , I am not totally clear on the problem and resolution, but I'm sure I (and others) will run into it. Perhaps you would create a little description of the problem and your now corrected understanding and then incorporate that into the index.html documentation.

If you cannot find a nice and clear way to place it into the main documentation text, maybe @joernweissenborn would consider a new "FAQ" or "Common Problems" section in the documentation text to accommodate. That would also be a good place to explain the when/if to use the lcars-app-container element.

[joernweissenborn]

This should be in the tutorial, since it is a core feature of the library. A more elegant way would be nice but I had not found a better one yet.