una - manual de programacion android pdf

¿Mejor forma de establecer el tamaño del cuadro de texto de entrada en todas las plataformas?

Question

La actualización está debajo de los fragmentos del código.

Pregunta original: Tengo un campo de entrada que se extiende mucho más allá del resto de la página, pero como la pregunta alude, parece estar bien en iOS3 / 4/5.

Me pregunto si alguien se ha encontrado con este problema. Mi botón de búsqueda, que en iOS está a la derecha del cuadro de texto de búsqueda, en realidad se ajusta a la siguiente "línea" en otras plataformas.

El código está abajo:

HTML

<form action="/jsp/mobile_files/results.jsp" method="get" autocorrect="off" autocapitalize="off">
<h1><input class="keyword_search" type="text" name="keywords" maxlength="50" size="36" value="" /><input type="submit" class="keyword_submit" value="Go" /></h1>
</form>

Las dos clases de CSS relevantes son:

 /* input[type="submit"] */
.keyword_submit
{
background: #666666; /* grey */
color: #FFFFFF; /* white */
font-weight: bold;
font-size: 60%;
line-height: 1.45em; /* 1.45 with 60% font-size */
margin-left: -4px; /* to do - needs to be -12 for desktop */
padding-bottom: 1px;
-moz-border-radius: 10px; /* for mozilla firefox */
/* NOTE: CSS3 rounded corners not work on iPhone 3G with iOS 3.x */
border-radius: 10px;
/* webkit rounded corners work on iPhone 3G with iOS 3.x */
-webkit-border-radius: 10px;
-moz-border-radius-topleft: 0px; /* for mozilla firefox */
-moz-border-radius-bottomleft: 0px;
/* NOTE: CSS3 rounded corners not work on iPhone 3G with iOS 3.x */
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
/* but this does work on iPhone 3G with iOS 3.x */
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
/* to do - possible without this?? We lose the gradient! */
-webkit-appearance: none;
}

y

/* input[type="text"] */
.keyword_search {
background: #F1F1F1; /* faded white */
color: #333333; /* dark */
font-weight: bold;
/* to do - looks better on iOS with larger font */
/*
font-size: 80%;
*/
-moz-border-radius: 10px; /* for mozilla firefox */
/* NOTE: CSS3 rounded corners not work on iPhone 3G with iOS 3.x */
border-radius: 10px;
/* webkit rounded corners work on iPhone 3G with iOS 3.x */
-webkit-border-radius: 10px;
margin-left: 0.75em; /* moves entry field to the right */
padding-left: 0.6em; /* moves text start cursor in the entry field to the right */
/* for mozilla firefox */
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
/* NOTE: CSS3 rounded corners not work on iPhone 3G with iOS 3.x */
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
/* but this does work on iPhone 3G with iOS 3.x */
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}

Las capturas de pantalla de la pregunta actualizada se pueden ver en http://i.stack.imgur.com/5f7C8.jpg Lo publicaría aquí, pero necesito más de 10 reputación para publicar imágenes. Puedes ver en la imagen de Android lo que sucede si el tamaño de mi entrada es demasiado grande para cualquier plataforma. Para que quepa en el BlackBerry, puede ver lo que hace con el tamaño representado en iOS. Los tres img tienen un tamaño establecido en el mismo valor (= "10") ... y puedes ver el resultado en las diferentes plataformas.

<input class="keyword_search" type="number" name="job_order_id" maxlength="7" size="10" value="" />
<input type="submit" class="keyword_submit" value="Go" />

Sugerencias para una mejor forma de controlar el tamaño? ¿Puedo usar%, em, px o alguna unidad que sea más consistente en todas las plataformas? (Me preocuparé por eliminar la brecha, el tamaño del botón y otros ajustes una vez que haya resuelto el tamaño)

Answer 1

Cuando volví para probar algunas otras cosas, noté que estaba equivocado. El comentario anterior se realizó usando size=#% , pero cuando usa width: #%; elimina la gran variación en las plataformas.