plantilla - Los enlaces de encabezado móvil de Jquery se superponen con texto largo
plantilla divi wordpress gratis (3)
Empecé a trabajar en una aplicación móvil jquery y tengo problemas con la barra de encabezado cuando uso enlaces.
<header data-role="header" data-position="fixed">
<a href="blah" data-icon="back">this is long text</a>
<h1>page title</h1>
</header>
El problema es que el vínculo de retroceso a menudo se superpone con el título si uno o ambos son un poco largos. Obviamente, esto solo ocurre cuando visualizo en un dispositivo móvil con una pantalla más pequeña (frente a iPad) o cuando reduzco mi buscador de prueba. Pero se ve bien cuando se prueba en navegadores más amplios. ¿Hay alguna manera incorporada de jquery para hacer que esto funcione? ¿Reduciendo el tamaño del texto o cortando automáticamente el texto según el ancho? Puedo truncar groseramente el texto yo mismo, pero luego parece tonto cuando se ve en un navegador más amplio (o modo horizontal) y los enlaces se truncan sin ningún motivo.
Cualquier ayuda sería genial. ¡Gracias!
ACTUALIZAR:
Puede probar esto yendo a http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-headers.html
Utilice firebug / inspector para alargar el texto en cualquiera de los enlaces de la barra de herramientas y verlos superponerse a sus títulos cuando el navegador tiene un ancho menor.
Hay algunas cosas que puedes probar.
<header data-role="header" data-position="fixed">
El "encabezado" y "data-role =" encabezado "" pueden estar en conflicto entre sí. Intenta hacerlo un div
Además, si está utilizando cualquier CSS para diseñar estos encabezados intente con porcentajes y ems para la altura. Esto asegurará que el encabezado se vea casi idéntico para cada navegador móvil (aunque algunos lo hacen parecer diferente, como Opera Mobi, por ejemplo)
Aquí hay un ejemplo:
.ui-header .ui-title, .ui-footer .ui-title {
display: block;
font-size: 1em; //Font size is a height, use ems
margin: 0.6em 90px 0.8em;
outline: 0 none !important;
width: 50%; //For widths use %
}
Si eso no funciona, intente especificar una height específica para cada elemento en el encabezado. Para algunos teléfonos (especialmente iPhones), estos divs se superponen o se cortan si no se especifica una altura específica.
<a href="blah" data-icon="back" id = "link">this is long text</a>
<h1>page title</h1>
#link
{
height: 10px; //(Or you can use ems, but this may not be needed)
}
Si eso no soluciona el problema, entonces tal vez solo necesite disminuir el tamaño de la fuente, por ejemplo. Este es el problema con los teléfonos móviles, especialmente con JQuery Mobile, que no es compatible con la gran mayoría de teléfonos móviles (HTC, Blackberry, etc.). Todos tienen algunos pequeños problemas como este que pueden surgir.
Edite una nota más: generalmente funciona mejor si intenta anular el CSS de JQuery Mobile en lugar de intentar aplicar el suyo propio. Con esto quiero decir:
<header data-role="header" data-position="fixed" id ="header">
.ui-header {
//CSS
}
por lo general funcionará mejor que
#header {
/CSS
}
También tuve problemas con la colisión de títulos largos y botones. Por defecto, el título está centrado en todo el ancho del encabezado, y los botones están absolutamente posicionados a los lados.
La forma en que resolví esto fue hacer los siguientes ajustes en el CSS en mi hoja de estilos cargada después de jQuery Mobile:
.ui-header {
display: table;
width: 100%;
}
.ui-header .ui-title {
display: table-cell;
width: 100%;
line-height: 2.5em;
}
.ui-header .ui-btn {
display: table-cell;
}
.ui-header .ui-btn-left, .ui-header .ui-btn-right {
position: static;
top: 0;
}
Esto centra el título en el espacio después de los botones en el encabezado. Aquí hay una demostración del comportamiento normal , y aquí hay un ejemplo con la corrección anterior aplicada . Para ver la diferencia, cambie el tamaño del navegador / vista. Soy consciente de que la pantalla: {table | table-cell} no es compatible en IE 7.
Esto se ha discutido en . El siguiente enlace sugiere muchas estrategias diferentes para truncar cadenas largas: