Как я могу абсолютно позиционировать связанный image_tag?

Question

Я новичок в рельсах и javascript, у меня есть таблица мест, каждое из которых относится к типу и области.Они отображаются как частичные на странице индекса, а также у каждого есть свой значок на карте слева от экрана.

Я только что добавил новую таблицу mapicons, в которой просто хранится изображение, загруженное с помощью скрепки, в мое приложение, чтобы у каждого venuetype был свой значок.Все это прекрасно работает, однако javascript, который я использовал для размещения значков на карте, разрывается, когда я включаю новый mapicon.

рабочее размещение mapicon (_venue.html.erb)

<%= link_to venue do %>
  <div class="venue_partial">    
    <span class="venue_partial_name"><%= venue.name %></span>    
    <div id="venue_map_icon_<%= venue.id %>" class="venue_map_icon" style="position:absolute;"></div>
  </div>
<% end %>

<script type="text/javascript">
  document.getElementById("venue_map_icon_<%= venue.id %>").style.left= "<%= venue.iconleftpx %>px";
  document.getElementById("venue_map_icon_<%= venue.id %>").style.top= "<%= venue.icontoppx %>px";
</script>

Правильно отображает значок карты на карте, но в виде черных звезд, как я установил в css.

неправильное размещение карты (_venue.html.erb)

<%= link_to venue do %>
  <div class="venue_partial">    
    <span class="venue_partial_name"><%= venue.name %></span>    
    <div id="venue_map_icon_<%= venue.id %>" <%= image_tag venue.venuetype.mapicon.mapicon.url(:mapicon), :style => "position:absolute;", :class => "venue_map_icon" %></div>
  </div>
<% end %>

<script type="text/javascript">
  document.getElementById("venue_map_icon_<%= venue.id %>").style.left= "<%= venue.iconleftpx %>px";
  document.getElementById("venue_map_icon_<%= venue.id %>").style.top= "<%= venue.icontoppx %>px";
</script> 

Отображает правильные карты, которые я загрузил и назначил каждому типу venuetype, но они расположены в верхнем правом углу их части, а не на карте в левой части экрана.

Надеюсь, я хорошо спросил, любые уточнения, пожалуйста, спросите.Спасибо за любую помощь, она очень ценится!

РЕДАКТИРОВАТЬ

Вот пара скриншотов, которые, я надеюсь, помогут, во-первых, каковы в настоящее время mapicon.Частицы места проведения обозначены как Tester1, Tester2 и т. Д. С большим цветным значком слева от имени, а серые буквы под именем - это тип (Тип 1, 2 или 3).А значки карты - черные звезды слева, расположенные абсолютно с верхним и левым значениями, взятыми из соответствующих записей места проведения.

Второй снимок экрана - когда я меняю кодкак показано выше, части показывают то же самое, но mapicon вместо того, чтобы быть черными звездами, показывают правильно как меньшие цветные квадраты, но не размещают правильно.Они придерживаются правого верхнего угла своих собственных мест проведения.

Это то, что я хочу, чтобы это отображалось как: (это макетированное изображение)

CSS для mapicons просто:

.venue_map_icon {
width: 19px;
height: 18px;
padding: none;
margin: none;
background-image:url(/images/mapicon.png);
border: none;
}

  .venue_map_icon:hover {
  background-image:url(/images/mapicon_hover.png);
  }

Модельные отношения

Места проведения

class Venue < ActiveRecord::Base
  belongs_to :venuetype
end

Venuetypes

class Venuetype < ActiveRecord::Base
  has_many :venues
  belongs_to :mapicon
  has_attached_file :icon,
    :styles => {
      :thumb=> "100x100>",
      :small  => "150x150>",
      :medium => "300x300>",
      :large =>   "400x400>" },
      :default_url => '/images/noimage.png'
end

Mapicons

class Mapicon < ActiveRecord::Base
  has_many :venuetypes
  has_attached_file :mapicon,
    :styles => { 
      :large => "640x480", 
      :medium => "300x300", 
      :thumb => "100x100", 
      :mapicon => "20x20" }
end

Answer 1

Я не вижу других CSS для ваших элементов, но обратите внимание, что position: absolute является абсолютным только по отношению к «ближайшему предку», который имеет позицию, которая не является типом по умолчанию (static).

Итак, в вашем случае вы можете сделать так, чтобы

<div class="venue_partial">   

имел position: relative, но просто не устанавливайте top или left, чтобы он оставался там, где он есть.является.Если вам нужно сделать его абсолютным по отношению к другому предку, вместо этого сделайте соответствующий элемент position: relative.

Answer 2

Я нашел свою ошибку!

Что было:

<div id="venue_map_icon_<%= venue.id %>" <%= image_tag venue.venuetype.mapicon.mapicon.url(:mapicon), :style => "position:absolute;", :class => "venue_map_icon" %></div>

Должно быть:

<div id="venue_map_icon_<%= venue.id %>" style="position:absolute;" <%= image_tag (venue.venuetype.mapicon.mapicon.url(:mapicon)), :class => "venue_map_icon" %></div>

Answer 3

Опять же, трудно не увидеть ваш CSS, но я использовал этот кусочек кода для своего собственного "пользовательского" позиционирования, которое может меняться с другим разрешением или даже с событием onRefresh

function fixBox() {

    var child = document.getElementById('dropdown_child');
    var parent = document.getElementById('dropdown_parent');
    var curLeft = 0;
    if(parent.offsetParent) {
        do {
          curLeft += parent.offsetLeft;
        } while(parent = parent.offsetParent)

    }
    parent = document.getElementById('dropdown_parent');
    var w = child.offsetWidth - parent.offsetWidth;
    var x = curLeft - w;
    child.style.left = x;



}

Можно свободно изменять дляВаше собственное использование, в данном конкретном случае, делает дочерний элемент div выровненным по праву с родительским элементом div.Если я правильно понимаю, это должно помочь вашему делу.