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

Question

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)

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?

Nihility

Answer 1

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 :)

Joellajoelle

Answer 2

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

Jigger

I doubt it as I have seen this on multiple projects and pc's. – Nihility

I never see this behavior before. Could you provide a code example? – Jigger

The code is just that it uses simple_form and the line above. However I also see this in apps that even other people in other orgs create so I do not believe it is specific to my code and looking at my code will be a distraction. I appreciate best guesses but in this example I'm hoping that someone else who has actually experienced this will be able to shed some light for us. – Nihility

I create one application from scratch with rails 3.0 and simple_form and I don't see any dots under the *. What browser are you using? – Jigger

Multiple browser, multiple platforms. code is <form accept-charset="UTF-8" action="/gorilla_groups" class="simple_form gorilla_group" id="new_gorilla_group" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="1KUd9OIZx/mEhBSz++8AAfIyoj3Mfqiklr4GNAQVCv8=" /></div> <div class='field'> – Nihility

<div class="input string required"><label class="string required" for="gorilla_group_name"><abbr title="required">*</abbr> Name: </label><input class="string required" id="gorilla_group_name" name="gorilla_group[name]" size="50" type="text" /></div> </div> <div class='actions'> <input id="gorilla_group_submit" name="commit" type="submit" value="Save" /> </div> </form> – Nihility

I didn't see anything strange on this HTML. You are the first person that report something like this. I never see theses three dots under the * – Jigger

I have voted to close this (my own q) as others don't see it. – Nihility

Answer 3

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;
  }

Ketchum

While this answer may be correct, leaving some explanation would improve this question in a long run. – Flagging

Answer 4

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.

Heroics