jQuery Mobile: faça um elemento recolhível com 100% de largura / NÃO inserido

Question

Existe uma maneira de fazer um elemento / conjunto recolhível no jQuery Mobile não inserido?Por padrão, torna o elemento recolhível como um item de inserção.

data-inset="false" não altera o comportamento.

Answer 1

Se você der às propriedades margin-left e margin-right um valor negativo, poderá expandir o conteúdo recolhível para a largura da página.

Os valores padrão margin-top e margin-bottom para um recolhível são 8px, portanto, podemos escrever uma regra CSS para isso:

.ui-collapsible {
    margin : 8px -15px;
}

Escolhi -15px porque essa é a quantidade negativa de padding que o elemento data-role="content" adiciona a cada página.

Aqui está um jsfiddle para ver o que isso faz: http://jsfiddle.net/jasper/zSvqU/

Answer 2

Você sempre pode colocar o bloco de conteúdo recolhível em data-role="header", mas é claro que isso só está correto se seu conteúdo recolhível não precisar estar em algum lugar no meio da página.