Border

[vin]

I don't want to show the input border while displaying.

But when the data in edit mode i want the border, how to achieve it?

And how to change the input text size?

<input type="text" class="form-control e-input" name="portfolio_name"

                                                id="portfolio_name" placeholder="Enter Portfolio Name" required

                                                #portfolio_name="ngModel" [(ngModel)]="portfolioNameValue"

                                                title="Portfolio Name">

[Vinitha Jeyakumar]

Hi vin, 

 

 

Greetings from Syncfusion support 

 

 

We have validated your query “I don't want to show the input border while displaying. But when the data in edit mode i want the border, how to achieve it” 

 

Your requirement can be achieved by customizing the below CSS code of the Textbox. Please check the below code snippet, 

 

Code snippet: 

.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left), 

    .e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left), 

    .e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left), 

    .e-float-input:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left), 

    .e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) 

    .e-input-in-wrap:hover, 

    .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) 

    .e-input-in-wrap:hover, 

    .e-float-input.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) 

    .e-input-in-wrap:hover, 

    .e-float-input.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) 

    .e-input-in-wrap:hover, 

    .e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) 

    input:not([disabled]), 

    .e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) 

    textarea:not([disabled]), 

    .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) 

    input:not([disabled]), 

    .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) 

    textarea:not([disabled]), 

    .e-float-input.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) 

    .e-input-in-wrap:hover { 

        border-color: white; 

    } 

 

    .e-float-input input, 

    .e-float-input textarea, 

    .e-float-input.e-control-wrapper input, 

    .e-float-input.e-control-wrapper textarea { 

        border-bottom-color: white; 

    } 

 

 

Sample: https://stackblitz.com/edit/angular-m9gjgp?file=app.component.css 

 

Please check the above sample and code snippet and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha 

[vin]

Thanks Vinitha

How do i achieve the same for Input 

  <input type="text" class="form-control e-input" name="portfolio_name"

                                                id="portfolio_name" placeholder="Enter Portfolio Name" required

                                                #portfolio_name="ngModel" [(ngModel)]="portfolioNameValue"

                                                title="Portfolio Name">

[Vinitha Jeyakumar]

Hi Vin, 

 

 

Good day to you 

 

 

We have validated your query “How do i achieve the same for Input” 

 

Your requirement can be achieved by customizing the below CSS style code for inputs. Please check the below code, 

 

Code snippet: 

.e-input:not(:valid), 

    .e-input:valid, 

    .e-float-input.e-control-wrapper input:not(:valid), 

    .e-float-input.e-control-wrapper input:valid, 

    .e-float-input input:not(:valid), 

    .e-float-input input:valid, 

    .e-input-group input:not(:valid), 

    .e-input-group input:valid, 

    .e-input-group.e-control-wrapper input:not(:valid), 

    .e-input-group.e-control-wrapper input:valid, 

    .e-float-input.e-control-wrapper textarea:not(:valid), 

    .e-float-input.e-control-wrapper textarea:valid, 

    .e-float-input textarea:not(:valid), 

    .e-float-input textarea:valid, 

    .e-input-group.e-control-wrapper textarea:not(:valid), 

    .e-input-group.e-control-wrapper textarea:valid, 

    .e-input-group textarea:not(:valid), 

    .e-input-group textarea:valid { 

        border-color: white; 

    } 

 

Sample: https://stackblitz.com/edit/angular-m9gjgp-pgu5zw?file=app.component.css 

 

Please check the above sample and code snippet and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha.