Inner textbox dosent ajust its width

[Jacob Saugmann]

Hi

Im using the AutoCompleteTextbox but it seems that the widt of the inner textbox dosen't fit the size of the control
i.ve tried whit bootstrap css


i want the text an textbox to fill the whole area.

i've also tried with the skins.Metro but the result is the same


my cshtml

       @{ Html.Syncfusion().AutocompleteTextBox("query")
                               .RequestMapper("HentNavne")
                               .CustomCSS("form-control")
                               .AutoFill(false)
                               .WaterMark("Søg medarbejder")
                               .Width(500)
                               .ListWidth(500)
                               .ListHeight(200)
                               .MinCharacter(2)
                               .Render(); }

[Gurunathan A]

Hi Jacob,

Thanks for contacting Syncfusion support.

 

We have analyzed your reported query. It might be due to some CSS has overridden for input element width on Autocomplete textbox and so the issue has reproduced. Henceforth could you please ensure any CSS is overriding or not?

 

Note: We have already ensured with bootstrap.css. It doesn’t collapse our Autocomplete Textbox control styles.

 

Please let us know if you require further assistance on this.

 

Thanks,

Gurunathan

[Jacob Saugmann]

Hi Gurunathan

When i look at my CSS

Note the class is watermark for the input control, when i change the css  in page inspector to "form-control watermark" then the control will filled the entire space as wanted but the control will have a blue highlight color when focused and that i don't want. all i want is for the input named "query to fill the entire area.
when i look at the css in firebug it seems to be SF calsses on the control

And the bootstrap css is overridden

[Gurunathan A]

Hi Jacob,

We regret for the inconvenience caused.

 

We have tried to reproduce the reported issue “Autocomplete width has not set properly when using Bootstrap.css”. Unfortunately, we were unable to reproduce this issue as you mentioned. But in your given CSS code, we found that max-width property has been set for all input tags from bootstrap.css file. So it may be reason for reported issue, if so please override that CSS class otherwise could you please share a simple sample which reproduces this issue, so that we can analyses the issue in depth and provide you better solution.

 

We have prepared a simple sample to show case this behaviour. It can be available in following link:

 

 

Please let us know if you have further queries.

 

Thanks,

Gurunathan

Attachment: Auto_F115923_14830d23.zip