Can I put a Rails partial between two arrows?

Question

So, I have a rails partial (an image of a car) that I want to put between two arrows ("<" and ">").

Here's my haml:

 .col-sm-12
   <
   = render partial: 'vehicle_image', locals: { quotation_request: quotation_request } 
   >

The problem I'm having is that I can't get the two arrows to show up on the same row as the image. Any ideas on how this can be fixed?

try `= "< #{render partial: 'vehicle_image', locals: { quotation_request: quotation_request }} >"` — Md. Farhan Memon, May 30 '17 at 06:43
thanks, but that didn't work, the image doesn't render now, I get "< >" — MarisolFigueroa, May 30 '17 at 06:46
I did that and the image renders now but the arrows and the image still aren't lining up in the same row — MarisolFigueroa, May 30 '17 at 06:49
Make the image 'display: inline' or 'display: inline-block'? — user8018795, May 30 '17 at 07:07

Tinus Wagner · Accepted Answer · 2017-05-30T06:57:47.130

5

You could probably assign the arrows to some sort of element instead and lay things out like this

.row
  .col-sm-1.text-right
    <
  .col-sm-10
    = render partial: 'vehicle_image', locals: { quotation_request: quotation_request } 
  .col-sm-1.text-left
    >

You may have to do a bit of CSS to reduce the paddings/margins so that it that arrows end up where you want them exactly.

I just attempted it on a personal project using:

   .row
     .col-lg-1
       %h1
         <
     .col-lg-8
       = link_to place_path(place) do
         = image_tag place.main_image.url(:medium), class: 'img-responsive img-place', alt: place.name
     .col-lg-1
       %h1
         >

And got roughly this result after a bit of margin tweaking:

edited May 30 '17 at 06:57

answered May 30 '17 at 06:50

Tinus Wagner

927
1
7
15

2

actually, when I changed the arrows to col-sm-2 and the image to col-sm-8, it worked, thanks! – MarisolFigueroa May 30 '17 at 07:06
glad to hear it :) You will probably have to tweak some CSS to get it fitting in a col-sm-1, perhaps the image exceeds the width of the div (e.g. it's not responsive). – Tinus Wagner May 30 '17 at 07:07
as a followup question, do you have any idea how to vertically center the arrows? – MarisolFigueroa May 30 '17 at 08:02
looks like there's a bootstrap class for that too :) https://stackoverflow.com/questions/42983183/vertically-center-content – Tinus Wagner May 30 '17 at 08:46
1

alternatively it may just be a case of playing with `padding-top` and `padding-bottom` – Tinus Wagner May 30 '17 at 08:47
the vertical-center thing didnt work, but adding padding to the top did! thanks again! – MarisolFigueroa May 30 '17 at 08:54

Can I put a Rails partial between two arrows?

1 Answers1