wLabel - Nefele 4 Harbour

Acceder Darse de alta He olvidado la contraseña

Este debate tiene 8 respuestas, 3 mensajes y ha sido actualizado por última vez el 4 años, 2 meses por ramonzea. This post has been viewed 623 times

Mostrando 8 respuestas a los debates

Autor

Entradas

21-08-2020 a las 18:10 #450

Participante

Tengo un wLabel dentro de una wBevel, lo que busco es cortar el texto cuando éste sobre pase el ancho del Bevel o del wLabel, pero en algunos funciona y otros no.

Qué hago mal?

               With Object WBevel():New( :WO )
                  //:aWidth[xc_M]  := 6
                  With Object  :oStyle
                     :cHeight := "80%"
                     :cMax_width := "100%"
                     :cMax_height := "80%"
                     :cMin_height := "80%"
                     :cPosition := "relative"
                     :cText_overflow := "hidden"
                     :cOverflow := "hidden"
                     :cFont_size := "small"
                     :cDisplay := "block"
                  End With
                  with object WLabel():New(:WO)
                     //:cId       := "descrip"
                     :cAlign    := xc_Left
                     :cClrText  := "blue"
                     :cText     := Trim(aProducto[2])
                     :Create()
                  end with
                  :Create()
               End with

With Object WBevel():New( :WO )

//:aWidth[xc_M] := 6

With Object :oStyle

:cHeight := "80%"

:cMax_width := "100%"

:cMax_height := "80%"

:cMin_height := "80%"

:cPosition := "relative"

:cText_overflow := "hidden"

:cOverflow := "hidden"

:cFont_size := "small"

:cDisplay := "block"

End With

with object WLabel():New(:WO)

//:cId := "descrip"

:cAlign := xc_Left

:cClrText := "blue"

:cText := Trim(aProducto[2])

:Create()

end with

:Create()

End with

He puesto varios elementos de estilo, pero no logro lo que busco.

Saludos.

21-08-2020 a las 18:46 #451

Alfredo Sanz
Superadministrador

Si puedes, envíame el código html que te genera correspondiente al bevel y el label para echarle un ojo

21-08-2020 a las 23:34 #452

ramonzea

Participante

Esto es lo que queda en el html

<div id="prod1" class="black-text col s12 m6 l4 xl4" style="padding-bottom: 10px;">
  <div id="bev0032" class="black-text col s12" style="border: double; border-color: lightsteelblue; padding-bottom: 10px; padding-top: 10px;">
    <div id="bev0023" class="black-text col s12" style="height: 200px; padding: 0;">
      <div id="bev0022" class="black-text col s12" style="display: flex; padding: 0;">
        <div id="bev0016" class="black-text col s12" style="position: relative; max-width: 50%;">
          <img src="/images/ACER-MNL-729.jpg" alt="N4H" />
        </div>
        <div id="bev0021" class="black-text col s12" style="max-width: 50%;">
          <div id="bev0018" class="black-text col s12" style="height: 80%; max-width: 100%; max-height: 80%; min-height: 80%; position: relative; text-overflow: hidden; overflow: hidden; font-size: small; display: block;">
            <span id="lbl0017" class="left-align col s12 blue-text realspace">MONITOR LED V206HQL 19.5HD/1366X768/VGA/5MS/VESA100X100/NEGRO/ENERGY STAR-EPEAT GOLD</span>
          </div>
          <div id="bev0020" class="black-text col s12">
            <span id="lbl0019" class="left-align col s12 black-text realspace" style="height: 20px; min-height: 20px; padding: 1px;">AC-UM.IV6AM.B01</span>
          </div>
        </div>
      </div>
    </div>
    <div class="separator col s12">
      <hr>
    </div>
    <div id="bev0031" class="black-text col s12 m12 l12 xl12" style="display: flex;">
      <div id="bev0030" class="black-text col s12 m12 l12 xl12">
        <div id="bev0026" class="green black-text col s5 m5 l5 xl5">
          <span id="lbl0025" class="center-align col s12 black-text realspace">
            Existencia: <br>0</span>
        </div>
        <div id="bev0028" class="black-text col s4 m4 l4 xl4">
          <span id="lbl0027" class="center-align col s12 blue-text realspace">
            Precio: <br>      1,988.82</span>
        </div>
        <div id="bev0029" class="black-text col s3 m3 l3 xl3">
          <div class="center-align col s12" style="padding:4px;">
            <a>
              <i class="material-icons left" style="width:20px">add_shopping_cart</i>
              <span class="TxtBtn"></span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</div>

<span id="lbl0017" class="left-align col s12 blue-text realspace">MONITOR LED V206HQL 19.5HD/1366X768/VGA/5MS/VESA100X100/NEGRO/ENERGY STAR-EPEAT GOLD</span>

</div>

</div>

<hr>

</div>

Existencia: <br>0</span>

</div>

Precio: <br> 1,988.82</span>

</div>

<a>

<i class="material-icons left" style="width:20px">add_shopping_cart</i>

</a>

</div>

Saludos.

22-08-2020 a las 00:32 #453

Alfredo Sanz
Superadministrador

Pues la verdad es que no termino de entender el problema.

Tal vez sea el texto 19.5HD/1366X768/VGA/5MS/VESA100X100/NEGRO/ENERGY, demasiado largo y sin espacios?
23-08-2020 a las 03:50 #457

ramonzea
Participante

Logré algo haciendo un nuevo bevel con un alto fijo, y dentro otro bevel con u nmax-heigth del 90% con el que pongo el wLabel con un text-overflow=hidden.

Espero haberme explicado.

Saludos.
23-08-2020 a las 11:22 #460

Alfredo Sanz
Superadministrador

Pues no, la verdad es que no termino de hacerme a la idea. Me ayudaría alguna captura de imagen del antes y el después.

De todas formas lo de un bevel dentro de otro para esto me parece un tanto forzado. ¿ Has probado con los padding? el padding en realidad es el margen interno de un bevel y seguramente conseguirás el mismo resultado utilizando menos recursos

https://www.w3schools.com/css/tryit.asp?filename=trycss_padding_sides
24-08-2020 a las 22:05 #462

Xevi
Participante

¿Como puedo poner un tipo de font en un WLabel???

Pretendo tener distintos WLabels con distintas fuentes...

Gracias por vuestro tiempo.
Un Saludo,

Xevi.

25-08-2020 a las 10:19 #466

Alfredo Sanz

Superadministrador

Para modificar las características de un control puedes hacerlo de dos formas

Indicando al control que pertenece a una determinada clase css y hacer las modificaciones en el fichero css

     with object WLabel():New( oPanel )
         :cType              := "div"
         :cClass             := "Ejemplos"
         :Create()
      end with

with object WLabel():New( oPanel )

:cType := "div"

:cClass := "Ejemplos"

:Create()

end with

Incluir las modificaciones directamente dentro de tu código usando la propiedad oStyle

   with object WLabel():New( oPanel )
        :cType  := "div"
         with object :oStyle
             :cFont_family := "monospace"
             :cFont_size   := 25
         end
         :Create()
      end with

with object WLabel():New( oPanel )

:cType := "div"

with object :oStyle

:cFont_family := "monospace"

:cFont_size := 25

end

:Create()

end with

También puedes mezclar las dos formas, en cuyo caso lo que pongas tú por código tendrá preferencia sobre lo que tengas definido en la clase css

    with object WLabel():New( oPanel )
         :cType              := "div"
         :cPreviewBackground := "#0080001f"
         :cClass             := "Ejemplos"
         :cAlign             := xc_Center
         :cText              := "Ejemplos de edición"
         with object :oStyle
             :cFont_family   := "monospace"
             :cFont_size     := 25
         end
         :Create()
      end with

with object WLabel():New( oPanel )

:cType := "div"

:cPreviewBackground := "#0080001f"

:cClass := "Ejemplos"

:cAlign := xc_Center

:cText := "Ejemplos de edición"

with object :oStyle

:cFont_family := "monospace"

:cFont_size := 25

end

:Create()

end with

25-08-2020 a las 14:44 #473

ramonzea
Participante

Lo anexaba en wBevel para poder definir valores fijos, y el que estaba dentro poder ponerle un valor en %.

Con respecto a los wLabel, igual eso hacía, los metía en un wBevel para dales formatos, diseño, etc, por que si los ponía con :oStyle me los ignoraba; no había visto la propiedad cType, haré pruebas.

Anexo como quedó lo de los textos cortados.

Saudos.

Adjuntos:
Debes acceder para ver los archivos adjuntos.

Autor

Entradas

Mostrando 8 respuestas a los debates

Debes estar registrado para responder a este debate.

Adjuntos: