Do you guys face this? If you pay attention you'll...
# compose-webl
LeoColman
09/24/2021, 11:56 PMDo you guys face this? If you pay attention you'll see that on all margins there's a small white 'padding', although I didn't configure any spacing on the sides. Is it possible to disable this? Or is this just the standard?
(Backender Kotliner trying to play with frontend a bit 😅 )
✅ 1
g
Greg Steckman
09/25/2021, 12:15 AMIf you right click on the page and "inspect", you can see the html that is generated for the page, what classes are applied to each tag, and what css is in those classes. There's probably a margin in there somewhere.
l
LeoColman
09/25/2021, 5:31 PMI couldn't find any margin or padding on inspect. Although if I do
margin = -10pxLeoColman
09/25/2021, 5:33 PMI think it's on
bodyg
Greg Steckman
09/25/2021, 5:33 PMIs there a css class applied to the body?
l
LeoColman
09/25/2021, 5:34 PMNo, there's nothing applied to the body.
I mean, there is now:
Copy code
<body style="margin: 0">
<div id="root"></div>
<script src="SeMudandoFront.js"></script>
</body>g
Greg Steckman
09/25/2021, 5:35 PMthere could be a .body css selector in the stylesheet, applying a margin.
l
LeoColman
09/25/2021, 5:36 PMThe default stylesheet is empty
Copy code
object AppStyleSheet : StyleSheet() {
val primary = Color("#023e8a")
val primaryLight = Color("#02558b")
val accent = Color("#eb4a3b")
val accentLight = Color("#d9554d")
}g
Greg Steckman
09/25/2021, 5:36 PMif there is, the style attribute in the html will override that.
l
LeoColman
09/25/2021, 5:36 PMThe code is available here:
https://github.com/SeMudando/SeMudandoFront
If you want to take a close look
g
Greg Steckman
09/25/2021, 5:36 PMIs this whole page generated with compose-web, without any css file?
l
LeoColman
09/25/2021, 5:37 PMNo css file, that's correct. Only the StyleSheet
g
Greg Steckman
09/25/2021, 5:53 PMI think I found the reason: https://stackoverflow.com/questions/13127887/how-wide-is-the-default-body-margin
Greg Steckman
09/25/2021, 5:54 PMSo you'll need to fix it by setting the body margin to 0
l
LeoColman
09/26/2021, 5:12 PMAh, I see, so this isn't an issue with compose itself.
Interesting that this is the default behavior! Thanks for the help, @Greg Steckman!
LeoColman
09/26/2021, 5:35 PMI've turned our conversation into a Q/A in stackoverflow. Maybe this question pops up in the future
https://stackoverflow.com/questions/69337324/white-border-on-webpage/69337325#69337325
d
David Herman
10/01/2021, 4:22 PMHere's how I solved it in my project:
https://github.com/varabyte/kobweb/blob/9a9fc3f38f34d27e09dff96a24af20d5fa54162b/frontend/kobweb/src/jsMain/kotlin/com/varabyte/kobweb/core/App.kt#L41
David Herman
10/01/2021, 4:23 PMOh I just read your stack overflow answer seems like you fixed it already yourself. Yes this was a "fun" few hours of a rabbit hole I also encountered and couldn't figure out at first
4 Views