Width/Height issues when set to a container

ghost commented 3 years ago

I managed to use halfmoon on a Chrome Extension. I've popup.html which manages to be like a page. Unfortunately, due to some css (that I haven't understood well yet) sets position: absolute to html, body and other containers elements.

The unique way I have to set a proper size it's by setting a static width/height. If I use "auto", "fit-content" or "100%" doesn't work.

What I expect:

How it's actually:

This is pretty frustrating :(

ghost commented 3 years ago

I've tried everything. I really don't know what to do :( 👎

halfmoonui commented 3 years ago

It would be better if you at least showed a sample of the code you are working with. Are you using a page wrapper and content wrapper? If not, you should probably do that and check if it works for you. I recommend using the starter template generator for this: https://www.gethalfmoon.com/docs/page-building/#starter-template-generator

Halfmoon does have some unconventional positioning. This was addressed in another issue (https://github.com/halfmoonui/halfmoon/issues/49), and I have plans to patch this out in the future update.

ghost commented 3 years ago

Hello! Thanks for your amazing work. Let me show you my code: I'm building the app in Angular, but this should not be a problem.

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>RadBlock</title>
    <base href="/">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

    <!-- Favicon and title -->
    <link rel="icon" href="favicon.ico">
    <title>Starter template - Halfmoon</title>

  </head>
  <body class="with-custom-webkit-scrollbars with-custom-css-scrollbars" data-dm-shortcut-enabled="true" data-sidebar-shortcut-enabled="true" data-set-preferred-mode-onload="true">

    <app-root></app-root>

  </body>
</html>

app.component.html

<div class="page-wrapper">

    <div class="sticky-alerts" style="pointer-events: auto;"></div>

    <nav class="navbar">
        <app-navbar></app-navbar>
    </nav>

    <div class="content-wrapper">
        <router-outlet></router-outlet>
    </div>

    <nav class="navbar navbar-fixed-bottom">
        <app-footer></app-footer>
    </nav>

</div>

By the way. Can you help me in having a temporary fix to this issue? I cannot understand what selector can be. I can share with you the unpacked chrome extension if you want.

halfmoonui commented 3 years ago

No worries, but this is not an issue within the framework. I think you will be better off posting a question on Stack Overflow under this tag: https://stackoverflow.com/questions/tagged/halfmoon

That said, I think the problem you are facing is because it is a Chrome extension, which usually have fixed widths. An easy solution to your problem would be defining a fixed width and setting the max width to 100% of one of your containers, that is, the utility classes of .w-{size} and .mw-full (https://www.gethalfmoon.com/docs/sizing-utilities/). That would solve your width issue, and also make sure your extension never gets bigger than the maximum width of the browser.

ghost commented 3 years ago

Great! I'll try, and update this thread if needed. Thanks.

halfmoonui / halfmoon

Width/Height issues when set to a container #75