Pregunta sobre Arreglando WordPress de Wordpress:

Establecer la altura de los contenedores de widgets individualmente

Un usuario pregunt贸 馃憞

Estimados miembros del foro,

En las publicaciones de blog individuales incluyo widgets de gr谩ficos de acciones de Tradingview.

El c贸digo del widget se puede encontrar en https://www.tradingview.com/widget/advanced-chart/

Selecciono las opciones de stock y configuraci贸n y luego marco la casilla ‘Tama帽o autom谩tico’ para que el widget no se extienda fuera del ancho de la pantalla pero para presionarlo verticalmente es necesario definir la altura del contenedor.

Descubr铆 que se agreg贸 CSS 鈥嬧媋dicional a la soluci贸n y para las dos p谩ginas vinculadas arriba est谩 el c贸digo:


#tradingview_813bd div {
	height: 600px !important;
}

#tradingview_49ae5 div {
	height: 600px !important;
}

pero como saben, necesito agregar c贸digo adicional para cada widget que se agrega a una publicaci贸n de blog porque cada widget tiene una identificaci贸n 煤nica, como ‘813bd’ y ’49ae5 鈥 arriba.

Me pregunto si hay alguna posibilidad de insertar una l铆nea de c贸digo para establecer la altura del widget directamente en el c贸digo del widget.

El c贸digo del widget suele ser:

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div id="tradingview_e61f1"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL Chart</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "autosize": true,
  "symbol": "NASDAQ:AAPL",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "Light",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "allow_symbol_change": true,
  "container_id": "tradingview_e61f1"
}
  );
  </script>
</div>
<!-- TradingView Widget END -->

驴Tiene sentido esta idea?

Gracias por su ayuda.

(@crouchingbruin)

Hace 1 a帽o, 8 meses

Intentalo:

.tradingview-widget-container div div {
   height: 600px !important;
}

(@chartsandtrends)

Hace 1 a帽o, 8 meses

Gracias @crouchingbruin por esta idea. Esto establecer谩 una altura com煤n para todos los widgets de Tradingview, pero hay varios tipos que pueden requerir una configuraci贸n de altura personalizada, como las que agregu茅. esta p谩gina. Aqu铆 es donde sucede esto cuando el par谩metro ‘Tama帽o autom谩tico’ no est谩 seleccionado y si miras esta p谩gina en un dispositivo m贸vil, ver谩s c贸mo los widgets se ejecutan horizontalmente fuera del 谩rea de visualizaci贸n. Estaba pensando que ser铆a posible insertar una l铆nea adicional de c贸digo directamente en el c贸digo del widget individual para ajustar espec铆ficamente la altura del widget. 驴Crees que esto es posible?

(@crouchingbruin)

Hace 1 a帽o, 8 meses

Alternativamente, siempre es una buena pr谩ctica no dise帽ar un elemento directamente usando un estilo caracter铆stica. En su lugar, escriba reglas CSS que utilicen el ID o la clase del elemento. Hace que sea m谩s f谩cil anular la SEC si es necesario, sin recurrir a la importante cl谩usula.

En lo que respecta al ancho, puede intentar establecer el ancho al 100% en lugar de un n煤mero fijo de p铆xeles. Luego, se ajustar谩n al ancho de cada dispositivo visto y no encontrar谩 los gr谩ficos que se derraman desde un lado.

Para las alturas, puede utilizar preguntas de medios que establecen la altura en funci贸n de un ancho de pantalla en particular. Por ejemplo:

#tradingview_5b9e6-wrapper {
   height: 610px;
}
@media (max-width: 767px) {
   #tradingview_5b9e6-wrapper {
      height: 550px;
   }
}
@media (max-width: 420px) {
   #tradingview_5b9e6-wrapper {
      height: 320px;
   }
}

Primero deber谩 eliminar la propiedad de altura del estilo en l铆nea # tradeview_5b9e6-wrapper y cambiar la propiedad de altura del siguiente DIV anidado de 610px a 100% para que esto funcione. Pero lo que deber铆a hacer es cambiar la altura del gr谩fico a las alturas que ve seg煤n el ancho de la pantalla. Sin embargo, debe tener cuidado de no reducir tanto la altura que todo el texto y las figuras se junten y sea demasiado dif铆cil de leer.

(@chartsandtrends)

Hace 1 a帽o, 8 meses

Gracias @crouchingbruin; el primer c贸digo general funciona para todos los widgets, por lo que no me conect茅 al segundo.

Sin embargo, estoy luchando con otro widget que no tiene identificaci贸n.

Aqu铆 est谩 el c贸digo:

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/markets/currencies/forex-cross-rates/" rel="noopener" target="_blank"><span class="blue-text">Forex Rates</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-forex-cross-rates.js" async>
  {
  "width": "770",
  "height": "400",
  "currencies": [
    "EUR",
    "USD",
    "JPY",
    "GBP",
    "CHF",
    "AUD",
    "CAD",
    "NZD",
    "CNY"
  ],
  "locale": "en"
}
  </script>
</div>
<!-- TradingView Widget END -->

Este tambi茅n se extiende horizontalmente en pantallas peque帽as. El tama帽o de p铆xel se reemplaza por:

芦Ancho禄: 芦100%禄, 芦alto禄: 芦100%禄,

No estoy seguro de c贸mo configurar el ancho autom谩tico para este porque falta la identificaci贸n. 驴Hay alg煤n arreglo aqu铆 por favor?

(@chartsandtrends)

Hace 1 a帽o, 8 meses

Lo siento, encontr茅 la soluci贸n estableciendo las dimensiones como: 芦ancho禄: 芦100%禄, 芦alto禄: 芦400禄,

El resultado es bastante sorprendente. Mira Aqu铆.

Gracias por la gran ayuda.

驴Solucion贸 tu problema??

0 / 0

Deja una respuesta 0

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *