Arraying divs in a line

[Neopopulas]

So i've been playing with some borders and things and i wanted to arrange them in a line.

 

I can do this, for example;

 

 

 

 

Which is fine, but i can't do this; (using display:inline-block)

Quote

 

It works in the editor, as you can see, but when you submit it, it gets stripped out. I was wondering why and if there was a way to use it. I'm unfamiliar with the invision boards and its been a long time since i've done this sort of thing so there might be a perfectly good reason.

[fabulist]

I'm not sure why it worked in the editor at all, div's are either inside each other, or under each other. The horizontal row in the image is supposed to be done by span's.

    

    

    

    

Edited June 9, 2023 by fabulist (see edit history)

[Neopopulas]

Spans work but can you change the size and such of those?

inline-block allows you to set the width and height of an element which means you can adjust the size and shape of the box (or bar, or circle, or whatever) and inline-block should allow them to sit side-by-side according to w3schools anyway.

It is CSS so you never know when its available if you aren't building your own so its probably just that.

 

 

 

 

I'm not sure if you can do that with the spans. At least i couldn't get it to work the same with a quick lunch break attempt

[bwatford]

Inline block is being sanitized by Invision as non approved code for safety reasons. @Eric will have to evaluate if it might be possible to allow.

The issue is if we allow too much CSS then we open the board up to attack. It seems like a little thing to allow but it is on the html sanitation list for a reason.

[Neopopulas]

I understand. Its not really integral to anything its just one of those 'why doesn't this work' things. Security is important and little things can cause unforeseen consequences, trust me, i've seen some of the weirdest things cause the weirdest problems.

If it comes in at some point thats cool, if not i can squish them in tables or just use something else but its cool to know.

[fabulist]

I set the width of the span's indirectly, by assigning padding values.

Edited June 10, 2023 by fabulist (see edit history)

[Malkavian Grin]

 

 

 

 

 

I'm not sure why you need inline-block. Floated divs work just fine. What exactly are you trying to achieve?

[Neopopulas]

I mean, just that. I just.. can't remember why it wasn't working for me. Maybe i missed a div somewhere and then got overly invested in a complex solution that was unnecessary.

That would be pretty on-brand for me, not gonna lie.

Edited June 10, 2023 by Neopopulas (see edit history)

[Malkavian Grin]

@Neopopulas I know you said in another thread you use Firefox. I used to use it in the 2000s. I switched several years ago to Chrome. I may switch again to Opera GX. I dunno yet.

My point is: I don't know if Firefox has built-in dev tools, but Chrome does and they are a life-saver when I code. I can see all the code, including CSS, and modify it on the fly. I use it as a way to preview my work without going in-and-out of the source screen. Once I have something I like, I hit source and hit okay and it gets automatically updated. Pretty legit shortcut, not gonna lie.

[Neopopulas]

I think firefox does, at least it did back when i did this more often.

The biggest problem i've run into playing with things is that it works in the editor but not when you submit things which means i have to make sure to always test it after submitting and not trust the editor.

[Malkavian Grin]

8 hours ago, Neopopulas said:

I think firefox does, at least it did back when i did this more often.

The biggest problem i've run into playing with things is that it works in the editor but not when you submit things which means i have to make sure to always test it after submitting and not trust the editor.

If it does, try F12; that's the command on Chrome. Or right-click-->Inspect.

Very true about the editor...I lost like 2 hours of work using CSS that wasn't allowed. I got very artsy with angles... At this point I've started to just keep a mental note of what isn't allowed, but it would be nice to see a full list somewhere of what is allowed (I have yet to look for this, btw, so it might exist).

[Neopopulas]

I do all the testing in a forum i built just for that and just make sure i hit save as often as possible. It does mean a lot of loading but that can't he helped. I'm slowly building a list of things that do work but if there was a list of available css that would be cool

Edited June 12, 2023 by Neopopulas (see edit history)

[Malkavian Grin]

46 minutes ago, Neopopulas said:

if there was a list of available css that would be cool

This!

(admittedly I don't scroll through the guide)

[cailano]

Firefox has had developer tools since 2011, but the Dev Team is right to be careful about CSS. Any type of user-entered code is a security risk, even just CSS, although there are sanitization libraries and whatnot to help mitigate the risk.

Still, being able to enter HTML is one of my favorite parts of Baldr, and I love all the creativity here!

I agree that a doc that showed what CSS is allowed would be super cool.

[Neopopulas]

All the html is what sold me on boldr, i admit. I'm one of those people who hates change all the way to my bones but i also could spend hours fiddling with minutia for sheets and posting templates and using HTML makes all that so much better, easier and more impressive.