What is the best way to have WebForms ComboBox's width reach to the end of the content

Brian Tan 40

I am currently working with WebForm's ComboBox and I am trying to make it reach to the end of the content.

I currently have the CSS looking like this

.CustomComboBoxStyle .ajax__combobox_textboxcontainer input {     
	background-color: #ADD8E6;     
	border: solid 1px Blue;     
	border-right: 0px none;     
	width: 100%; 
}

but the combobox doesn't reach all the way despite the width being 100%.

How can I make the combo box reach to the end of the content?

1 answer

XuDong Peng-MSFT 10,426 Reputation points Microsoft Vendor

2023-11-14T03:55:37.34+00:00
Hi @Brian Tan,

As far as I know, this problem may occur due to borders or paddings and margins between page elements. You can try to cancel the element width limit by setting max-width:none;.

.CustomComboBoxStyle { width: 1000px; } .CustomComboBoxStyle input { max-width: none; background-color: #ADD8E6; border: solid 1px Blue; width: 100%; } <div class="CustomComboBoxStyle"> <input type="text" id="CustomInput" name="CustomInput"> </div>

Result:

Best regards,

Xudong Peng

If the answer is the right solution, please click "Accept Answer" and kindly upvote. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Brian Tan 40 Reputation points

2023-11-14T16:36:08.2+00:00

Well it looks like 100% only reaches to where the button is. This is how I have my code now.

.CustomComboBoxStyle .ajax__combobox_textboxcontainer input { width: 100%; }

The aspx file looks like this

<ajaxToolkit:ComboBox ID="ComboBox1" runat="server" CssClass="CustomComboBoxStyle"> <asp:ListItem Text="Dog"></asp:ListItem> </ajaxToolkit:ComboBox>

And the combobox looks like this

If I set the width to be 50% , it would only reach halfway to the button.

.CustomComboBoxStyle .ajax__combobox_textboxcontainer input { width: 50%; }

It seems like we need to have the button reach all the way to the end but currently, I don't know a way of how to do that.

XuDong Peng-MSFT 10,426 Reputation points Microsoft Vendor

2023-11-15T07:27:28.39+00:00

Hi @Brian Tan,

The reason of it can’t reach all the way end is because it will generate two widgets, input and button.

So even if you set the input’s width:100 % it won’t affect the button. And because it is generated by <ajaxToolkit:ComboBox> it’s not easy to customize it to let the input widget and button widget get fuse.

The simplest way is kept increase the width of input and let it just overlap the button. Or you could try other way to do it.

<style> .CustomComboBoxStyle { width: 1000px; } .CustomComboBoxStyle select { max-width: none; background-color: #ADD8E6; border: solid 1px Blue; width: 100%; } </style> <div class="CustomComboBoxStyle"> <select type="text" id="CustomInput" name="CustomInput"> <option value="dog">Dog</option> </select> </div>

You could easily get the result:
Sign in to comment

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

Share via

What is the best way to have WebForms ComboBox's width reach to the end of the content

1 answer

Your answer