css - poner - select en blanco

¿Cómo hacer para que ExtJS ComboBox se muestre en línea con el texto?

Question

Quiero que aparezca lo siguiente en una sola línea. He intentado usar estilos float y display.

Show this input <input type="text" name="filterOp" id="filterOp"/> inline. <script type="text/javascript"> new Ext.form.ComboBox({ applyTo: ''filterOp'', triggerAction: ''all'', name: ''item'', mode: ''local'', lazyInit: true, displayField: ''name'', valueField: ''id'', forceSelection: true, typeAhead: true, inputType:''text'', fieldLabel: ''Item selection'', style: "display: inline-block", store: new Ext.data.JsonStore({ autoLoad: true, url: ''reporting/json_report_filter_operators.jsp'', root: ''rows'', fields:[''id'', ''name''] }) }) </script>

Answer 1

Lo siento, tu pregunta es un poco confusa. ¿Qué estás tratando exactamente de obtener en una sola línea? ¿El cuadro combinado? ¿El código? ¿Cada artículo en el cuadro combinado? Si se trata de cada elemento, simplemente ensanche el cuadro combinado, o haga que cada elemento tenga un desbordamiento oculto y un ancho fijo.

Answer 2

La forma más sencilla de hacerlo es anular los estilos en la página.

Primero, envuelva su párrafo en una etiqueta P con una identificación especial.

<p id="my-inline-override">
  Show this input <input type="text" name="filterOp" id="filterOp"/> inline.
</p>

Luego puede agregar un selector de CSS a su página que se asegure de que la etiqueta DIV agregada por Ext JS se muestre en línea (tenga en cuenta que "x-form-field-wrap" es la clase del contenedor DIV insertado, puede ver esto si usa herramientas de desarrollo de Chrome para navegar por el DOM).

<style>
#my-inline-override div.x-form-field-wrap {
    display: inline;
}
</style>