Rails simple_form gives dots under stars for required fields, better way to remove them?

In many of my projects I use simple_form and love it. However one really strange quirk that I find is that I get 3 small dots underneath the * it supplies for required fields.

I have to get around it with:

= f.input :name, :label => '*', :required => false # Display purpose only (it is required)
开发者_如何学C

Which is messy because the field is required, so this code looks ugly.

Is there a better fix for what seems like a common problem?

I think it's from CSS, if you are useing blueprint, "abbr and accronym" tags have a border-bottom: 1px dotted black style.

Try add to your css file the next line :

abbr, accronym{ border-bottom: 0px; } /*try adding !important  after 0px if doesn't work*/

Wish helps :)

It seems like CSS stuff. See what are the properties for abbr tags on your CSS.

Simple form adds an abbr with a border-bottom. You can remove the border-bottom just with css, but you also need to override the text underline property (which I think comes from default navigator styles)

So, this small css block should work :

  form abbr[title] {
    border-bottom: none !important;
    text-decoration: none !important;
  }

There's another solution that I found, in case anyone else comes across this question in the future. I responded to a similar issue that was closed on simple_form with this:

I had this issue too, and it would be pretty easy for the simple_form maintainers to change, so it might be worth looking into. At the very least, I'd like to help if someone else runs into the problem using the gem combination I'm using. On a new rails 5.2.3 app, with bootstrap 4.3.1 and simple form 4.1.0, I had the same issue with an ellipses under the asterisk.

I found a way to solve it, since it actually only happens when using the tag. In locales/simple_form.en.yml, if you remove mark: '', and change html: '' to html: '*', this removes the ".." that appears under the asterisk. This occurs because there's an included style with bootstrap that adds an underlined dotted border to any abbreviation tags, which allow the user to select that text in order to view the rest of the word.