I want to achieve this in Onsen UI:
Notice taller toolbar than standard, white overlay burger menu icon (for the standard element) and no bottom border between the image and the first item.
I think the burger icon is easy (assuming it stays in the right place with a taller toolbar).
The background image I tried manually setting the CSS property background-image in the browser DOM (using Chrome devtools) on the element and adding the transparent modifier, so <ons-toolbar modifier="transparent"> - unfortunately this got overridden so background image didn't show at all. I also tried doing the same thing on the within the toolbar and that didn't go full width and not sure the burger icon would have been on top anyway
Not sure how to override the toolbar CSS to make a tall/fat toolbar that shows the full height of the image and has no border - I've looked at the CSS for the toolbar in the browser DOM in Chrome Devtools but can't see how to modify it correctly
Ideally need this to be able to cope with different device widths or portrait/landscape orientation.
Any suggestions much appreciated. Thanks.
Related
I have a layout which uses flex to resize its internal components to the window size.
Part of the left column has either some "control buttons" or an "event log" of which visibility can be toggled.
I'd like to animate that show/hide so the log messages div slides out from the right. When the log messages div is hidden, it will slide back towards the right.
The system is using AngularJS (not "Angular").
The majority of examples online show how to animate opacity to fade in and out and the few that show sliding animation use position: relative wrapping position: absolute elements. However, using absolute wrapping relative messes up the flex layout: wrong elements are visible and resizing doesn't work properly.
Any idea on how to achieve that effect?
Here is a fiddle showing the layout.
Thanks!
I incorporated an accordion in my sidemenu as seen in the image. The Home and Logout are not in the accordion, so their height differs. I request for help on how to reduce the height of the accordion header.
I also request for help on how I can remove the border of an accordion. I tried setting the border to empty in the accordion's UIID but it didn't work.
You can reduce the padding and font of the elements in the accordion to reduce the height of the accordion. This also lets you control the border.
You can find the applicable UIIDs in the component inspector tool. Specifically UIIDs to look at would be AccordionArrow and AccordionItem.
I'm using woocommerce storefront theme and want to edit the woo-slider overlay to a gradient instead of a black box. I also want to style the text overlay and add some padding. Does anyone know how I can do this?
Here's a link to the page in question: https://olivetreemortuary.biz
I am trying to get a result looking like this (picture taken from https://material.google.com/components/tabs.html#tabs-usage):
I don't want the tabs to take 100% of the width of the page, as it is by default with material-ui. Is it possible to do this with the implementation of material-ui ? I already played with the width of each tab using the style tab property, but the inkbare seems hardcoded to use percentages according to the id of the selected tab, and therefore doesn't underline properly the resized tabs. Is there a workaround?
There is an issue related to this problem https://github.com/callemall/material-ui/issues/1203
But yes, there is an easy workaround. (unfortunately it doesnt support diffrent widths across the tabs).
You can use the Tabs tabItemContainerStyle property to set the width of the tabs container (make it the width you want to each tab times the number of tabs).
Since the background color is setted on that element, you're gonna need to override the styles for two others Tabs properties (style and contentContainerStyle).
In this example Im setting the same color as my tabs in the style property (for the whole component) and setting the contentContainerStyle back to a white background.
You could use the classes properties as well..
Ex: (Imagine you have a blue toolbar)
<Tabs
tabItemContainerStyle={{width: '400px'}}
style={{background: 'blue'}}
contentContainerStyle={{background: '#FFF'}} >
How can i style the side menu, I created it using this tutorial youtube link, I want ot make it transparent and insert a label with a logo
please see below images on how i would like it to look like.
How it looks now
How i would like it to look
How i would like it to look when opened
To style the side menu, modify the SideNavigationPanel UIID in your theme.
To add the logo, you can do something like this
Toolbar t = new Toolbar();
form.setToolbar(t);
t.setTitle("tayary");
Label logoLabel = new Label(logoImage);
logoLabel.setTextPosition(Label.BOTTOM);
logoLabel.setText("label text here");
logoLabel.setUIID("SideMenuLogo");
t.addComponentToSideMenu(logoLabel);
Add the SideMenuLogo UIID to your theme, change Alignment to Center, and adjust the Top and Bottom margins.
To underline commands, modify the background in SideCommand UIID in your theme. It should be of Type: IMAGE_TILE_HORIZONTAL_ALIGN_BOTTOM. For the image, you can use any borderBottom image in your theme (If you don't have one, create any border using Image Border Wizard, and use its borderBottom image).
You can check this demo for a working a example.