Autocomplete with addons

[angelru]

<Container Fluid>
    <Row Margin="Margin.Is3.FromTop">
        <Field ColumnSize="ColumnSize.Is10.Is1.WithOffset">
            <Addons>
                <Addon AddonType="AddonType.Start">
                    <AddonLabel><Icon Name="IconName.Search" /></AddonLabel>
                </Addon>
                <Addon AddonType="AddonType.Body">
                   <Autocomplete TItem="Alumno" 
                                  TValue="string"
                                  Data="@alumnos"
                                  TextField="@(( item ) => item.Username)"
                                  ValueField="@(( item ) => item.Username)"
                                  SelectedValue="@selectedSearchValue"
                                  SelectedValueChanged="@MySearchHandler"
                                  Placeholder="Alumno..."
                                  Filter="AutocompleteFilter.StartsWith"
                                  FreeTyping
                                  CustomFilter="@(( item, searchValue ) => item.Username.IndexOf( searchValue, 0, StringComparison.CurrentCultureIgnoreCase ) >= 0 )">
                        <NotFoundContent> Sorry... @context was not found! :( </NotFoundContent>
                    </Autocomplete>
                </Addon>
            </Addons>
        </Field>
    </Row>

</Container>

Autocomplete:

TextEdit:

If I change the Autocomplete for a TextEdit it adjusts to the size that I put in the column, what am I doing wrong?

[angelru]

@stsrki

[stsrki]

Autocomplete is an extension so it doesn't strictly follow the bootstrap structure for addons. For example, input is placed inside of the dropdown. So the default Bootstrap CSS selectors are not applied. You can try adding a 100% width on autocomplete. eg Width="Width,Is100".