CODEWITHSUNDEEP
cssvaadinvaadin-flow
S. Doe
S. Doe

Reputation: 785

Remove dashed border for Vaadin 14 readonly textfields

A read-only TextField has a dashed border in Vaadin 14, like this one:

Vaadin 14 TextField readonly with dashed border

I want to remove the dashed border. For some TextFields (ideally only those with a special CSS classname - but I guess that the extension of the CSS selector is no problem later).

Therefore I created a file textfieldstyles.css in [projekt]/frontend/styles/ with this content:

[part="input-field"]::after {
border-style: none;
border-width: 0px;
border-color: white;
/* does not change anything: border: 0px none white; */
}

and added an annotation at my Vaadin-Java-component:

@CssImport(value = "./styles/textfieldstyles.css", themeFor = "vaadin-text-field")

This does not (fully) work as expected: my CSS code is part of the element's style (yeah, success :) ), but only AFTER the dashing style (oh no :( ). The result is still a dashed border. Here is a screenshot of Firefox inspector:

my CSS is inserted after the generated

How can I rank my styles higher than the standard Vaadin styles?

Upvotes: 2

Views: 2037

Answers (3)

Joseph Hui
Joseph Hui

Reputation: 587

I am trying to doing something similar and found this "official" way. You can add the following CSS in the index.html, which will change the border to a thin grey one instead of removing the dashed.

<dom-module id="read-only-field-styles" theme-for="vaadin-text-field">
  <template>
    <style>
      :host(.read-only) [part="input-field"]::after {
        border-style: solid;
        border-width: thin;
        border-color: grey;
      }
    </style>
  </template>
</dom-module>

Then, add the class name "read-only" to all your vaadin-text-field.

  <vaadin-text-field class="read-only" label="XXX" id="xxx" readonly></vaadin-text-field>

Upvotes: 2

S. Doe
S. Doe

Reputation: 785

The problem (and the solution) was already in my question: "[...] I guess that the extension of the CSS selector is no problem later [...]".

Everything works fine when I use a more specialized CSS selector in [project]/frontend/styles/textfieldstyles.css:

:host(.my-special-classname) [part="input-field"]::after {
    border-style: none;
    border-width: 0px;
    border-color: white;
}

The TextField of course has to get that class name:

textField.addClassName("my-special-classname");

Then Firefox shows the order I wanted to have and the Vaadin 14 readonly TextField has no dashed border any more:

Vaadin 14 readonly TextField without dashed border

Upvotes: 0

avocadatoria
avocadatoria

Reputation: 523

There are a few ways to accomplish what you want; most involve !important, like:

border-color: transparent !important;

It's easy to abuse !important to brute-force styles you want, but in this case, seems like an appropriate use. Btw you could also override other border-* CSS attributes, but just one will do it, as in my example above. Also, avoiding changing border-width means not changing layout at all; the button retains its dimensions (including border width) by just making the border invisible (transparent).

Hope this helps!

Upvotes: 2

Related Questions