How to keep place holder after select... | Blazor Forums

DR Deepak Ramakrishnan Syncfusion Team July 27, 2021 03:07 PM UTC

Hi Ahmed,

Greetings from Syncfusion support.

We have validated your requirement , unfortunately we couldn’t find any online link as you mentioned ‘Please look into this link and advise how to resolve this issue’ . We suspect that you have missed to include the link . So we have created a sample based on your forum title . Please find the below sample link for your reference .

Sample Link : https://www.syncfusion.com/downloads/support/forum/167616/ze/BlazorApp11085086822

You can use ‘FloatLabelType’ property to relate the value with provided placeholder.

1. FloatLabelType.Always è Always keeps the placeholder at the top of the component whether the value is selected or not.

<SfDropDownList TItem="GameFields" TValue="string" PopupHeight="230px" FloatLabelType="FloatLabelType.Always" Placeholder="Select a game" DataSource="@Games">

<DropDownListEvents TItem="GameFields" TValue="string" ></DropDownListEvents>

<DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>

</SfDropDownList>

2. FloatLabelType.Auto è Initially the placeholder is present inside the component , It sets the placeholder at the top of the component after performing the actions like focusing , selecting value and dynamically setting value to the component

<SfDropDownList TItem="GameFields" TValue="string" PopupHeight="230px" FloatLabelType="FloatLabelType.Auto" Placeholder="Select a game" DataSource="@Games">

<DropDownListEvents TItem="GameFields" TValue="string" ></DropDownListEvents>

<DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>

</SfDropDownList>

3.FloatLabelType.Never (Default Type) è Placeholder will hide once the value get selected.

Kindly revert us if you have any concerns in it.

Thanks,

Deepak R.

KI KINS July 27, 2021 04:45 PM UTC

Thanks for quick support..

I am using material theme,so the texbox and combobx height is some what increase ,when I use place holder

Can you please mention the css class to reduce the height of control and sharp..

KI KINS July 28, 2021 06:07 AM UTC

please help and see my comments in below link and see my sample code

video:-

https://www.screencast.com/t/NamxAbTco2H

source code :-

@inherits SampleStyleEditBase

<tr>

<th>

@*<div class="PageHeader">*@

<h3 id="UCardHeader">Sample Master1232</h3>

</div>

</CardHeader>

@*</div>*@

</div>

</th>

</tr>

</table>

<tr>

<th>

@*<img src="images/shoe1.jpg" alt="Image" />*@

</div>

</th>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</EditForm>

</th>

</tr>

</table>

@*<SfCard>

</SfGrid>

</div>

</CardContent>

</SfCard>

<br />

<SfButton>Size Breakup</SfButton>

</div>

<SfButton>Bill of Material</SfButton>

</div>

<SfButton>Process Spec</SfButton>

</div>

<SfButton>Comments</SfButton>

</div>

<SfButton>Attatchment</SfButton>

</div>

<SfButton>Communication</SfButton>

</div>

</div>*@

</CardContent>

</SfCard>

@*<SyncSideBar Dock="72px" />*@

DR Deepak Ramakrishnan Syncfusion Team July 29, 2021 12:15 PM UTC

Hi Ahmed,

Thanks for your patience .

We have validated your requirement with the provided details . Unfortunately we couldn’t recreate the sample as per the UI shown in demonstration video with the provided sample .We suspect the cause of the issue as per our understanding is that, you have used two table headers , In one of the header you have placed the image/avatar and in another you have placed all other syncfusion components. So while minimizing the all our components re-aligned at one column and the image/avatar at the another column ,So We suggest you to place the avatar/image also with single table header attribute ‘<th>’ to achieve your requirement. We have created a sample to decreasing/increasing the height of the Syncfusion component. Please find the below sample link for reference . If this not meet your requirement then provide the following details to validate your requirement further .

1 . Simple runnable sample which re-creates the UI shown in video.

Types of modifying height of textbox :

Type 1 :

1 . You can use ‘e-small’ to minimize the size of textbox without overriding the existing classes.

<SfTextBox Placeholder="input" CssClass="e-small" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>

Type 2 :

2.You can override the existing css classes to modify the height and size of the float-text and the input components as per your requirement.

<style>

/* Adjust height of the textbox */

.e-input-group input.e-input,

.e-float-input.e-input-group input,

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

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

.e-float-input input,

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

min-height: 18px;

}

/* Modify font size */

.e-float-input,

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

font-size: 12px;

}

/* Font size for placeholder on top */

.e-float-input input:valid ~ label.e-float-text,

.e-float-input input ~ label.e-label-top.e-float-text,

.e-float-input.e-control-wrapper input:valid ~ label.e-float-text,

.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text {

font-size: 12px;

}

/* Font size for placeholder on bottom */

label.e-float-text,

.e-float-input label.e-float-text,

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

.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,

.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {

font-size: 12px;

}

</style>

Sample Link: https://www.syncfusion.com/downloads/support/forum/167616/ze/BlazorApp1-228714898

Kindly revert us if you have any concerns in it.

Thanks,

Deepak R.

KI KINS July 30, 2021 06:21 AM UTC

Thanks for reply

And we are happy for fast support

For Image alignment, I have taken example from below link.Pleaae modify and its my urgent requirement

https://www.syncfusion.com/forums/167035/help-for-design-in-synfusion-control

For Type2 css:-

it's now working for dropdown and its working for textbox and date control

DR Deepak Ramakrishnan Syncfusion Team July 30, 2021 06:04 PM UTC

Hi Ahmed,

Thanks for your update.

We are currently working on your requirement . We will update the further details on or before 3^rd,August 2021.Until then We appreciate your patience .

Regards,

Deepak R.

DR Deepak Ramakrishnan Syncfusion Team August 3, 2021 06:00 PM UTC

Hi Ahmed,

Sorry for the inconvenience caused.

We are still working on your requirement due to its complexity, And we will update the futher details on 5^th , August 2021. We appreciate your patience until then.

Regards,

Deepak R

KI KINS August 5, 2021 11:34 AM UTC

Is it possible to get answer today ??

DR Deepak Ramakrishnan Syncfusion Team August 5, 2021 06:43 PM UTC

Hi Ahmed,

Thanks for your patience.

We have modified your sample as per your requirement. In that we have removed ‘table’ attribute and handled it using ‘div’ .Please refer the following sample link for your reference .Now the image get aligned to top of the row while minimizing the screen.

SnapShot:

Sample Link : https://www.syncfusion.com/downloads/support/forum/167616/ze/BlazorAppLayout-1818541098

Also we have validated your another query ,

Query :
For Type2 css:- it's now working for dropdown and its working for textbox and date control

Unfortunately we couldn’t reproduce the issue at our end. Kindly refer the below sample for your reference.

Sample Link: https://www.syncfusion.com/downloads/support/forum/167616/ze/BlazorApp1-312847

If still the issue reproduces at your end kindly modify the provided sample as per your requirement if possible ad get back to us, to validate the issue from our end.

Kindly revert us if you have any concern in it.

Thanks,

Deepak R.

DR Deepak Ramakrishnan Syncfusion Team August 6, 2021 06:20 AM UTC

Hi Ahmed ,

Thanks for your update.

We are glad that your requirement have fulfilled. Please get back to us if you need any further assistance, we will be always happy to assist you.

Thanks,

Deepak R.

KI KINS August 6, 2021 06:30 AM UTC

thanks exact requirement.......

I have 95% problem solved

but only facing some small issue,please check below screencast and advise how to do this

https://www.screencast.com/t/XDLBJpsBo

KI KINS August 6, 2021 06:31 AM UTC

forgot to attach my code

Attachment: Design_35534c68.zip

DR Deepak Ramakrishnan Syncfusion Team August 9, 2021 11:00 AM UTC

Hi Ahmed,

Thanks for your update.

We have validated your requirement , but we couldn’t able to run the provided sample . So we have modified your previous sample with your requirement as per the video attached .Please refer the below sample for your reference.

Please include the styles like below to achieve your requirement.

[DataEntry.razor]

<tr>

<th>

<h3>Sample Request Form</h3>

</div>

<SfButton style="width:100px">Save</SfButton>

</div>

<SfButton style="width:100px">Back</SfButton>

</div>

<SfButton style="width:100px">S R F </SfButton>

</div>

</th>

</tr>

</table>

Sample Link : https://www.syncfusion.com/downloads/support/forum/167616/ze/BlazorAppLayout-47460492

Thanks,

Deepak R.

KI KINS August 10, 2021 04:26 AM UTC

sorry again,

Please check my updated source code with complete project and advise how to do this..

https://www.screencast.com/t/nwOwjsPTlf

Attachment: Sidebar_blazor12494466591513311662_74caee59.zip

KI KINS August 10, 2021 02:21 PM UTC

Please help

DR Deepak Ramakrishnan Syncfusion Team August 11, 2021 04:55 PM UTC

Hi Ahmed,

Thanks for your update.

We have validated your requirement in our end . We will update the further possibility details on or before 13^th, August 2021.We appreciate your patience until then.

Thanks,

Deepak R.

KI KINS August 11, 2021 04:58 PM UTC

Thanks for info..

Is it possible tomorrow ‽?

Please give high priority to close this thread..

DR Deepak Ramakrishnan Syncfusion Team August 12, 2021 04:23 PM UTC

Hi Ahmed,

Thanks for your update.

As mentioned earlier , we will update the details as promised . Also we request you to provide the exact requirement for further processing , In the previous update the image overlapped the header of the respective section .But in last update,the provided sample seems different while minimizing the screen . It will help us to analyze and provide you the better solution.

Thanks,

Deepak R.

KI KINS August 12, 2021 04:48 PM UTC

Sorry for confusion...

Tha last attached source code is final one which we need .

I have attached my problematic components with sidebar and tab concepts.

I would like to make responsive for all control when browser is resized including Image which should come on center .

Hope it's clear.

Please help..

KI KINS August 13, 2021 11:03 AM UTC

Is it possible to get answer today...

please help....

DR Deepak Ramakrishnan Syncfusion Team August 13, 2021 04:46 PM UTC

Hi Ahmed,

Thanks for your patience.

We have modified your sample as per your requirement . Kindly refer the below code and sample for your reference.

[Header content]

<tr>

<th>

<h3>Sample Request Form</h3>

</div>

<SfButton style="width:100px">Save</SfButton>

</div>

<SfButton style="width:100px">Back</SfButton>

</div>

<SfButton style="width:100px">S R F </SfButton>

</div>

</th>

</tr>

</table>

[Style part]

@@media screen and (max-width: 600px) {

.img{

margin-right: 150px;

}

th .bt {

padding-right: 1200px;

padding-bottom: 10px;

padding-left: 100px;

}

[Output]

Sample Link: https://www.syncfusion.com/downloads/support/forum/167616/ze/Sidebar_blazor-1249446659-43815048

Thanks,

Deepak R.

KI KINS August 16, 2021 04:40 AM UTC

still facing same issue.

please check below link for clear picture

https://www.screencast.com/t/wdHKtG1S0C

and also there should not be any much space in three button (head card side)

DR Deepak Ramakrishnan Syncfusion Team August 16, 2021 03:17 PM UTC

Hi Ahmed,

Sorry for the inconvenience caused .

We couldn’t find the requirements details regarding sidebar in previously provided . But now as per your last update we are working on making sidebar responsive and buttons to be aligned closely . We will provide the modified sample on or before 18^th,August 2021. We appreciate your patience until then.

Thanks,

Deepak R.

KI KINS August 16, 2021 03:26 PM UTC

Sorry please ignore this thread

I have solved this problem.

Can you help for below thread.this is on my priority task

https://www.syncfusion.com/forums/164226/how-to-switch-themes

BC Berly Christopher Syncfusion Team August 17, 2021 07:15 AM UTC

Hi Ahmed,

Thanks for the update. Please let us know If you need further assistance on this.

Regards,

Berly B.C

.NET PDF Processing Library

.NET PDF Processing Library

Viewer Component

Conversions

.NET Word Processing Library

.NET Word Processing Library

Editor Component

Conversions

.NET Excel Processing Library

.NET Excel Processing Library

Editor Component

Conversions

.NET PowerPoint Processing Library

.NET PowerPoint Processing Library

Conversions

How to keep place holder after selecting value

Enterprise Solutions

.NET PDF Processing Library

.NET PDF Processing Library

Viewer Component

Conversions

.NET Word Processing Library

.NET Word Processing Library

Editor Component

Conversions

.NET Excel Processing Library

.NET Excel Processing Library

Editor Component

Conversions

.NET PowerPoint Processing Library

.NET PowerPoint Processing Library

Conversions

Learning

Resources

Support

How to keep place holder after selecting value