I'm having an issue to make the Dropdown box adjust properly exactly like the InputText.
I don't understand the reason why the Dropdown doesn't adjust to the available space properly, and when I set its width to 100% the label goes above the Dropdown field even though they're inside the p-grid.
Here is my JSX component code, followed by my custom css and sampling screenshots:
Code: Select all
return (
<>
<div className="p-formgroup-inline p-grid info-local-container">
<div className="p-field p-grid">
<label htmlFor="field1" className="label-info-local">Field1</label>
<InputText id="field1" type="text" className="input-info-local" />
</div>
<div className="p-field p-grid">
<label htmlFor="field2" className="label-info-local">Field2</label>
<InputText id="field2" type="text" className="input-info-local" />
</div>
<div className="p-field p-grid">
<label htmlFor="field3" className="label-info-local"
style={{verticalAlign:"center"}}>Field3</label>
<Dropdown
optionLabel="label"
options={opcoes}
value="value"
onChange={onChangeDropdown}
placeholder="select"
autoWidth={false} />
</div>
<div className="p-field p-grid">
<label htmlFor="origem" className="label-info-local">Field4</label>
<Dropdown
optionLabel="rotulo"
options={opcoes}
value="codigo"
onChange={onChangeDropdown}
placeholder="select"
className="input-info-local" />
</div>
<div className="p-field p-grid">
<label htmlFor="field5" className="label-info-local">field5</label>
<InputText id="field5" type="text" className="input-info-local" />
</div>
<div className="p-field p-grid">
<label htmlFor="field6" className="label-info-local">field6</label>
<InputText id="field6" type="text" className="input-info-local" />
</div>
<div className="p-field p-grid">
<label htmlFor="field7" className="label-info-local">field7</label>
<InputText id="field7" type="number" className="input-info-local" />
</div>
<div className="p-field p-grid">
<label htmlFor="field8" className="label-info-local">field8</label>
<InputText id="field8" type="text" className="input-info-local" />
</div>
<div className="p-field p-grid">
<label htmlFor="field9" className="label-info-local">field9</label>
<InputText id="field9" type="text" className="input-info-local" />
</div>
<div className="p-field p-grid">
<label htmlFor="field10" className="label-info-local">field10</label>
<InputText id="field10" type="text" className="input-info-local" />
</div>
<div className="p-field p-grid">
<label htmlFor="field11" className="label-info-local">Field11</label>
<InputText id="field11" type="text" className="input-info-local" />
</div>
<div className="p-field p-grid">
<label htmlFor="field12" className="label-info-local">field12</label>
<InputText id="field12"
type="text"
className="input-info-local" />
</div>
</div>
</>
);
Code: Select all
.info-local-container {
margin-left: auto;
margin-right: auto;
}
.p-field .label-info-local {
width: 60px;
}
.p-field .input-info-local {
width: auto;
}
https://imgur.com/a/YEvkuX8
When I set the Dropdown's width to 100% the result is the following
Code: Select all
<Dropdown
optionLabel="label"
options={opcoes}
value="value"
onChange={onChangeDropdown}
placeholder="select"
autoWidth={false}
style={{width: "100%"}} />
In order to have the behavior like those InputText what should I do in my styles.css?
I hope someone could be able to help, me!
I'm enjoying a lot the PrimeReact resources, components and styles so far!
Thanks in advance!