I want to disable text input in the "basic-select" component, from the "vue-search-select" package
because there are already ready-made styles for it, and I would not want to create a separate customized select
is it possible? Tell me please
I guess there is no explicit API to disable text input because this package is going to make a "searchable" select component. The text input can be hidden using CSS, however.
.search {
display: none;
}
/* or even better */
.ui.search.dropdown > input.search {
display: none;
}
However, you should be careful about the selector you choose. Depending on your project, it might have some side effects. It might be better to add a custom class to the component and use it as follows:
.my-custom-class .ui.search.dropdown > input.search {
display: none;
}
Pretty straightforward problem. Have scroll-able ion-content in my Ionic4 application. I want to be able to print it gracefully by applying #media only print styles. I'm almost there, but I have one major problem. I cannot get the vertical scrollbar to disappear for printing. Additionally, I only ever get one page printed, containing only the content that is in view when I print the page. I've scoured the web for solutions, and come across and tried various suggestions in the context of Ionic3 and earlier, but I haven't found the magic bullet for Ionic4 yet. Has anyone encountered and gotten to the bottom of this yet?
I have been through the ringer on trying to print content in Ionic 4. Some of the steps i followed to print multiple pages.
remove any flex-box styled lists. They just will not print how you want them to across pages, though they have worked fine for me if the content fits in a page.
for items you want to be seperated by page, its best if they are a display: block; styled item, so that that in the print style sheet you can use one of the page-break properties on it
on the item containing your list, the ion-content for example, make sure you remove any max-height attributes from it or any of its ancestor or child elements, as well as removing the overflow: scroll from these elements as well so that it allows your content to go from page to page. for example on my stylesheet for printing (cant share it because of NDAs) I had a lot of overflow-y: visible on elements just to make sure it shows. if you find an element thats cutting off your html, it should be the primary target for experimentation.
you can simulate a print in the dev tools, i found it useful, it's good for iteration here's a link
some other things that may help, but i am not sure as I did so much testing across browsers, and only vaguely remember what impact that css property had is to have the body with a static position, as well as having contain: none on the body to say that the browser should render as normal, little more explanation here
i do not know the specifics of your use case, but if you don't mind foregoing the native print button, and just giving the user a button to click to trigger the print, then that would be more manageable as you do not have to account for all the scaffolding around that specific element that you want to print (the ion-router, ion-page, and all the ancestors)
If you did that then you could put all your items you want to print into a div with an id of printSection or what you prefer, and then the javascript that is responsible for that page you can create your own print function. In my example i will use angular, if you are not using that then preform whatever DOM selecting you need to to get the native html out of your template.
#Component({ ... })
export class Page {
// select the item holding your print content by `#property` you gave it
#ViewChild('printSection', { read: ElementRef }) printSection: ElementRef;
...
customPrint() {
const printContent = this.printSection.nativeElement;
const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
WindowPrt.document.write(printContent.innerHTML); // pass in the native html you got
/**
* you should probably use an observable instead of an interval for this,
* but this is just to illustrate a bug where the print would be fired before
* all the content was written
*/
const interval = setInterval(
() => {
if (document.readyState === 'complete') {
WindowPrt.document.close();
WindowPrt.focus();
WindowPrt.print();
clearInterval(interval);
}
},
200);
}
}
I Solved it following this process
First, remove the content to be printed from ion-content. Use a div instead of ion-content(shadow-dom is implemented with ion-content which blocks your CSS classes)
You also need to force the CSS below on ion-page when printing (it is initially set to position: absolute, by default)
In my case I was printing from a modal component which has a default class "show-modal". I was able to print on multiple pages by target that class this way
#media print {
.ion-page {
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
position: relative;
flex-direction: column;
justify-content: space-between;
contain: none;
overflow: visible;
z-index: 0;
}
.scroll-content,
ion-modal.show-modal,
ion-modal.show-modal .modal-wrapper,
ion-modal.show-modal .ion-page.show-modal,
ion-modal.show-modal .ion-page.show-modal > ion-content,
.ion-page.show-modal,
.ion-page.show-modal > ion-content,
ion-tab,
ion-tabs,
.app-root,
body {
contain: none;
position: relative !important;
height: auto;
overflow: visible;
}
}
I'm also trying to solve this same issue. I've scoured the Internet, and tried many an idea, but none has worked so far.
Perhaps we could solve this collaboratively. I'd put this as a comment, but I don't have enough rating points, so the system will not let me.
This is what I've found so far. In Chrome Developer Tools, you can click on a settings icon, then scroll to "Rendering," and on "Emulate CSS media type," select "print."
When I do that, it shows what the print view is. I created a separate css file, let's call it print.css, and in it, there is
#media print {
/* add your css styles for print here */
}
I know my print.css is being processed because I've
display: none
for ion-header and some tabs at the bottom, and they do disappear when I select "print" emulation in Chrome.
What is interesting is, I'm seeing the whole page -- scrollable and all -- on the screen in this print mode. However, every time I try to print it, only one page shows up.
That page, however, doesn't always start at the top. It includes the current viewport.
Which is why, I'm wondering if there is something in the css that is trying to keep the whole thing as a page. i.e., preventing a page break?
I'm experimenting with things like this:
ion-content, .foo, .bar, ion-list, ion-tabs, ion-item {
break-inside : auto !important;
break-after : auto !important;
break-before : auto !important;
}
(where foo and bar are classes you might have of your own.)
This above one breaks things. Removing ion-tabs, ion-list, and ion-item shows the full page.
I'm also experimenting with the following. None has worked so far, but that is probably because I haven't selected the right tag or class.
display: block !important;
height: 100%;
overflow-y: visible !important;
max-height: unset !important;
contain: none;
You may want to experiment with the tag in question that might be preventing a page break. Some people are suggesting it's flexbox or grid that's the root cause. I'd love to know how to find the root cause.
Good luck! If something works, let us know, so I'll also try it in my code.
I'm trying to dynamically change some field color when it has changed due to some processing.
CUBA documentation explains how to do it statically through web theme extension (https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html), but not dynamically. Although it is possible in Vaadin (https://vaadin.com/wiki/-/wiki/Main/Dynamically%20injecting%20CSS) on which platform web gui is built upon.
I suppose that if I use the Vaadin way of injecting CSS it will work (which I will try) but I will then have Vaadin specific code, which I'm trying to avoid.
Is there a CUBA way of doing so I'm missing ?
Edit:
I'm trying to have any field of a form to change background color when it has changed from its initial value. As per CUBA documentation (https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html) I need to :
- create a SCSS mixin with background color
- inject the field in the editor class in order to have access to it
- react to a field change event and then define the style name of the field
I did create the SCSS mixin, but two issues I have :
1) I would like to retrieve the field instance dynamically instead of injecting it (keep code clean and light)
2) I would like to avoid defining the background color statically so that the color could be parameterized at runtime
For 1) I tried to injected the fieldGroup and used getFieldComponent(), then applied the style with setStyleName on it when it is changed. It worked but I would prefer to define this behavior for every field that is an input field.
For 2) apart from using Vaadin specific feature of injecting CSS (and tighing my code to Vaadin (and so leading me away of generic interface) I do not see how to do
Hope it's more clear
You cannot set truly dynamic color (any RGBA) from code to field but you can create many predefined colors for your field:
#import "../halo/halo";
#mixin halo-ext {
#include halo;
.v-textfield.color-red {
background: red;
}
.v-textfield.color-blue {
background: blue;
}
.v-textfield.color-green {
background: green;
}
}
I do not recommend using styles injected from code (as Vaadin Page does) since it is a mixing of logic and presentation. Instead you can create all predefined styles (30-50 styles should be enough) and assign it depending on some conditions using setStyleName method:
public class ExtAppMainWindow extends AppMainWindow {
#Inject
private TextField textField;
private int steps = 0;
public void changeColor() {
if (steps % 2 == 0) {
textField.setStyleName("color-red");
} else {
textField.setStyleName("color-blue");
}
steps++;
}
}
If you want to apply the logic of color change for all TextFields inside of FieldGroup you can iterate FieldGroup fields in the following way:
for (FieldGroup.FieldConfig fc : fieldGroup.getFields()) {
Component fieldComponent = fieldGroup.getFieldComponent(fc);
if (fieldComponent instanceof TextField) {
TextField textField = (TextField) fieldComponent;
textField.addValueChangeListener(e ->
textField.setStyleName("color-red")
);
}
}
In some cases is common to use same values in different properties, for example (is just an example to show purpose) the following nested rule:
.button-link
{
height:40px;
a
{
line-height:40px;
}
}
The idea is that to vertically center button text line-height and height should be equal.
Is there a way in LESS to "assign a value taken from a diffent property"?
I know that I should use a LESS #variable but in this case is not the same thing and need extra code. Instead should very interesting and useful if I should edit only button's height and then LESS will replaced the same value to line-height
UPDATE:
Another example could be the following:
.button-link
{
color:white;
background:black;
&:hover
{
color:black;
background:white;
}
}
In which "hover" status should invert color and background-color comparing to default state.
This is possible starting with v3 of LESS! Here is the documentation on it.
The example use case they provide ends up with the background-color getting the same value as the color property when compiled:
.widget {
color: #efefef;
background-color: $color;
}
You can´t :(. What i usually do is:
#buttom-height = 100px;
#a-link-height: #buttom-height;
and use that variables in your less declarations. Its a dummy example, i know, but imagine calculated data values from other variables or complex dependencies, proportional paddings/margins... that´s the way i learnt from Bootstrap LESS code.
Had a few problems getting background-image displaying in Firefox, I made it work but was surprised at how bloated the CSS became. It now works great, but I need to replicate base CSS code for multiple images.
Can anyone tell me if it is possible to optimise the CSS classes and minimise the amount of code. I cannot utilize the already used id's, and class='imga p0' doesn't work (where p0 just holds the background-position, becoming p1, p2, p3 .. for each image position).
Thanks in advance for any advice.
a.imga0 {background:url(../images/sprite.png) no-repeat;background-color:transparent;
display:block;width:24px;height:24px;background-position:-288px 0;} /* tick green */
a.imga1 {background:url(../images/sprite.png) no-repeat;background-color:transparent;
display:block;width:24px;height:24px;background-position:-312px 0;} /* cross grey */
a.imga2 { ..... and so on.
Edit:
So this should eliminate the repetition
/* template */
a.imag0, a.imag1, a.imag2 {
display: block;
width: 24px;
height: 24px;
background:url(../images/sprite.png) no-repeat;background-color:transparent;
}
/* specifications */
a.imag0 {
background-position:-288px 0;
}
a.imag1 {
background-position:-312px 0;
}
For one you could create a general selector
a {
background:url(../images/sprite.png) no-repeat;background-color:transparent;
display: block;
}
Which would apply the general style, such as the sprite image.
You could also create a separate class (specify more classes with spaces)
So for example, you could have
<a class="imag0 spriteclass">something</a>
<a class="imag1 spriteclass">something</a>
<a class="imag2 spriteclass">something</a>
And
a.spriteclass {
//again the template, such as the sprite and display type and width
}
Your second option is to list out the selectors you want the css to apply to,
a.imag0, a.imag1, a.imag2... {
// your general css
}
And then like above specify the specific sprite positions and details separately
Adding this just in case some one refers to this post later.
You can generate the most optimized CSS using this below tool.
http://www.spritecss.com/