I would like to customise the dialog of a Vaadin CRUD component (java) by replacing the min-width of the overlay with :
:host([theme~="layout"]) [part="overlay"] {
min-width: 100%;
}
I put it into a css flle and then add in my java class :
#CssImport( value = "styles/gridCrudEditor.css",
themeFor = "vaadin-dialog-overlay",
id = "dialog-layout-overlay-theme")
But it apply for all grid crud editor and I would like to apply it to only one instance.
By default, it's (in vaadin-dialog-layout-overlay-styles.js)
:host([theme~="layout"]) [part="overlay"] {
max-width: 54em;
min-width: 20em;
}
As it's the dialog of the crud... I don't how to proceed
You should be able to do the following:
Java
crud.addThemeName("my-theme");
CSS
:host([theme~="my-theme"]) [part="overlay"] {
min-width: 100%;
}
Related
I want to make this DateTime picker take up the entire screen and also change the style of some parts such as the size of each time slot and day.
I've got this from https://reactdatepicker.com/#example-default and the github repo for it is https://github.com/Hacker0x01/react-datepicker
Any help would be much appreciated!
You can check in the examples the Custom calendar class name.
It defines a custom class name with the DatePicker property calendarClassName="rasta-stripes". The class-name rasta-stripes is defined as follow:
.rasta-stripes {
.react-datepicker__week:nth-child(3n + 1) {
background-color: #215005;
}
.react-datepicker__week:nth-child(3n + 2) {
background-color: #eea429;
}
.react-datepicker__week:nth-child(3n + 3) {
background-color: #a82a15;
}
}
So, as you can see, to style some parts just make a reference to the classes React DatePicker uses for itself to override it. You can check which classes exist by inspecting the sources with the browser of your preference.
To make it full screen for example just override the react-datepicker-popper class-name by removing transform and adding left: 0; right: 0; top: 0; bottom: 0; and then change every fixed size child to your needs.
I have a TableView and trying to fix the cell height through CSS. The following works from java:
myTable.setFixedCellSize(80);
But if I comment that out and rely on the following CSS it doesn't work.
#viewtable .table-row-cell {
-fx-text-background-color: #7f7f7f;
-fx-fixed-cell-size: 80px;
}
The id is set to viewtable, I've already confirmed I'm targeting the proper element as the text color takes affect. And using -fx-cell-size also works fine.
I'm launching this through eclipse and tried running from different environments from javase-1.8 up to 16. The javafx sdk is 17.0.0.1
The fixedCellSize property is part of the TableView class, not the TableRow class. This:
#viewtable .table-row-cell {
-fx-text-background-color: #7f7f7f;
-fx-fixed-cell-size: 80px;
}
Is applying the styles to any TableRow (at least by default) which is a descendent of the node with an ID of #viewtable.
Try the following:
#viewtable {
-fx-fixed-cell-size: 80px;
}
#viewtable .table-row-cell {
-fx-text-background-color: #7f7f7f;
}
I am currently using the PrimeNG library's accordion component in my angular project. See info here.
The template includes some special css styling for printing the page--something like the following:
#media print {
.profile-progress-bar, .top-template-header-content, .header.profile-header{
display: none !important;
}
html, body {
height: auto;
font-size: 10px !important;
}
p-accordionTab > div {
display: block !important;
selected: true !important;
}
}
What I am trying to do, is automatically expand all accordionTab elements when the #media print rendering is processed for the page to be printed.
From the documentation I see that each accordionTab element has a [selected] property which can be bound to and set to "true" in order to expand the tab.
Selected Visibility of the content is specified with the selected
property that supports one or two-way binding.
However, can this be somehow automatically triggered when the #media print rendering occurs?
Thanks!
media query is the way to go, you can take a css only approach to achieve this; no change in TS or HTML files
relevant css:
#media print {
::ng-deep .ui-accordion-content-wrapper-overflown {
overflow: visible;
height: auto !important;
}
}
complete demo on stackblitz here
This is an interesting one. To keep it inside the realm of Angular, you could use the #angular/cdk/layout library and inject MediaMatcher. You could also, of course, do almost this exact same thing using JavaScript (see here... the cdk/layout method I'll show you really just wraps this).
The MediaMatcher service has a method called matchMedia, and from there you just add a listener:
import { MediaMatcher } from '#angular/cdk/layout';
constructor(private readonly mediaMatcher: MediaMatcher ) { }
ngOnInit() {
mediaMatcher.matchMedia('print').addListener(e => e.matches ?
console.log('printing!') : null);
}
So where I've put the console.log, just perform your logic to get the accordians to expand.
Within Ionic, I am trying to customize <ion-toggle> but I face an issue of toggle selection in css.
I have 2 <ion-toggle> and when I design them in css they are both customized : that's correct. Issue coming if I want give both different custom !
I haven't found a way to put any class="xxx" on them allowing me to customize them separately.
Beyond they are <ion-toggle> classes I'd like to design on css
// .toggle : global sensitive toggle area
// .handle : circle above the toggle area
// .toggle input : .handle moving area
// .toggle input+.track : .handle moving area when .handle at left
// .toggle input:checked+.track : .handle moving area when .handle at right
Even if I give a class to <ion-toggle> : <ion-toggle class"xxx">, there is no way to select it in css by : nor .toggle.xxx{border:......}, neither .xxx{.....}.
Please, does somebody knows how to dissociate these <ion-toggle> classes for many <ion-toggle>s ?
Solution found from the ionic documentation
By adding toggle-class="xxx" into :
<ion-toggle toggle-class="MyCustomClass" ng-repeat="item in settingsList" ng-model="item.checked" ng-checked="item.checked"> {{ item.text }} </ion-toggle>
CSS example :
.toggle-search .handle{
height: 13px!important;
width: 13px!important;
}
.toggle-search input+.track {
height: 15px;
width: 35px;
margin-top: 2px;
}
Use this code for ionic toggle
.sign_toggle .toggle .handle{
width: 45px;
height: 47px;
}
.sign_toggle .toggle .track{
width: 97px;
height: 52px;
}
.sign_toggle .toggle input:checked + .track .handle {
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(51px, 0, 0);
background-color: #fff;
}
HTML
Add ion-toggle component to the HTML and simply add the attribute class with a class name:
<ion-toggle class="Awesome"></ion-toggle>
SCSS
Since ion-toggle is a native Ionic component in order to be able do customize it you must add the style on a global SCSS file. For example global.scss. If you add the style to a component SCSS file it won't work. So make sure it's a global SCSS file.
ion-toggle {
&.Awesome {
--background: ...;
--background-checked: ...;
--border-radius: ...;
--handle-background: ...;
--handle-background-checked: ...;
--handle-border-radius: ...;
--handle-box-shadow: ...;
--handle-height: ...;
--handle-max-height: ...;
--handle-spacing: ...;
--handle-transition: ...;
--handle-width: ...;
}
}
However not everything can be customized directly with SCSS. Check the official docs to know what can fit your needs. Documentation: Ionic - Ion Toggle - CSS Custom Properties.
Deep Customization
If you want to apply deep customization to the ion-toggle component you can use a trick called HTML & CSS injection with Javascript and/or use browser devtools in your favor to find the names of elements and classes you want to customize.
Ionic & Angular Specifications
This answer was tested on the following Ionic & Angular specifications:
Ionic CLI : 6.17.1
Ionic Framework : #ionic/angular 5.8.4
#angular-devkit/build-angular : 12.1.4
#angular-devkit/schematics : 12.1.4
#angular/cli : 12.1.4
#ionic/angular-toolkit : 4.0.0
Rather than dissociating classes the good practice would be to override those classes with custom css. Inspect DOM to see what specific classes and css properties to override.
I'm working on Sencha touch application.
I have created list view using Ext.list component of sencha touch.
I have set background images for all list item using CSS
.x-list .x-list-item {
position: absolute !important;
left: 0;
top: 0;
width: 100%;
height:20px;
background: url('../images/list_1.png');
background-repeat: no-repeat;
background-size: 97% 98%;
}
Now I want to set different images for different list items. Is this possible?
If you are using tpl to generate your list items, simply give your list items a class name, something like:
tpl: '<div class="{bgimage}">This is list item 1.</div>'
then change the bgimage property of the data that you set to the list, something like this should do:
prepareData: function(data, index, record) {
data.bgimage = "bg-" + index;
}
Then in your CSS/SASS, you can do
.x-list-item.bg-1 {
background-image: url('../images/list_1.png')
}
.x-list-item.bg-2 {
background-image: url('../images/list_2.png')
}
…
You could customise this to your needs, but this should get you started.
If you're using list item components (i.e. your list does not have a tpl config but an itemCmp config), just set the cls config on each item to get the same result.
If targeting them using nth-child is not working you might have to go the more cumbersome route and attach a separate class to each list item in the html and then manipulate their background images in the CSS by changing the background property of each individually