Hi mostafasalama,
On page load you need to find the maximum width of the ListBox Item and then apply the width to the ListBox.
Refer below sample.
HTML
<asp:ListBox ID="lstCities" runat="server" Width="75px">
<asp:ListItem Text="Mumbai" Value="1"></asp:ListItem>
<asp:ListItem Text="Delhi" Value="2"></asp:ListItem>
<asp:ListItem Text="Chandigarh City" Value="3"></asp:ListItem>
</asp:ListBox>
<script type="text/javascript">
window.onload = function () {
var lst = document.getElementById("lstCities");
var maxWidth = 0;
for (var i = 0; i < lst.length; i++) {
if (lst.options[i].text.length > maxWidth) {
maxWidth = lst.options[i].text.length;
}
}
lst.style.width = maxWidth * 8 + "px";
};
</script>
Screenshot
