I'm trying to find a equivalent to jQuery.css() method
In my specific case, I want to set a background image for a canvas.
in jQuery, it would be:
$("#canvas").css("background-image", "url(./assets/gridPattern.png)");
It is possible to acess CSS properties via the style attribute in Element
query("#canvas").style.backgroundImage = "url(./assets/gridPattern.png)";
Related
I read the CSS styling section (https://vaadin.com/docs/v14/flow/styling/styling-components) and it mentions that global CSS doesnt affect the 'INPUT" field in the shadow DOM, So styling has to be added to shdaow DOM, But unfortunately no where does it explicitly say HOW to add the styling to the shadow DOM. Note. im using mainly Flow pure java with a bit of CSS.
I tried retrieving the elementt from component then retrieving the shadowRoot, then from root, retrieve the 'input' element to add styling to it, unfortunately that didnt work, shadowroot was null (this code executed from the onAttach() method in the view class)
private void setTextAlignCenterForTextFields(TextField textField) {
//find the internal 'Input' and set the styling to text-align=center, unfortunately
// you cant do that with global css, since the 'input' element is in shadow root
textField.getElement()
.getShadowRoot()
.get()
.getChildren()
.filter( elem -> "INPUT".equalsIgnoreCase(elem.getTag()))
.forEach(inputElem -> inputElem.getStyle().set("text-align", "center"));
}
Any ideas would be appreciated. I'm using Vaadin version 14.5.1.
There's already a theme variant to align the text
centerTextField.addThemeVariants(TextFieldVariant.LUMO_ALIGN_CENTER);
see https://vaadin.com/components/vaadin-text-field/java-examples/theme-variants
As for how to attach CSS to shadow root, basically use themeFor, see https://vaadin.com/docs/v14/flow/styling/importing-style-sheets/#component-styles
You can use CSS to target the value part:
.textfieldClass::part(value) {
text-align: center;
}
This video explains styling CSS parts: https://youtu.be/Y0uxb4ga44Y
I'm using vaadin-combo-box and I have a problem. I have no clue how to customize look and feel of scrollbars for the dropdown. I read about styling parts and I know how to do it but this seems to be impossible. Cant figure out the way to select #scroller element because it has been design not to be a "part" to style. However that is the only way I can think of to apply custom style to dropdown scrollbars. How can that be accomplished?
Thanks in advance for help.
#Update
Turns out that as of today there is no way of having customized styling on scrollbars for vaadin-combo-box component. Element responsible for scrolling resides inside contents shadow DOM and is inaccessible from outside nor its going to inherit style implemented on the parent part [part="content"]
The dropdown part is called vaadin-combo-box-overlay, see: https://vaadin.com/components/vaadin-combo-box/html-api/elements/Vaadin.ComboBoxOverlayElement And it is available for styling.
This allows to style the dropdown to some extent, but there is additional shadow root, that prevents to apply e.g. ::-webkit-scrollbar styles on #scroller element.
So the last option would be to make a copy of the vaadin-combo-box html file in right place in frontend directory. It happens so that that file will be used instead of the one coming from webjar. Then you can edit that html file directly. Of course this means that if there are changes in future versions of vaadin-combo-box, you need to copy again, re-apply changes
Is there some rule of thumb to be followed while deciding to implement custom element as NgComponent or NgDirective?
What are the issues to keep in mind while deciding to choose either of them?
If you want to add functionality/behavior to existing tags/elements you use a directive (like ng-class or ng-hide).
You can apply a directive to different tags.
To create a new element/tag you create a component (like accordion, carousel, modal, ...).
A component is a new custom element that can have a template that defines its shadow DOM content.
You can use a directive to dynamically add/remove html content too, but with a component you can create new elements that have a clear boundary between inside and outside.
A component has it's own scope that is not part of the application scope hierarchy.
You can't easily reach inside a components content.
Html generated from a directive is like any other html tags. You have transclusion with components (I think someone is working on components without shadow DOM and transclusion like in Angular.js but I don't know how far this is and how this will look like.)
You can use directives inside a component, and a component inside a component.
I'd like to use several buttons on single page, but I want to have one group which has one style (e.g. red color) and other one with different style (e.g. gray background and red forecolor).
Is it somehow possible?
Yes you can. The way to do this would be to use the css scope option when downloading the ui - http://jqueryui.com/download/
Simply include the framework, and the include both stylesheets with the different styles. Make sure to apply different css scopes (e.g. .light-style and .dark-style).
Next, in your html, whenever you show the buttons, add the appropriate CSS scope to the parent element so that the correct style is picked up.
You can also manually combine the two stylesheets so that you save space. This is assuming you only want the two differing button styles only.
Read the theming section here: http://api.jqueryui.com/button/
You can always add extra class to change the style. So after calling button() on an element, you can:
$(element).removeClass("ui-button-text");
$(element).addClass("ui-button-text-2");
and of course you need to define your own CSS class for this:
.ui-button-text-2 { color: red; }
This is of course clumsy, because you need to use two calls instead of a single button() call. But jQuery can be extended - you can simply create a $.themedbutton() method that accepts extra parameters...
I would like to programmatically set a border around a Form component in Java. How can I do this without having to edit the css style sheet?
You could wrap the form with a Panel component, which has a border defined already. Otherwise, not much alternatives than just using CSS.
One option, if you wish to stay inside the server environment, is to use the CSSInject add-on and add the border using that (you still need to write CSS, but you can do it on the server in a Java file and not inside a regular CSS file).
Vaadin Flow — Style::set to specify CSS
In Vaadin Flow (Vaadin versions 10 and later), you can conveniently set CSS for a widget or layout programmatically. No need to edit separate CSS files, even though styling with CSS files is the recommended way.
On your widget/layout, call getStyle to retrieve the Style object.
On that Style object, call set to pass the name and value of your CSS property.
For example, I find setting a bright colored border on my nested layouts quite helpful for debugging.
myVerticalLayout.getStyle().set( "border" , "6px dotted DarkOrange" ) ;
You can see this in action with this screenshot on my Answer to another Vaadin question here: