Cómo deshacerse de los márgenes en el diseño de jquery

Question

Estoy usando jquery layout y me es muy difícil deshacerme de los márgenes en los paneles. Siempre hay un margen y ninguna cantidad de CSS se deshace de ellos. Estoy implementando la demostración simple. simple demo Así que, básicamente, quiero lo mismo, pero sin márgenes/relleno en los paneles interiores. Voy a ajustar esto yo mismo. El objetivo es poder poner allí una imagen de fondo que se extienda de un borde a otro.

Espero que sea lo suficientemente claro.

Answer 1

creo que la siguiente regla CSS podría arreglar el problema:

.ui-layout-pane { 
    padding: 0px !important; 
} 

Desgraciadamente parece que el plugin de panel tiene una gran cantidad de posicionamiento absoluto y por lo tanto es probable que el tamaño de los contenedores serán ahora fuera por 20 píxeles cada. Se puede escribir algunos jQuery para arreglar eso, tal vez:

jQuery('.ui-layout-pane').each(function() { 
    var el = jQuery(this); 
    el.width(el.width() + 20); 
}); 

... o algo por el estilo, pero ... sí, no es ideal. Es posible que desee buscar un complemento diferente o modificar el origen de este para tener en cuenta la discrepancia de 20 píxeles en los tamaños de los paneles.

Answer 2

Estoy usando una versión más nueva de Diseño de interfaz de usuario que cuando el O.P. creó esta pregunta, pero creo que esta opción de panel ha existido por poco tiempo. Lo siguiente funcionó para mí, y no debería requerir piratería (más bien recorriendo la fuente/leyendo los documentos)

Intente configurar applyDefaultStyles en falso. (o tal vez ahora se llama applyDemoStyles)

E.g.

$("body").layout({applyDefaultStyles:false}); 

o

$("body").layout({applyDemoStyles:false}); 

---

ACTUALIZACIÓN:

Fwiw - Estoy usando el complex layout - jquery.layout 1.3.0 - Release Candidate 30.79

Específicamente , esto funcionó para mi panel de configuraciones internas "west sidebar". Para mí, applyDefaultStyles controla el relleno blanco no deseado para el panel al que estaba apuntando. Existen diferentes formas de declarar configuraciones para los diferentes paneles. he usado 'formato de lista', que se parece a esto ...

//'list format' 
westSidebarSettings_Inner = { 
    applyDefaultStyles: false // basic styling for testing & demo purposes 
    , // (other settings ommitted in this stackoverflow snippet for brevity) 
} 

//'sub-key format' 
var layoutSettings_Outer = { 
    name: "outerLayout" 
    // options.defaults apply to ALL PANES - but overridden by pane-specific settings 
, defaults: { 
    size: "auto" 
    , minSize: 50 
    , paneClass: "pane"   // default = 'ui-layout-pane' 
    , resizerClass: "resizer" // default = 'ui-layout-resizer' 
    , togglerClass: "toggler" // default = 'ui-layout-toggler' 
    , buttonClass: "button" // default = 'ui-layout-button' 
    } 
, north: { 
    spacing_open: 21    // cosmetic spacing 
    , togglerLength_open: 21  // to HIDE the toggler button, set = 0 
    , togglerLength_closed: 21  // "100%" OR -1 = full width of pane 
    } 
} 


$(document).ready(function() { 
    // create the OUTER LAYOUT 
    outerLayout = $("body").layout(layoutSettings_Outer); 

    // create an INNER LAYOUT to split my west sidebar into 2 pieces 
    // (actual settings ommitted in this stackoverflow snippet for brevity) 
    innerLayout = $(outerLayout.options.west.paneSelector).layout(westSidebarSettings_Inner); 
});