My CN1 app features a FloatingActionButton. I need to change its background color. My styles are all defined in CSS. So this one is :
FAB {
background-color: #80ccc4;
}
And if I create the FAB like FloatingActionButton.createFAB(FontImage.MATERIAL_POWER_SETTINGS_NEW, "FAB"); it results in a FloatingActionButton with an added "hyphen" on top of it :
On the contrary if I create the FAB without providing a style and then programmatically set the background color like fab.getAllStyles().setBgColor(0x80ccc4); then I get the expected FAB :
So what should I set in the css file to remove this unwanted "hyphen" ?
Any help appreciated!
You are styling FAB and not FloatingActionButton which is the right UIID for that. If you used setUIID that might be problematic on a FAB as the content is set later.
The reason this is happening is a bit of a problem with CSS. We get the background color of the FAB from the RoundBorder but transparency should be 0 for the icon in the center.
Unfortunately in CSS you can't express both a background color and 0 background transparency. I don't think this is solvable in the CSS so I'll add a special case to the FloatingActionButton that should workaround this.
Related
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.
I'm currently working on a project that basically shows a map. The map, image below, has different color gradients and I'd like to replicate the effect of vscode when you set color in css and it shows a little box that displays the color. I'd display that color and write a comment beside it.(I.E green = Great economy, light green = medium economy, and very light green = poor economy).
I'd really like to replicate the color display you see in vscode when you set color properties in css like this:
Open up settings in vs code (on a Mac, press command+comma)
Search for Color Decorators and check the box
More on vs code settings https://code.visualstudio.com/docs/getstarted/settings
I think you are asking about setting custom properties/variables in your CSS?
:root {
--some-yellow-you-name-here: #ffff00;
}
.you-class-name {
background-color: var(--some-yellow-you-name-here);
}
I want to display a disabled-but-giving-feedback button like in this answer using a block icon from material icons. It works, however, it'd look much better when the icon was bolder.
Can I make an imported icon look bolder? I guess, modifying the pen width in the SVG would do, but don't know how to do it (especially, whether it's possible "from the outside").
You need to set stroke and stroke-width CSS property on SVG element holding that icon.
For example:
stroke: black;
stroke-width: 2;
makes your icon black, and two times the line width.
I just started building my first App with Codename One and I'm having quite some trouble. :-)
I cant change the background color of a TextField, I changed everything in the Theme and named it "TextField". At the Color tab I changed the background color and set Transparency to 255. Since the Component is named TextField, shouldnt the style be applied automatically when I make a new TextField?
I also tried to set the UIID manually to "TextField", which didn't help either.
Am I missing something?
Kind regards,
Max
The way backgrounds work in Codename One is this:
Border is applied first
Then image
Then gradient
Then color
TextField and other components such as Button etc. often have a default border derived from the theme.
Switch to the Border tab, click derive then click the ... button and select empty.
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.