Sapphire 13 - Dialog Component Input Style

[msbhalani]

Trying to use component input style - 'filled'.... I changed following....

export class AppComponent implements OnInit{
.....
inputStyle = 'filled'; //outlined


Dialog inputs shows 'outlined'.....

I verified with template project and it does NOT work for me. Can you please advise how to make it work?
Attached files that I updated in template project for your reference.

https://ibb.co/NNVqtBb
https://ibb.co/1TcZ68M
https://ibb.co/PGy2qgw
https://ibb.co/hmq44D4

Thanks!

[msbhalani]

Any help will be great.

Thanks

[cetincakiroglu]

Hi,

You can use the

Code: Select all

.p-input-filled

class to the wrapper element of input or input groups.

As an example:

Code: Select all

				<div class="col-12 md:col-6 p-input-filled">
					<div class="p-inputgroup">
						<span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
						<input type="text" pInputText placeholder="Username">
					</div>
				</div>

The code above will make the inputs filled without using anything else.

Regards,

[msbhalani]

Thank you. It works... Is there any way to apply to entire dialog (all components) e.g., table pagination etc.? Please see attached image....

https://ibb.co/c6pP4Bh

I could make it work (for table pagination as well) with this class, but it will be nice if we don't have use this class as if we need to change it back (not filled) globally then again need to remove etc

Regards,

[cetincakiroglu]

Thank you. It works... Is there any way to apply to entire dialog (all components) e.g., table pagination etc.? Please see attached image....

https://ibb.co/c6pP4Bh

I could make it work (for table pagination as well) with this class, but it will be nice if we don't have use this class as if we need to change it back (not filled) globally then again need to remove etc

Regards,

Hi,

You can use p-input-filled class wherever you want, If you want to change all of the inputs in a component just assign this class to the wrapper element at the top level of the component hierarchy. All of the inputs will be filled in.

In your case, you can assign this class to the div with class layout-content in the app.main.component.html

Regards.

[msbhalani]

Thank you.

[cetincakiroglu]

You're welcome