Point 1. The image shows the simulator with the title in black letters. In the next section of the image it shows what is configured in the CSS and finally its application in the inspector. I tried assigning other UIIDs in the inspector and it changes everything except the color of the letters.
My CSS mapping code.
public class Tarifa extends Form {
Idioma idioma;
public Tarifa() {
this.setLayout(new BorderLayout());
this.setScrollable(true);
Usuario iU = Usuario.getInstancia();
idioma = new Idioma(iU.getIdioma());
this.setTitle(idioma.getMensaje2());
this.getToolbar().setUIID("Titulo");
}
}
In point 2 I need to place the icons as close to the right of the form and therefore the search fields grow but I can't make it happen.
My code in that case is:
Style s = UIManager.getInstance().getComponentStyle("ButtonUtil");
// Contenedor de Lugar de Inicio
Button btInicio = new Button(idioma.getMensaje5(), FontImage.createMaterial(FontImage.MATERIAL_FLAG, s, 4), "ButtonBusqueda");
Button btLocalizar = new Button(FontImage.createMaterial(FontImage.MATERIAL_LOCATION_PIN, s, 4));
Container cnInicio1 = new Container(new BorderLayout());
cnInicio1.addComponent(BorderLayout.CENTER, btInicio);
cnInicio1.addComponent(BorderLayout.EAST, btLocalizar);
Container cnInicio = new Container(new BoxLayout(BoxLayout.Y_AXIS));
cnInicio.addComponent(new Label(idioma.getMensaje5()));
cnInicio.addComponent(cnInicio1);
My CSS is:
ButtonBusqueda {
font-family: "native:MainRegular";
font-size: 2.5mm;
color: blue;
text-align: left;
border: 1pt solid gray;
padding: 1mm;
margin-left: 1mm;
margin-top: 1mm;
}
ButtonUtil {
font-family: "native:MainRegular";
font-size: 3mm;
color: blue;
text-align: left;
margin: 0mm;
paddin: 0mm;
}
You are customizing the container surrounding the title (the title area). Unlike normal CSS properties aren't inherited directly in our CSS. We have explicit hierarchies and the title (which you can see is below the renamed UIID) inherits its styles from Label.
Using this style should let you customize the title font:
Title {
...
}
Related
Here is my sample code.
Please find my working sample code here
I need to set triangle on right top corner in mat-dialog box - Angular.
I am getting top right corner triangle dialog box using static css on last row.
But here not able to get on each row on change request button click.
The below code is for the Dialog box Component
openDialog(Id, Currency, Amount, Reason, StatusDescription, payment, event) {
let targetAttr = event.target.getBoundingClientRect();
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.data = {
Id: Id,
Reason: Reason,
StatusDescription: StatusDescription
};
dialogConfig.position = {
top: targetAttr.y + targetAttr.height + 10 + "px",
left: targetAttr.x - targetAttr.width - 20 + "px"
};
dialogConfig.panelClass = ['my-panel','arrow-top'];
const dialogRef = this.dialog.open(EditingDialogComponent, dialogConfig);
dialogRef.afterClosed().subscribe(
data => {
console.log("Dialog output:", data)
}
);
}
The Below code is from style.scss
/* Add application styles & imports to this file! */
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
.my-panel {
overflow: hidden !important;
border-radius: 5px !important;
padding: 0px !important;
color: #fff;
}
.my-panel.arrow-top {
margin-top: 40px;
}
.my-panel.arrow-top:after {
content: " ";
position: absolute;
right: 100px;
top: 365px;
border-top: none;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: 15px solid gray;
}
I am getting like this.
But I want dialog box with upper arrow on each row under change request button click event
This is my situation:
I have a web app that allow users to change the UI size. (i.e. small, medium or large button)
Users can change how it looks like dynamically during runtime. All text and form input boxes will be resized.
My project is in Vue.js.
What is the best way to solve this? Loading different css when user click?
Load different CSS while user click the button similar to this . Codepen : https://codepen.io/anon/pen/NJEoVM
HTML
<div id="app" :class="size">
<div class="text">Text</div>
<input class="ipt"/><br/><br/>
<button class="btn" #click="change('small')">Small</button>
<button class="btn" #click="change('medium')">Medium</button>
<button class="btn" #click="change('large')">Large</button>
</div>
CSS
.small .ipt{
width: 100px;
height:30px;
}
.small .text{
font-size: 18px;
}
.medium .ipt{
width: 300px;
height:50px;
}
.medium .text{
font-size: 32px;
}
.large .ipt{
width: 600px;
height:100px;
}
.large .text{
font-size: 64px;
}
Javascript
new Vue({
el: '#app',
data:()=>({
size:'small'
}),
methods:{
change(val){
this.size = val
}
}
});
Actually, you can make use of Custom Properties aka CSS variables.
Firstly, define the button CSS styles
/* button.css */
#buttonRef {
--fontSize: 16px;
font-size: var(--fontSize)
}
The overall flow would be something like the following one e.g
methods: {
changeButtonSize: function(size, event) {
event.preventDefault();
/* size might be either of 's', 'm', 'l' */
/* let the button ref is stored in refs */
const buttonRef = this.$refs[“buttonRef”];
let fontSize = 16;
switch(size) {
case 's':
fontSize = 12;
case 'm':
fontSize = 18;
case 'l':
fontSize = 22;
}
/* dynamically change the value for custom property */
buttonRef.style.setProperty("--fontSize", fontSize);
}
}
you can set up 3 classes:
.small {font-size:12px}
.medium {font-size:18px}
.large {font-size:24px}
Then add or remove them to your main parent div onClick.
If you have discreetly set the font-size on the elements, you'll have to target those elements as such:
.small .description { font-size:12px }
.small .title{ font-size:16px }
I have two custom elements
<desktop-canvas id="desktop">
#shadow-root (open)
<desktop-window>
</desktop-window>
<desktop-canvas>
I'm trying to style <desktop-window> like so:
#desktop::shadow desktop-window {
background-color: red;
padding: 25px;
margin: 25px;
display: block;
}
But desktop-window dosen't receive the style. What am I doing wrong? The same syntax seems to be working in this codepen (not by me): https://codepen.io/matt-west/pen/FtmBL
As announced here...
Starting in Chrome 63, you cannot use the shadow-piercing selectors ::shadow and /deep/ to style content inside of a shadow root.
According to that page you are only affected if you use Shadow DOM v0 components. You either use the shady DOM polyfill, switch to Shadow DOM v1 components or place the styles inside the component and use :host:
var XProductProto = Object.create(HTMLElement.prototype);
XProductProto.createdCallback = function() {
var shadow = this.createShadowRoot();
var img = document.createElement('img');
img.alt = this.getAttribute('data-name');
img.src = this.getAttribute('data-img');
img.width = '150';
img.height = '150';
img.className = 'product-img';
shadow.appendChild(img);
img.addEventListener('click', function(e) {
window.location = this.getAttribute('data-url');
});
var link = document.createElement('a');
link.innerText = this.getAttribute('data-name');
link.href = this.getAttribute('data-url');
link.className = 'product-name';
shadow.appendChild(link);
var styleEl = document.createElement('style');
styleEl.innerHTML = `
:host .product-img {
cursor: pointer;
background: #FFF;
margin: 0.5em;
}
:host .product-name {
display: block;
text-align: center;
text-decoration: none;
color: #08C;
border-top: 1px solid #EEE;
font-weight: bold;
padding: 0.75em 0;
}`;
shadow.appendChild(styleEl);
};
var XProduct = document.registerElement('x-product', {
prototype: XProductProto
});
body {
background: #F7F7F7;
}
x-product {
display: inline-block;
float: left;
margin: 0.5em;
border-radius: 3px;
background: #FFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
font-family: Helvetica, arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
<x-product data-name="Ruby" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png" data-url="http://example.com/1"></x-product>
<x-product data-name="JavaScript" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" data-url="http://example.com/2"></x-product>
<x-product data-name="Python" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/python.png" data-url="http://example.com/3"></x-product>
CSS Scoping Module Level 1 provides an answer to: Why is the shadow host so weird?:
The shadow host lives outside the shadow tree, and its markup is in control of the page author, not the component author.
It would not be very good if a component used a particular class name internally in a shadow tree stylesheet, and the page author using the component accidentally also used the the same class name and put it on the shadow host. Such a situation would result in accidental styling that is impossible for the component author to predict, and confusing for the page author to debug.
I need to add border to the columns in grid.
In my webapp I have addons.scss, mytheme.scss, styles.scss and styles.css. How i can add this new borders into my grid?
My grid code -
#Override
protected void init(VaadinRequest vaadinRequest) {
Grid grid = new Grid();
IndexedContainer container = new IndexedContainer();
grid.setContainerDataSource(container);
container.addContainerProperty("September", String.class, null);
container.addContainerProperty("Person1", Integer.class, 0);
container.addContainerProperty("Person2", Integer.class, 0);
container.addContainerProperty("Person3", Integer.class, 0);
container.addContainerProperty("Person4", Integer.class, 0);
container.addContainerProperty("Person5", Integer.class, 0);
container.addContainerProperty("Person6", Integer.class, 0);
container.addContainerProperty("Person7", Integer.class, 0);
container.addContainerProperty("Person8", Integer.class, 0);
Grid.HeaderRow row = grid.addHeaderRowAt(0);
Grid.HeaderRow row2 = grid.addHeaderRowAt(1);
String[] Group1 = {"Person3", "Person4", "Person1", "Person2"};
String[] Group2 = {"Person7", "Person8", "Person5", "Person6"};
String[] Group3 = {"Person3", "Person4"};
String[] Group4 = {"Person1", "Person2"};
String[] Group5 = {"Person7", "Person8"};
String[] Group6 = {"Person5", "Person6"};
row.join(Group1).setText("Čerpacia stanica");
row.join(Group2).setText("Panos");
row2.join(Group3).setText("TPP");
row2.join(Group4).setText("Brigada");
row2.join(Group5).setText("TPP");
row2.join(Group6).setText("Brigada");
container.addItem(1);
Item item = container.getItem(1);
item.getItemProperty("September").setValue("1.9.2017 Piatok");
...
//This is from your post
grid.setCellStyleGenerator(new Grid.CellStyleGenerator() {
#Override
public String getStyle(Grid.CellReference cellReference) {
if ("TPP".equals(cellReference.getPropertyId()) ||
"Brigáda".equals(cellReference.getPropertyId())) {
return "right-and-left-border";
else {
return null;
}
}
});
}
There is class that i have in my webapp folder.
Mytheme.scss
// If you edit this file you need to compile the theme. See README.md for details.
// Global variable overrides. Must be declared before importing Valo.
// Defines the plaintext font size, weight and family. Font size affects general component sizing.
//$v-font-size: 16px;
//$v-font-weight: 300;
//$v-font-family: "Open Sans", sans-serif;
// Defines the border used by all components.
//$v-border: 1px solid (v-shade 0.7);
//$v-border-radius: 4px;
// Affects the color of some component elements, e.g Button, Panel title, etc
//$v-background-color: hsl(210, 0%, 98%);
// Affects the color of content areas, e.g Panel and Window content, TextField input etc
//$v-app-background-color: $v-background-color;
// Affects the visual appearance of all components
//$v-gradient: v-linear 8%;
//$v-bevel-depth: 30%;
//$v-shadow-opacity: 5%;
// Defines colors for indicating status (focus, success, failure)
//$v-focus-color: valo-focus-color(); // Calculates a suitable color automatically
//$v-friendly-color: #2c9720;
//$v-error-indicator-color: #ed473b;
// For more information, see: https://vaadin.com/book/-/page/themes.valo.html
// Example variants can be copy/pasted from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples
#import "../valo/valo.scss";
#mixin mytheme {
#include valo;
.mytheme .v-grid-cell
{
font-size: 5px;
overflow: visible;
}
//I insert this code here
.v-grid-cell.right-and-left-border {
border-left: solid 2px black;
border-right: solid 2px black;
}
// Insert your own theme rules here
}
There is code from styles.scss
#import "mytheme.scss";
#import "addons.scss";
// This file prefixes all rules with the theme name to avoid causing conflicts with other themes.
// The actual styles should be defined in mytheme.scss
.mytheme {
#include addons;
#include mytheme;
}
This is class addons.scss
/* This file is automatically managed and will be overwritten from time to time. */
/* Do not manually edit this file. */
/* Import and include this mixin into your project theme to include the addon themes */
#mixin addons {
}
And styles.css have 13000 lines ...
After insert your code into mytheme.scss and grid set style method into my java code, then i recompiled the project. But when i refresh the page, all is the same.
--
Now I want update some styles in my theme. E.G
.mytheme .v-grid-row > td, .mytheme .v-grid-editor-cells > div {
font-size: 15px;
border-left: 1px solid #d4d4d4;
border-bottom: 1px solid #d4d4d4;
}
and i want have some new styles
.mytheme .v-grid-row > td, .mytheme .v-grid-editor-cells > div {
text-align: center;
font-weight: bold;
font-size: 10px;
border-left: 1px solid #d4d4d4;
border-bottom: 1px solid #d4d4d4;
}
Where do I save it? Thanks again :)
GTK3: I have two GtkLabel widgets in a GtkButton (via a HBox) like this:
[name_label (black) value_label (grey)] - button inactive (white background)
[name_label (white) value_label (yellow)] - button active (black background)
When the button is toggled I want the background to turn black and the two labels should change color accordingly.
Is it possible to do this using CSS only?
This is what I have tried:
from gi.repository import Gtk, Gdk
window = Gtk.Window()
button = Gtk.Button()
hbox = Gtk.HBox()
name = Gtk.Label('Name')
value = Gtk.Label('Value')
value.set_name('value')
hbox.set_spacing(10)
hbox.pack_start(name, expand=False, fill=True, padding=0)
hbox.pack_start(value, expand=False, fill=True, padding=0)
button.add(hbox)
window.add(button)
window.connect('destroy', Gtk.main_quit)
window.show_all()
screen = Gdk.Screen.get_default()
css_provider = Gtk.CssProvider()
css_provider.load_from_path('style.css')
context = Gtk.StyleContext()
context.add_provider_for_screen(screen, css_provider, Gtk.STYLE_PROVIDER_PRIORITY_USER)
Gtk.main()
style.css:
.button {
background-color: white;
background-image: none;
}
.button #value {
color: grey;
}
.button:active {
background-color: black;
background-image: none;
color: white;
}
.button:active #value {
color: yellow;
}
The value label remains gray when the button is pressed, so the last section does not apply. Is this something that is expected?
Ok, so I can get this to work by dynamically adding a class to the value label e.g. like this but the original question remains: Can it be done using CSS only?
EDIT: In newer versions of GTK3, e.g. 3.18.9 (the one that is included in Ubuntu Xenial), the CSS-only solution works as expected!
I leave the old solution below for those who are stuck with an older GTK version.
from gi.repository import Gtk, Gdk
window = Gtk.Window()
button = Gtk.Button()
hbox = Gtk.HBox()
name = Gtk.Label('Name')
value = Gtk.Label('Value')
value.set_name('value')
hbox.set_spacing(10)
hbox.pack_start(name, expand=False, fill=True, padding=0)
hbox.pack_start(value, expand=False, fill=True, padding=0)
button.add(hbox)
window.add(button)
window.connect('destroy', Gtk.main_quit)
window.show_all()
screen = Gdk.Screen.get_default()
css_provider = Gtk.CssProvider()
css_provider.load_from_path('style.css')
context = Gtk.StyleContext()
context.add_provider_for_screen(screen, css_provider, Gtk.STYLE_PROVIDER_PRIORITY_USER)
ctx = value.get_style_context()
def active(widget):
ctx.add_class('active_value')
def inactive(widget):
ctx.remove_class('active_value')
button.connect('pressed', active)
button.connect('released', inactive)
Gtk.main()
And the corresponding CSS:
.button {
background-color: white;
background-image: none;
}
.button #value {
color: gray;
}
.button #value.active_value { /* value label when the button is pressed */
color:yellow;
}
.button:active {
background-color: black;
background-image: none;
color: white;
}