Password component's field styling

[civilizationliker]

Hello everyone,

I have an issue usding Password component after update primereact from version 4.2.2 to 7.2.0.
For the following code

Code: Select all

                        <div className="grid">                            
                            <div className="col-3">
                                <InputText id="f1" type="text" style={{width: '100%'}} />
                            </div>
                            <div className="col-3">
                                <Password id="f2" type="text" style={{width: '100%'}}  />
                            </div>                 
                            <div className="col-3">
					//...
                            </div>                                             
                            <div className="col-3">
					//...
                            </div>
                        </div>   

...Field f1 scale for full space by width when f2 not.
I found that new property exist here "input Style" but in this case I see that width could be set on fixed size in pixels but could not in percents: For following code

Code: Select all

        <div>
        <Password id="f3" inputStyle={{width: "100%"}}></Password>
        </div>
        <div>
        <Password id="f4" inputStyle={{width: "600px"}}></Password>
        </div>

field f4 width set correctly to 600 pixels but width of f3 still on default and less than f4's width

Could you please help, how password component width could be set to 100% correctly?

[Melloware]

Try..

Code: Select all

<Password id="f3" inputStyle={{width: "100%"}} style={{width: "100%"}}></Password>

The Password is actually a DIV wrapping an INPUT like this..

Code: Select all

<div style goes here>
   <input inputStyle goes here>
</div>

So you are giving the Input width but not its parent container.

[civilizationliker]

Try..

Code: Select all

<Password id="f3" inputStyle={{width: "100%"}} style={{width: "100%"}}></Password>

The Password is actually a DIV wrapping an INPUT like this..

Code: Select all

<div style goes here>
   <input inputStyle goes here>
</div>

So you are giving the Input width but not its parent container.

Thank you, specifying both "inputStyle" and "style" solved the issue.