Textbox inside Column

Radzen.Blazor Components
1

Hi
I create a two RadzenTextBox with different column size but it overlaps each other.
it works fine in RadzenNumeric , RadzenDatePicker.

Captureaa
Captureaa1020×285 41.3 KB

output like this
image

2

Hi @bikash_paudyal,

Make sure you add width: 100% to allow the FormField and TextBox resize accordingly:

<RadzenColumn Size="3">
    <RadzenFormField Text="Region" Style="width: 100%;">
        <RadzenTextBox Style="width: 100%;" />
    </RadzenFormField>
</RadzenColumn>
1 Like
3

But I don't wants to use custom inline css , does it make a sense write custom inline css after using Radzen Component ?
It should be works like RadzenNumeric , RadzenDatePicker for my opinion :slight_smile:

4

We will explore if this exact scenario can be implemented without adding additional style attribute, but in any case you want the component to follow the column width you'd need to add width: 100%. Same applies to RadzenNumeric and RadzenDatePicker - try adding them without width in a column of size="12" and they will not stretch to the full column width:

image
image2278×368 10.5 KB

5

But it works for me without adding style ;

Capture11
Capture111086×153 22.9 KB

or even RadzenNumeric .

6

Or you can check this one without adding any styles ,

image
image1147×293 44 KB

image

7

Another option is to place the FormFields inside a RadzenStack layout

<RadzenColumn Size="3">
    <RadzenStack>
        <RadzenFormField Text="Region">
            <RadzenTextBox />
        </RadzenFormField>
    </RadzenStack>
</RadzenColumn>

Just have a look at how the various FormField demos are structured