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:
Related
We have an Angular project, with Material and we're having some issues with overriding styles.
For example, if we want to change the border-radius globally on <mat-card>, we currently need to add important to the styles:
.mat-card { border-radius: $some-var !important; }
This seems to me to be caused by the material styles loading after our own custom styles. At least according to "traditional" CSS standards. So usually you could just change the load order around, and the last loaded styles would overwrite the previous.
Is there a way to achieve this? Or how are we supposed to style these kinds of elements, without adding !important all over?
You are not really supposed to "style these kinds of elements" - that's not what Angular Material is about. But some customization can be done - and a guide is available: https://v6.material.angular.io/guide/customizing-component-styles.
You especially need to understand how style is encapsulated and dynamically applied. You can control when the global Angular Material style sheet is loaded in the "traditional" way, but you cannot control when all component style is applied because some of it is dynamic. If you hope to completely restyle everything - you should probably consider a different library as it is not always merely a matter of redefining class properties.
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
I am starting to make my Vaadin web app responsive. Reading Vaadin docs, I managed to make a CssLayout flexible such that an image is shown either to the left of a text section or in a separate row depending on available width.
Now I want to make my login form flexible. By default, captions are moved to the left of the fields. How can I achieve that the captions are moved to the top of the fields when a certain width is reached? Is that even possible with FormLayout?
Can't really imagine that it is possible with CSS because the FormLayout is rendered as HTML table. If so, what is a simple alternative?
That is not possible with FormLayout. Structure of FormLayout is not flexible. Also there is not simple alternative for that. You can use CssLayout or create your own component container.
Starting point for this can be extending AbstractComponentContainer as described in Creating a simple component container
I have some experience with GWT . In GWT , widget.setVisible() method will add style="display:none" style to widget. But component of vaadin wouldn't . I checked with firebug , I can't see my component while set component's visible to false. Why ?
I think that should be also have hidden style instead of not containing. I reallize that vaadin's codes were server side. But sometimes , if I would like to just hidden (set style display to none) , has there anyway to accomplish this instead of using css ?
I don't understand concept of what different between without adding component and setVisible(false) ?
As you already noticed, an invisible component is not transferred from server to browser, and from browser's point of view the component doesn't exist. This approach has to benefits:
Less data to transfer from server to client
Security: User cannot inspect invisible components' generated HTML with tools like Firebug because those doesn't exist on the browser.
So basically from browser's point of view it's the same thing that you don't add it to the UI at all. But usually it's just easier to toggle component's visibility instead of adding and removing it from its parent.
If you want to hide components with CSS, you can do it by defining your own theme and adding a style for that there. Then just apply the style for the component you want to hide by using the addStyleName method.
SETVISIBLE Sets the visibility of the component.
Visible components are drawn in the user interface, while invisible ones are not. The effect is not merely a cosmetic CSS change - no information about an invisible component will be sent to the client. The effect is thus the same as removing the component from its parent.
So as the documentation says invisible components are not not visible.
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.