show "*" (required) symbol left of the text field.

I see “*” symbol is displayed on the right side of Text Field when I use setRequired(true).
how can i move this symbol to the left?

Well, there is no nice way in the API. You can do a CSS trick in a custom theme:

.v-formlayout-captioncell .v-caption {
    direction: rtl;
}

this is an interesting idea, but didn’t help. I’m not using Forms API, I want to provide this to a regular Text Field.
I tried changing to

/* Show “*” symbol on the left of Text Fields */
.requiredfield {
direction: rtl;
}

and then

field = new TextField();
field.setDescription("Key: " + property.getKeyName());
field.setReadOnly(isReadOnly());
field.addStyleName("requiredfield");
  • not changes in the behavior.

btw, forum keeps “unsubscribing me” so I don’t get any email updates on threads :frowning:

You are not setting setRequired(true) there. The required indicator and the caption are both inside the v-caption div so the RTL setting swaps their positions:

The Caption*
(or something like that).

Unfortunately HTML is not allowed in captions so there isn’t really other way if you want to have a different color for the indicator.


Others have noticed
the same forum problem as well. Unfortunately it’s a Liferay issue and we can’t fix it very easily for our environment. You could add your voice there. Meanwhile, the “Recent Posts” and “My Posts” tabs are the most useful tools.

I do call setRequired(), I forgot to publish this piece the last time:

  @Override
  public void setRequired(boolean required) {
    field.setRequired(required);
    if (required) {
      field.addStyleName("requiredfield");
    } else {
      field.removeStyleName("requiredfield");
    }
  }

here’s the generated code:

*

note: my text field does not have a label

Ah, sorry, I did not read your message carefully enough. I though you wanted the indicator left of the caption. Having the indicator right of the component is only possible with some layouts if there is no caption.

That case could be a bit trickier as RTL does not probably work there as there’s the float attribute. If you have, for example VerticalLayout, you could try something like the following:

.v-verticallayout > div > div > div {
    float: right;
}

this is what I’m trying achieve - see the screenshot
12039.png

Hi Alexey,

did you succeed on this? I need the same feature as you : positioning the indicator on the left of the field, not on the right of the caption.

Christophe

Hi ,
Did anyone succeed in this attempt?Currently for me within a grid layout there is a label and text field in the same row. Text field is set required. So this puts the “*” symbol on the right side of the text field. I want it to be on the left side of the text field i.e on the right side of the label.

Please let me know how to do this. I have attached a screen shot of currently how it is being displayed.

Thanks,
Pooja
13228.png

Hey guys !

I am also facing same problem ,while writing the code and putting the " * " symbol in Grid layout .Here is issue details :

  1. " * " coming at right side of text field.

with regards,
vaadin fever,
13556.jpg

I am facing same issue :-(:(:(:(:(:(:(:(:(:(:(:(:(:(:frowning:

Not working if i using css :(:(:(:(:(:(:(:(:(:(:(:(:(:(:(:(:(:(:(:(:(:(:(:(:(:(:(:(:(:(:(:(:frowning:

Hey Guys ! ! ! ! ! !

Anybody got answer for my question…please,help me !

You can work it out with css.
unique_selector_id_of_label:after
{
color: #e32;
content: ’ *';
display:inline;
}

Try this worked for me.

sure ,I will try.Let me check…

thanks,
pooja.

Has anyone solved this??

I’m finding it hard to understand how such basic and yet so important issue in UI/UX is not addressed here or anywhere on the forum/web.

My UI looks bizare when some of the ‘*’ required markers are positioned on the right of the field (because its caption null???) and some are on the left - only because they have a non-null caption (!!) I
Is this a joke? why is it implemented that way in the first place??
An don’ tell me to use a different layout just for this - My infra code is based on Vertical/Horizonta/Form/Grid Layouts, I really don’t want anything else just for this tiny matter…


Vaadin Team, please response to this
, and provide with a sensible solution.


This is not a minor issue

- this is the face of the UI I’m delvering to customers with the Vaadin framework, and it makes it look very mediocre - not to talk about the faces of people when I tell them it’s almost impossible to get the damn “*” to appear on the left of the field even if its caption is not present.

Hi Eyal,

I agree, it is quite embarrassing that there’s no real control over these issues, except hacking your way through the abstractions with either GWT or CSS.

But anyway, here’s a workaround I think will work for your situation:

// Java
TextField field = new TextField();
field.setRequired(true);
field.addStyleName("required-indicator-on-left");


// CSS
.v-slot-required-indicator-on-left > .v-has-caption {
  position: relative;
  padding-left: 1em;
}

.v-caption-required-indicator-on-left {
  position: absolute;
  left: 0;
}

Edit: The above only works for Vaadin 7.