My second answer does not display the arrow up

Question

My second answer does not display the arrow up

Navigation

#1 by (2 votes)

0

I have the view show where I show my answers to the questions and can vote for them, for my first answer I display the arrow correctly, but for the second answer or others just display the counter.

show.html.erb:

<div class="container">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-1">
            <h2 class="title-question"><%= @question.title %></h2>
        </div>
    </div>
    <div class="questions">
        <% if user_signed_in? %>
        <div class="row">
              <div class="col-sm-1 col-sm-offset-1">
                    <% vote = Vote.voted_by?(current_user,  @question) %>
                <% if vote %>
                      <%= link_to question_vote_path(@question, vote),  remote: true, method: :delete, class: "question-upvote upvote-active" do %>
                          <span class="upvote-arrow"></span>
                          <span class="upvote-count"><%=   @question.votes.count %></span>
                      <% end %>
                <% else %>
                    <%= link_to question_votes_path(@question), remote: true, method: :post, class: "question-upvote" do %>
                            <span class="upvote-arrow"></span>
                        <span class="upvote-count"><%= @question.votes.count %></span>
                    <% end %>
                <% end %>
                </div>
                <div class="col-sm-8 body-show-question">
                    <span> <%= markdown(@question.body) %> </span>
                    <span class="comments">
                     <%= render partial: "comments/comments", locals: {commentable: @question} %>
                    </span>
                     <%= render partial: "comments/form", locals: {commentable: [@question]} %>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-8 col-sm-offset-1">
                        <h2>(<%= @question.answers.count %>) Respuesta(s)</h2>
                </div>
            </div>
            <% @question.answers.each do |answer|  %>
                <div class="row">
                  <div class="col-sm-1 col-sm-offset-1">
                        <% vote = Vote.voted_by?(current_user, answer) %>
                    <% if vote %>
                          <%= link_to question_answer_vote_path(@question, answer), remote: true, method: :delete, class: "question-upvote upvote-active" do %>
                              <span class="upvote-arrow"></span>
                              <span class="upvote-count"><%= answer.votes.count %></span>
                          <% end %>
                    <% else %>
                        <%= link_to question_answer_votes_path(@question, answer, vote), remote: true, method: :post, class: "question-upvote" do %>
                                <span class="upvote-arrow"></span>
                                <span class="upvote-count"><%= answer.votes.count %></span>
                        <% end %>
                    <% end %>
                    </div>
                <div class="col-sm-8 body-show-question">
                        <span> <%= markdown(answer.body) %> </span>
                        <span class="comments">
                             <%= render partial: "comments/comments", locals: {commentable: answer} %>
                        </span>
                           <%= render partial: "comments/form", locals: {commentable: [answer.question, answer]} %>
                    </div>
                 </div>
        </div>  <!-- end  class question-->
       <% end %> <!-- end do |answer|-->
           <div class="row">
                <div class="col-sm-8 col-sm-offset-1">
                    <%= render partial: "answers/form", locals: {question: @question} %>
                </div>
            </div>
        <% else %>
            <div class="row">
                <div class="col-sm-1 col-sm-offset-1">
                    <div class="question-upvote">
                        <span class="upvote-arrow"></span>
                        <span class="upvote-count"><%= @question.votes.count %></span>
                    </div>
              </div>
              <div class="col-sm-8 body-show-question">
                    <span> <%= markdown(@question.body) %> </span>
                    <span class="comments">
                        <%= render partial: "comments/comments", locals: {commentable: @question} %>
                    </span>
                </div>
          </div>
            <div class="row">
                <div class="col-sm-8 col-sm-offset-1">
                    <div>
                        <h2>(<%= @question.answers.count %>) Respuesta(s)</h2>
                    </div>
                    <% @question.answers.each do |answer|  %>
                        <div class="body-answer">
                            <span> <%= markdown(answer.body) %> </span>
                            <%= render partial: "comments/comments", locals: {commentable: answer} %>
                        </div>
                    <% end %>
                </div>
            </div>
    </div>
<% end %>
</div>

question.scss:

// Place all the styles related to the questions controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

body {
  background-color: #FAFAFA;
}

.title-question {
  text-align: justify;
}

.body-show-question {
  margin-top: 20px;
  margin-left: -60px;
  display: block;
  position: relative;
  float: left;
  text-align: justify !important;
}

.comments {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 20px;
  text-align: justify;
  font-size: 9pt;
}

.comments_signout {
  display: block;
  text-align: justify !important;
  margin-left: -60px;
}

.questions {
  .button-ask-question {
    text-align: right;
    margin-bottom: 20px;
  }

  .question-upvote {
    position: relative;
    float: left;
    text-align: center;
    text-decoration: none;
    margin-left: -35px;
    margin-right: 20px;
    padding: 5px;
    width: 35px;

    .upvote-arrow {
      border-bottom: 9px solid #534540;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-top: 9px solid transparent;
      left: 40px;
      position: absolute;
      top: 0;
    }

    .downvote-arrow {
      border-bottom: 9px solid transparent;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-top: 9px solid #534540;
      left: 10px;
      position: absolute;
      top: 0;
    }

    .upvote-count {
      display: block;
      color: #303030;
      font-size: 14px;
      font-weight: bold;
      line-height: 1;
      margin-top: 18px;
      margin-left: 37px;
    }

    &:hover .upvote-arrow {
      border-bottom-color: #F04500;
    }

    &.upvote-active {
      .upvote-arrow {
        border-bottom-color: #F04500;
      }

      .upvote-count {
        color: #F04500;
      }
    }
  }

  .question-details {
    margin-bottom: 5px;

    .question-title a {
      color: #F04500;
      font-size: 21px;
      line-height: 1;

      &:focus,
      &:hover {
        color: #FE9A2E;
        text-decoration: none;
      }
    }

    .data {
      margin-top: 10px;
      font-size: 21px;
      line-height: 1;
    }

    .data-label {
      margin-top: 15px;
    }

    div.col-sm-1.data {
      text-align: center;
    }
  }

  h2.question-title {
    margin-top: 0;
  }

  .body-text {
    text-align: justify !important;
  }

  hr {
    margin-top: 10px;
    margin-bottom: 10px;
    border-color: #C9C5C5;
  }

  .product-comments {
    float: right;
    color: #CCC;
    padding: 10px;

    .glyphicon {
      font-size: 21px;
    }

    .comment-count {
      margin-left: 15px;
      font-size: 18px;
      vertical-align: text-bottom;
    }
  }
}

.product-page {
  .product-header {
    background: #303030;
    color: #FAFAF2;
    text-align: center;
    padding: 100px 25px;
    margin-top: -20px;
    margin-bottom: 30px;

    h1 {
      font-size: 32px;
      margin-top: 0;
    }

    p {
      font-size: 18px;
      color: #DDD;
      margin-top: 15px;
      margin-bottom: 40px;
    }

    .btn-primary {
      font-size: 18px;
      font-weight: bold;
    }

    .actions {
      margin-top: 30px;

      a {
        color: #CCC;
        font-size: 21px;
        margin-right: 5px;

        &:hover {
          color: white;
        }
      }
    }
  }

  .votes {
    margin-bottom: 40px;
    padding: 0 25px;

    h2 {
      color: #666;
      font-size: 16px;
      margin-bottom: 20px;
    }

    img {
      width: 40px;
    }
  }

  h2 {
    color: #666;
    font-size: 16px;
    margin-bottom: 20px;
  }

  img {
    width: 25px;
    margin: -3px 10px 0 -3px;
  }
}

.form-comments-answer {
  margin-top: 15px;
  margin-bottom: 15px;
}

.body-answer {
  margin-top: 60px;
  margin-bottom: 30px;
  text-align: justify;
}

html5 css3 ruby-on-rails

asked by García Henry 30.10.2017 в 04:10

source

1 answer

How to pass the content of a variable from one if (add) to another variable of another if (load)? New in python: What does or does not affect "if __name__ == '__main__':" [duplicate]

score 2 · Accepted Answer

The nesting of the div is incorrect, which causes the div to have an erratic behavior since they do not close when they should; ordering the code you can sort and / or eliminate the </div> left over:

<!-- app/views/questions/show.html.erb -->

<div class="container">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-1">
            <h2 class="title-question"><%= @question.title %></h2>
        </div>
    </div>
    <div class="questions">
        <% if user_signed_in? %>
        <div class="row">
              <div class="col-sm-1 col-sm-offset-1">
                    <% vote = Vote.voted_by?(current_user,  @question) %>
                <% if vote %>
                      <%= link_to question_vote_path(@question, vote), remote: true, method: :delete, class: "question-upvote upvote-active" do %>
                          <span class="upvote-arrow"></span>
                          <span class="upvote-count"><%= @question.votes.count %></span>
                      <% end %>
                <% else %>
                    <%= link_to question_votes_path(@question), remote: true, method: :post, class: "question-upvote" do %>
                            <span class="upvote-arrow"></span>
                        <span class="upvote-count"><%= @question.votes.count %></span>
                    <% end %>
                <% end %>
                </div>
                <div class="col-sm-8 body-show-question">
                    <span> <%= markdown(@question.body) %> </span>
                    <span class="comments">
                     <%= render partial: "comments/comments", locals: {commentable: @question} %>
                    </span>
                     <%= render partial: "comments/form", locals: {commentable: [@question]} %>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-8 col-sm-offset-1">
                    <h2>(<%= @question.answers.count %>) Respuesta(s)</h2>
                </div>
            </div>
            <% @question.answers.each do |answer|  %>
                <div class="row">
                  <div class="col-sm-1 col-sm-offset-1">
                        <% vote = Vote.voted_by?(current_user, answer) %>
                    <% if vote %>
                          <%= link_to question_answer_vote_path(@question, answer), remote: true, method: :delete, class: "question-upvote upvote-active" do %>
                              <span class="upvote-arrow"></span>
                              <span class="upvote-count"><%= answer.votes.count %></span>
                          <% end %>
                    <% else %>
                        <%= link_to question_answer_votes_path(@question, answer, vote), remote: true, method: :post, class: "question-upvote" do %>
                                <span class="upvote-arrow"></span>
                                <span class="upvote-count"><%= answer.votes.count %></span>
                        <% end %>
                    <% end %>
                    </div>
                <div class="col-sm-8 body-show-question">
                        <span> <%= markdown(answer.body) %> </span>
                        <span class="comments">
                            <%= render partial: "comments/comments", locals: {commentable: answer} %>
                        </span>
                        <%= render partial: "comments/form", locals: {commentable: [answer.question, answer]} %>
                    </div>
                </div>
        <% end %> <!-- end do |answer|-->
            <div class="row">
                <div class="col-sm-8 col-sm-offset-1">
                    <%= render partial: "answers/form", locals: {question: @question} %>
                </div>
            </div>
        <% else %>
            <div class="row">
                <div class="col-sm-1 col-sm-offset-1">
                    <div class="question-upvote">
                        <span class="upvote-arrow"></span>
                        <span class="upvote-count"><%= @question.votes.count %></span>
                    </div>
              </div>
              <div class="col-sm-8 body-show-question">
                    <span> <%= markdown(@question.body) %> </span>
                    <span class="comments">
                        <%= render partial: "comments/comments", locals: {commentable: @question} %>
                    </span>
                </div>
          </div>
            <div class="row">
                <div class="col-sm-8 col-sm-offset-1">
                    <div>
                        <h2>(<%= @question.answers.count %>) Respuesta(s)</h2>
                    </div>
                    <% @question.answers.each do |answer|  %>
                        <div class="body-answer">
                            <span> <%= markdown(answer.body) %> </span>
                            <%= render partial: "comments/comments", locals: {commentable: answer} %>
                        </div>
                    <% end %>
                </div>
            </div>
        <% end %>
    </div>  <!-- end  class questions-->
</div>

To avoid this type of problems, an adequate indentation is always important, this helps you to quickly identify when some div (or any other tag ) are not closing correctly.