https://kotlinlang.org logo
l

LeoColman

09/24/2021, 11:56 PM
Do 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 AM
If 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 PM
I couldn't find any margin or padding on inspect. Although if I do
margin = -10px
on root it will remove this white border
I think it's on
body
by default
g

Greg Steckman

09/25/2021, 5:33 PM
Is there a css class applied to the body?
l

LeoColman

09/25/2021, 5:34 PM
No, 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>
as this will fix the white margin, but it seems weird to me to have to apply this
g

Greg Steckman

09/25/2021, 5:35 PM
there could be a .body css selector in the stylesheet, applying a margin.
l

LeoColman

09/25/2021, 5:36 PM
The 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 PM
if there is, the style attribute in the html will override that.
l

LeoColman

09/25/2021, 5:36 PM
The 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 PM
Is this whole page generated with compose-web, without any css file?
l

LeoColman

09/25/2021, 5:37 PM
No css file, that's correct. Only the StyleSheet
g

Greg Steckman

09/25/2021, 5:53 PM
So you'll need to fix it by setting the body margin to 0
l

LeoColman

09/26/2021, 5:12 PM
Ah, I see, so this isn't an issue with compose itself. Interesting that this is the default behavior! Thanks for the help, @Greg Steckman!
I'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
Oh 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
3 Views