0

I figured that this would be a common need, but have been unsuccessful in finding a solution. I followed this ASCIIcast by Ryan Bates http://railscasts.com/episodes/302-in-place-editing?view=asciicast and now have functional in place editing on my website. However, I think it is not intuitive that these records are editable at all, as they just appear as a plain text representation of the current record value until you click them. I want something so that the select dropdown shows up by default like it would in a normal form as shown in the image. Is there anyway to do this using best_in_place or rest_in_place? I would like to have this show all the time

ohhh
  • 972
  • 9
  • 24
  • A common problem with questions on SO is that they expect the reader to go off and watch a video before looking at the question. Generally, people can't be bothered to do this. Also, it's hard to tell from that picture which aspect of the select you want to change. Do you mean you want it to have two little arrows in it but not actually be editable? – Max Williams Aug 05 '14 at 14:34
  • I can see how that could be frustrating, but there is always the ASCII cast that just has all images: http://railscasts.com/episodes/302-in-place-editing?view=asciicast, you are correct that I should have just linked that. Currently the editable field is just plain text on the screen with the current value and only turns in to a drop down when you click on it. I want it to ALWAYS look like it does in the picture above. Does that make more sense? – ohhh Aug 05 '14 at 14:44
  • Which gem/jquery plugin/whatever are you using to get that styling on the select on focus? – Max Williams Aug 05 '14 at 14:54
  • OIC, the BestInPlace gem, https://github.com/bernat/best_in_place – Max Williams Aug 05 '14 at 14:58
  • Bootstrap 2.3.2 for styling and for the actual js power I am using https://github.com/bernat/best_in_place/ – ohhh Aug 05 '14 at 14:59

3 Answers3

1

I know it is not exactly the answer you are looking for but you can style the best_in_place values using the .best_in_place class.

I did something like this on my website, which helps showing that the value is editable:

.best_in_place {
    padding-right: 18px;
    background-image: url('*/ link to an edit icon /*');
    background-size: 15px auto;
    background-position: right center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.best_in_place:hover {
  background-color:#eeeeee;
}
NicoFerna
  • 603
  • 3
  • 11
0

What i think you want to do is to find the styles that are applied to the hover state of the element, and copy them to the normal state of the element too.

In chrome inspector:

  • Right click on the select tag and choose "Inspect element"
  • Right click on the element as seen in the "Elements" tab and choose "Force element state" and then "hover"

On the right of the inspector now you should see the styles that are applied to the :hover state of the element. Copy these into your stylesheet and remove the ":hover" part from the end of the rule. You might need to add some extra selectors to the rule to make sure you don't do this for all selects across your entire site.

Max Williams
  • 32,435
  • 31
  • 130
  • 197
  • Forcing any of active, hover, focus, visited does not yield a drop down menu. I do not know that much javascript but my assumption is that on an onclick event it is changing the element somehow into a drop down. [image of problem](http://imgur.com/Muj7FPy) – ohhh Aug 06 '14 at 13:27
0

A dropdown is the default behavior for best_in_place if your original form input is via radio buttons. Otherwise, you can use a :colllection to at least validate the new data entry. e.g. in haml, updated answer must be red, green or blue:

.flex1=best_in_place :color, :type => :select, :collection => (["red","blue","green"])
dctalbot
  • 113
  • 1
  • 9