0

Estoy colocando reglas CSS para solucionar el problema de que el texto del título de cada módulo deje de sobreponerse encima de los íconos editar/mover/eliminar pero sin dar con la solución.

Imagen referencia

  <div class="panel-heading text-center">
    <h5 class="panel-title">
      <i class="zalv-arrow-circle-right"></i>
      <span contenteditable="true" id="moduleTitle_2">Estoy destinado a ser exitos en mi vida. Sin importar lo que suceda nunca me rendiré.</span>
    </h5>
    <div class="pull-right objective_page">
      <a href="javascript:void(0)" title="Editar" data-backdrop="false" class="moduleEdit" data-id="2">
        <i class="fa fa-pencil"></i></a>
      <a href="javascript:void(0)" title="Mover">
        <i class="fa fa-arrows"></i></a>
      <a href="javascript:void(0)" title="Eliminar" id="moduleDeleteId_2" onclick="zalvadora.create_course.check_element({is_object_page: 1 , chapter_id: 2, course_id: 2, parent_id: 0,content_type:'chapter',chaptertype:1},'Objetivo','Unidad')">
        <i class="fa fa-trash-o"></i>
      </a>
    </div>
  </div>
</li>

4
  • Es difícil replicar la situación ya que no tenemos todos los estilos, pero yo te recomiendo lo siguiente: mete la etiqueta h5 en un div, y haz que ese div ocupe un 80% del contenedor padre, y el otro div (destinado a las acciones) que ocupe el 20% restante. Así evitaras que se superpongan los textos y los iconos.
    – IamDavid
    Commented el 6 dic. 2020 a las 12:47
  • Veo que usas las clases de bootstrap. Podrias agregar los plugins al snippet para que funcione como en la imagen y hacer pruebas? yo dividiria cada row en una columna de 10 y otra de 2, para que no se superpongan. Colocaria el texto en la columna de 10 y los botones en la columna de 2. Le podes configurar el overflow por si el texto se desborda, o darle un tamaño dinamico.
    – Agustin G.
    Commented el 6 dic. 2020 a las 12:47
  • @AgustinG. implementé tu solución pero aún no logro evitar el problema. El overflow se lo aplico a la h5 podría ser? Commented el 6 dic. 2020 a las 14:08
  • perdon, estoy en el campo y estoy viendo ahora esto. Cual es el problema que aún no logras evitar? (el tema del overflow era para que los contenteditable queden en una sola linea, es decir, evitar el salto de línea. Lo de las columnas que se pisaban lo pudiste solventar?
    – Agustin G.
    Commented el 7 dic. 2020 a las 15:38

1 respuesta 1

0

Acá agregue bootstrap y font awesome para probar. Agregué la clase rowal primer div, y luego dividí en dos columnas col-10 (para esto cree un nuevo div que rodea al h5) y col-2 (acá usé el div pull_right que ya existía). De esta manera siempre se mantendran separados.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<div class=" row panel-heading text-center">
   <div class='col-10'>
     <h5 class="panel-title">
      <i class="zalv-arrow-circle-right"></i>
      <span contenteditable="true" id="moduleTitle_2">Estoy destinado a ser exitos en mi vida. Sin importar lo que suceda nunca me rendiré.</span>
     </h5>
   </div>
   <div class="col-2 pull-right objective_page">
      <a href="javascript:void(0)" title="Editar" data-backdrop="false" class="moduleEdit" data-id="2">
        <i class="fa fa-pencil"></i></a>
      <a href="javascript:void(0)" title="Mover">
        <i class="fa fa-arrows"></i></a>
      <a href="javascript:void(0)" title="Eliminar" id="moduleDeleteId_2" onclick="zalvadora.create_course.check_element({is_object_page: 1 , chapter_id: 2, course_id: 2, parent_id: 0,content_type:'chapter',chaptertype:1},'Objetivo','Unidad')">
        <i class="fa fa-trash-o"></i>
      </a>
    </div>
  </div>

1
  • Gracias por tu valioso aporte ahora los iconos se movieron hacia arriba Commented el 6 dic. 2020 a las 13:34

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.