0

Tengo la vista show donde muestro mis respuestas de las preguntas y pueden votar por ellas, para mi primera respuesta me despliega correctamente la flecha, pero para la segunda respuesta o demás solo despliega el contador.

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>

Resultado de la vista show de questions

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;
}
2
  • Pareciera que los div no tienen el orden adecuado; ¿tienes tu repositorio actualizado con este código?
    – Gerry
    el 30 oct. 2017 a las 6:00
  • @Gerry, subí la última modificación que había realizado, se encuentra actualizado con ese css. el 30 oct. 2017 a las 6:23

1 respuesta 1

2

El anidamiento de los div es incorrecto, lo que ocasiona que los div tengan un comportamiento errático dado que no cierran cuando deben; ordenando el código podrás ordenar y/o eliminar los </div> que sobran:

<!-- 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>

Para evitar este tipo de problemas es importante siempre una indentación adecuada, esto te ayuda a identificar rápidamente cuando algún div (o cualquier otro tag) no estén cerrando correctamente.

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.