CDHtmlDialog- HTML file with select and label tag

abc abc 351

Hi,

I am using windows 10 and VS2019.

I am loading HTML file in CDHTMLDialog.

The HTML file has select and label tags.

In IE9 and Microsoft Edge, the label text is center aligned to select/option tag.

In CDHtmlDialog, the label text is bottom aligned to select/option tag.

In CDHtmlDialog I want the alignment as in browser. Please help me.

SM 416 Reputation points

2021-08-24T21:43:37.193+00:00

Not an answer for your question about CDHtmlDialog but just wanted to point that WebView2 is available that is based on Chromium.

-SM

1 answer

Jeanine Zhang-MSFT 10,031 Reputation points Microsoft Vendor

2021-08-25T06:27:42.033+00:00

@abc abc

I suggest you could try to use: vertical-align: middle;

You could refer to the link: https://stackoverflow.com/a/46148853/11872808
Please sign in to rate this answer.

1 person found this answer helpful.
abc abc 351 Reputation points

2021-08-25T14:54:08.093+00:00

In browser,by default alignment is fine. Why CDHtmlDialog shows different alignment.

vertical-align: middle; is not helped for CDHtmlDialog.

Jeanine Zhang-MSFT 10,031 Reputation points Microsoft Vendor

2021-08-26T08:10:58.947+00:00

@abc abc

vertical-align: middle; is helped for CDHtmlDialog.

Here is my code:

<label for="car-select" style="font-size:20px;vertical-align: middle">Choose a car:</label>
<select name="cars" id="car-select" style="vertical-align: middle">

abc abc 351 Reputation points

2021-08-26T12:07:13.923+00:00

Thanks a lot JeanineZhang.
Previously I applied vertical-align:middle only to label thats why it did not work.

If I put label and select inside div and apply style vertical-align:middle to div, it is not working why?

<div style="vertical-align: middle;"> <label for="cars">Choose a car:</label> <select name="cars" id="cars" > <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </div>

Jeanine Zhang-MSFT 10,031 Reputation points Microsoft Vendor

2021-08-27T02:00:43.34+00:00

@abc abc

The vertical-align only applies to inline, inline-block and table-cell elements: you can't use it to vertically align block-level elements.

abc abc 351 Reputation points

2021-08-27T18:09:20.277+00:00

In browser applying style vertical-align:middle to div is working for select and label element

Jeanine Zhang-MSFT 10,031 Reputation points Microsoft Vendor

2021-08-31T02:58:24.013+00:00

I suggest you could refer to the link: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

As far as I'm concerned, in browser applying style vertical-align:middle to div may be not working for select and label element.
Refer to the thread: https://stackoverflow.com/questions/16629561/why-is-vertical-align-middle-not-working-on-my-span-or-div

Jeanine Zhang-MSFT 10,031 Reputation points Microsoft Vendor

2021-09-02T08:34:58.08+00:00

@abc abc

May I know if you have got any chance to check my answer? I am glad to help if you have any other questions.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

CDHtmlDialog- HTML file with select and label tag

1 answer

Your answer