I'm trying to display inline-blocks that don't wrap in an html component. But it seems display: inline-block is getting stripped when I check it with the inspector. If I add it manually with the inspector, I get the right result.
Is display somehow a forbidden css style in retool mobile?
(here you can see the words are getting wrapped when there's no more horizontal space. display could fix that. But when it's added, it doesn't do anything. And when I preview the app in the browser display is removed)
Checking this in the retool mobile app, I get this:
No padding. No border radius. Also the div/span is centered 
seems that the html component is not to be trusted.
Hi could you please send a JSON Export of Repro? I'd like to see how you're setting the css.
Is the first image what you were expecting? can you share your goal css from the inspect?
Unfortunately I can’t share the code because I’m on holiday and retool editor doesn’t work well on my iPhone.
Basically I try to do something like this:
span {
white-space: nowrap;
border-radius: 5px;
padding: 8px 4px;
color: white;
background-color: red;
font-size: 12px;
display: inline-block;
}
But I set it on the element in the html component directly right now with the style attribute:
<span style=“
white-space: nowrap;
border-radius: 5px;
padding: 8px 4px;
color: white;
background-color: red;
font-size: 12px;
display: inline-block;“>PREORDER</span>
And yes, the first is what I try to achieve. But in that image you can see that the nowrap doesn’t work in web preview.
But almost nothing works in the retool mobile version. No padding. No border radius. No nowrap.
Perhaps I’m doing something wrong.
Thanks for sharing this. I just tested this out and I'm seeing the styling is maintained other than a couple like display: inline-block; and (maybe?) 'font-size: 12px;`. Not all style objects are supported for each component. I think that may be the case here. 
Here's what I'm seeing in edit:
In Preview:
That must be the case. It means my solution for replacing 50 containers+text with 1 html component is not going to work. I do need tags on the same line with no padding and no wrap. Basically an inline block with small font-size.
Perhaps keep the available attributes in the web version also limited? Since you will use that as a preview. Finally when you push a version, you notice that what you build was not supported.
I have no idea how to test this now. I will have to push a release for every small change just to see if it is supported. 
I wish there was a simpler way! Maybe what could help here is some syntactic highlighting to show what styling is supported, while your building. There could be more transparency here! I'll reach out to our team and advocate for a improvement in our process. Let us know what you end up doing here! Best of luck @Steven_W !
1 Like
Thanks! Just wondering, would flexbox work in the html component? I can I try that this weekend. Otherwise I have to come up with another layout for my mobile app.
1 Like
Just tested and flex is supported! 
1 Like
