Password component's field styling

UI Components for React
Post Reply
civilizationliker
Posts: 2
Joined: 27 Jul 2022, 09:16

27 Jul 2022, 09:33

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
Posts: 3247
Joined: 22 Apr 2013, 15:48

29 Jul 2022, 13:53

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.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 11.0.3 / PF Extensions 11.0.3
PrimeReact 8.0.0

civilizationliker
Posts: 2
Joined: 27 Jul 2022, 09:16

31 Jul 2022, 10:41

Melloware wrote:
29 Jul 2022, 13:53
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.

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest