Closed ghost closed 3 years ago
I've tried everything. I really don't know what to do :( 👎
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.
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.
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.
Great! I'll try, and update this thread if needed. Thanks.
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 :(