Dropdown component doesn't fit/adjust properly InputText

UI Components for React
Post Reply
eddorneles
Posts: 1
Joined: 07 Dec 2020, 15:27

07 Dec 2020, 16:16

I have started to use PrimeReact recently, so sometimes I get stuck with some behaviors related to the grid, inline and form css styling.
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>
    </>
    );
CSS Style

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;
}
The result is like the following:
https://imgur.com/a/YEvkuX8

Image

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%"}} />
Image
Image


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!

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest