0

Lo que quiero conseguir es que dependiendo de las plantas que tenga mi empresa, me seleccione un .css diferente con estilos personalizados. Si tengo de 0 a 3 me jale una hoja específica, si tengo de 4 a 6 me jale otra diferente etc.

Esto lo quiero hacer porque actualmente estoy trabajando con una accordeón y dicho accordeón no es del todo dinámico ya que funciona corrrectamente pero si aumentan o disminuyen las plantas el accordeón no ocupa todo el espacio que debería.

introducir la descripción de la imagen aquí

Espero que se pueda apreciar el espacio que queda libre, ese espacio aumentará conforme menos plantas haya, lo cual está erroneo ya que quiero que se aproveche todo el espacio por lo cual quisiera hacer 3 .css personalizados para tres diferentes posibilidades de la base de datos y seleccionarlos cuando se pueda.

  1. Primer .css (0-3 plantas)
  2. Segundo .css (4-8 plantas)
  3. Tercer .css(9-12 plantas)

El espacio que quiero aprovechar es el que se realiza al momento de abririse.

Código de css para abrir cada accordeón:

 .ia-container input:checked ~ figure {
        -webkit-transition: all 0.7s ease-in-out;
        -moz-transition: all 0.7s ease-in-out;
        -o-transition: all 0.7s ease-in-out;
        -ms-transition: all 0.7s ease-in-out;
        transition: all 0.7s ease-in-out;
        left: 65%;
    }

Como se puede apreciar el left:65%, es el que genera que se abra ciertas dimensiones cada accordeón y es estático, quiero generarlo dinámicamente.

10
  • Hola David, ¿todo lo requieres hacer directamente en del lado del cliente? es decir, ¿solo modificando las hojas de estilos es como deseas implementar esta funcionalidad?
    – Phi
    Commented el 25 ene. 2017 a las 0:05
  • @david la libreria sass te podria ayudar
    – hubman
    Commented el 25 ene. 2017 a las 0:46
  • ¿Podrías poner un ejemplo funcional de tu problema para poder reproducirlo?
    – gugadev
    Commented el 25 ene. 2017 a las 1:33
  • @guzgarcia por el momento no tengo ningún ejemplo re producible.
    – David
    Commented el 25 ene. 2017 a las 2:30
  • @flxtr si todo eso sera del lado del cliente claro que traeré información de la BD para combinarlo con la parte del cliente y poder generar una manera de intercalar los .css
    – David
    Commented el 25 ene. 2017 a las 2:31

2 respuestas 2

2

Para evitar generar 3 archivos css diferentes puedes declarar los estilos que necesites en diferentes clases css dentro de un solo archivo.

.style1 .container {
  background: #FFF;
}

.style2 .container {
  background: #FAFAFA;
}

Usa algun preprocesador de css como sass o less para agilizar las cosas.

En cuanto al cambio de estilos, si el html que renderizas es dinámico, bastaría con cambiar el nombre de la clase del elemento contenedor desde javascript.

Un ejemplo sencillo con jquery y los estilos anteriores podría ser:

$('.main').removeClass('style1').addClass('style2');

Si el renderizado del contenido depende completamente del servidor, implementa la lógica para seleccionar una clase css u otra en función de lo que tengas en tu base de datos, un par condicionales o un switch-case debería bastar, agregala a tu html antes de enviar la página al cliente.

Por último y como recomendación creo que deberías buscar la forma de estructurar tu aplicación con un diseño general que se adapte a la mayoría de las condiciones, requerimientos o reglas de negocio de la misma. El hecho de realizar estilos específicos indica que algo no esta bien y que se puede mejorar. Puede llegar a ser bastante tedioso cambiar algo en un futuro si los requerimientos cambian y el diseño inicial ya no se adapta a las nuevas necesidades.

0

Entiendo se trata de un desarrollo en asp.net usando c#, entonces podrias aplicar diferentes estilos segun los datos que dispongas en cada momento

Hay varias formas de lograrlo, sino quieres 3 css diferentes quizas este dato dinamico podrias quitarlo de la hoja de estilo y definirlo como style donde coresponda

Si obtienes el dato de la db podrias asignar este en una propiedad de la pagina para luego ser usado en el aspx

public class Page1
{
    public string Left {get;set;}

    public void Page_Load(...)
    {
        //aqui consultas la tabla
        ths.Left = "65"; //aqui asignas el valor que recuperas de la db
    }

    //resto codigo pagina

}

y en el aspx seria

<div class="ia-container" style="left:<%=this.Left%>%;"> 

como veras se usa el <%= %> para renderiza en ese sitio el valor que previamente recuperaste de la db

1
  • Esto suponiendo que el OP utiliza WebForms. Me parece que es una pregunta muy amplia, a lo mejor sería de más ayuda que ponga en concreto las tecnologías que utiliza y ya con eso podríamos dar con una respuesta
    – Phi
    Commented el 25 ene. 2017 a las 3:16

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.