I’m using vaadin-combo-box#4.2.1 (polymer#2.7.0) and would like to remove the 8px margin bottom for its vaadin-text-field (since it makes the field look too ‘high’ in my app’s layout.
I’ve looked through the elements’ source, but can’t see any custom style to override this style. Can someone enlighten me?
Thanks,
Max.
Have you tried creating a [theme module]
(https://github.com/vaadin/vaadin-themable-mixin/wiki/4.-Scoping-Styles-in-a-Theme-Module)? You can target specific parts of the component with the module. For example:
<dom-module theme-for="vaadin-combo-box" id="small-text-field-style">
<template>
<style>
[part="text-field"]
{
height: var(--lumo-size-s)
}
</style>
</template>
</dom-module>
You can use --lumo-size-s (or any value you want) to make the text-field smaller.
Hope this helps!
Katri
I can’t seem to make this have any effect. I tried in it index.html and also in the element that uses vaadin-combo-box - index.html:
</style>
</custom-style>
<dom-module id="no-margin-bottom" theme-for="vaadin-combo-box">
<template>
<style>
[part="text-field"]
{
margin-bottom: 0;
}
</style>
</template>
</dom-module>
<div id="first_frame">
and my-element.html:
}
</style>
<dom-module id="no-margin-bottom" theme-for="vaadin-combo-box">
<template>
<style>
[part="text-field"]
{
margin-bottom: 0;
}
</style>
</template>
</dom-module>
<div id="container">
If I manually edit bower_components/vaadin-combo-box/src/vaadin-combo-box.html to:
[part="text-field"]
{
width: 100%;
min-width: 0;
margin-bottom: 0;
}
…then it works fine, but I would have to fork vaadin-combo-box to make that stick.
I’m sure I’m missing something…any pointers?
I ended up forking vaadin-combo-box, but that’s not a good solution. Could someone help me figure out what I’m doing wrong?
Text field actually has a padding, not margin. So you should be able to remove the extra space by replacing margin-bottom with padding-bottom.
That’s odd…I forked vaadin-combo-box and made the change I wanted, and it seemed to work as expected:
https://github.com/davidmaxwaterman/vaadin-combo-box/commit/c321110a00a8f46d3b3aef11268a33b130dc736d
Am I confused?
I really want to know how to make that change using this theming system, but I can’t quite grok how it all works or what exactly to do.
Well, at least the latest version of text-field uses padding instead of margin: https://github.com/vaadin/vaadin-text-field/blob/master/theme/lumo/vaadin-text-field-styles.html#L21
Margin should not have any effect. Note, that a VerticalLayout does add margins to the child elements when you have setSpacing(true). But that would be applied on the <vaadin-combo-box> element, not the internal text-field of it.
Removing the margin certainly does have an effect, on the version I’m using anyway.
The margin is set in vaadin-combo-box, not in vaadin-text-field. I’m using a horizontal layout.
Perhaps I’ve been asking the wrong thing, and it has mislead you. I really want to change what style vaadin-combo-box is applying to its vaadin-text-field.
Does any one have any further advice on this? It’d be good to use the ‘proper’ method to make this change.
you could try to remove the margin in every text field =)
but yes, your question is not clear
The change I have made is:
https://github.com/davidmaxwaterman/vaadin-combo-box/commit/c321110a00a8f46d3b3aef11268a33b130dc736d
[part="text-field"]
{
width: 100%;
min-width: 0;
margin-bottom: 0;
}
but I could equally have removed this line:
:host {
display: inline-flex;
position: relative;
padding-top: 8px;
/*>>*/ margin-bottom: 8px; /* <<<< */
outline: none;
color: var(--material-body-text-color);
font-size: var(--material-body-font-size);
line-height: 24px;
font-family: var(--material-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Fix Chrome’s dancing labels */
contain: content;
}
What I’m asking is how to make this happen without forking these elements? Someone alluded to a method of changing the theme with a theme module…which I looked at to try to figure out how that is done, but I can’t see any guides/etc on how that all works. Ideally, I would have liked to have used the Polymer techniques, and override it using a custom property or a mixin.
The change I have made is:
https://github.com/davidmaxwaterman/vaadin-combo-box/commit/c321110a00a8f46d3b3aef11268a33b130dc736d
[part="text-field"]
{
width: 100%;
min-width: 0;
margin-bottom: 0;
}
but I could equally have removed this line:
:host {
display: inline-flex;
position: relative;
padding-top: 8px;
/*>>*/ margin-bottom: 8px; /* <<<< */
outline: none;
color: var(--material-body-text-color);
font-size: var(--material-body-font-size);
line-height: 24px;
font-family: var(--material-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Fix Chrome’s dancing labels */
contain: content;
}
What I’m asking is how to make this happen without forking these elements? Someone alluded to a method of changing the theme with a theme module…which I looked at to try to figure out how that is done, but I can’t see any guides/etc on how that all works. Ideally, I would have liked to have used the Polymer techniques, and override it using a custom property or a mixin.
No one has any clues as to how to make this change without forking the element? I had hoped my latest two posts made it clear what I am trying to do.
Yes, it is clear what you are trying to do.
Sorry about the documentation, that it’s difficult to grasp how these kinds of things can be achieved using style/theme modules.
I set up an example.
Source: https://glitch.com/edit/#!/combo-box-theme-module?path=index.html:15:2
Live: https://combo-box-theme-module.glitch.me
The documentation about style/theme modules can be found at https://github.com/vaadin/vaadin-themable-mixin/wiki
Wonderful! It works!
Thanks very much for that. I can now free myself of my fork 
I thought I’d tried something like that, but I was obviously missing /something/…looking above, it seems I was close, but put the mixin inside my element, rather than outside, up by the links.
Anyway, all good
Thanks again - I owe you one…if only there were still Polymer Summits, since I would buy you a drink 
Yeah, it initially seemed to me that you already had the solution, so I didn’t bother being overly explicit (lazy me)
Happy to help! And something in place of Polymer Summit would be lovely – see you there if that happens!