Never mind, I just figured it out from the image you posted on Discord.
The problem is that ActionSheet by itself doesn’t have any kind of background, so it will literally just show the child elements. Usually the child elements are ActionSheetButtons which have a proper background. You can see an example here: https://onsen.io/playground/?framework=react&category=reference&module=action-sheet
Since you have img elements in your ActionSheet it will just show the images as they are with no background. You could add styling to the child elements if you still just want to use img.
By the way, SpeedDial might be more suitable if you want open a series of icons. https://onsen.io/playground/?framework=react&category=reference&module=speed-dial
I’m not too sure what you mean by a fullscreen welcome page. Do you have an example of what kind of thing you want?
Pages are defined using <ons-page>. There’s a tutorial on using pages: https://onsen.io/playground/?framework=vanilla&category=reference&module=page It’s possible to conditionally load a page when the app is started if that’s what you want.
Many thanks, its now working correctly… But just one more question… My app now fits the whole iphone x screen, but my apps colour is red and now at the top of the screen is, just below the notch, its white, if you get me… How can i change that part from white to red so it fills the top part?
@munsterlander Its not working with looping. Could you suggest? Code below.
var onsItem= document.createElement(‘ons-list-item’);
onsItem.innerHTML = ‘<img src="" alt=“something here” />’;
Ok, I think I found it:
The distance to the top has to be set for each element/row with style=“top: XXpx” where XX would be the height of the toolbar (44px) + the height of the row + the height of all other rows in between.
carousel - 44px - style="top: 44px; height: 44px"
fixed row - 32px - style=“top: 88px; height: 32px”
<div class=“content” style="top: 120px; >
this part should now scroll below the fixed upper rows.
Hope that helps someone!