Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow TextInputColumn to expand full width of table column #14812

Open
wants to merge 2 commits into
base: 3.x
Choose a base branch
from

Conversation

tanthammar
Copy link
Contributor

@tanthammar tanthammar commented Nov 15, 2024

Description

  • This PR makes all text input columns, expand full with of the table cell, by default. Which in my opinion is the expected behaviour.
  • Using TextInput::make('foo')->inline(), disables full width.

I think I've tried every possible option to make a TextInputColumn expand full width of its table column.

TextInputColumn::make('foo')->searchable()
            ->grow(),
            ->extraInputAttributes(['class' => 'w-full min-w-fit'])
            ->extraInputAttributes(['style' => 'width: 100%'])
            // and more...

Visual changes

Before, no matter how I tried to expand the column width
image

After, just added ->grow() to the column
image

Functional changes

  • [ x ] Code style has been fixed by running the composer cs command.
  • [ x ] Changes have been tested to not break existing functionality.
  • [ x ] Documentation is up-to-date.

Additional css suggestion

/* auto grow width of table cell inputs to fit its content */
td.fi-ta-cell :is(input.fi-input), td.fi-ta-cell :is(select.fi-select-input) {
    field-sizing: content;
}

@danharrin
Copy link
Member

@zepfietje wdyt about the additional suggestion? I think it's pretty smart, the way the text input column overflows is weird ATM I think. Prob also needs similar treatment on Select?

@danharrin danharrin added this to the v3 milestone Nov 17, 2024
@zepfietje
Copy link
Member

The field-sizing CSS API is amazing, but browser support isn't there yet unfortunately...
Been wanting to use that for our autosizing textarea too. 🥺

@danharrin
Copy link
Member

Well it would use the existing behaviour if that property is not available, right? And at the moment we have no autosizing on input columns. So I guess it doesn't hurt?

@zepfietje
Copy link
Member

Inconsistent behavior across browsers could still be a concern as devs/users may not be aware that the feature isn't supported on Firefox and Safari yet.

Apart from that, what would the UX be like exactly? Would the field grow in width when typing?

@tanthammar
Copy link
Contributor Author

It would be great if you could accept the PR to solve the main purpose, to allow textInputColumns to expand full width of the cell.

The additional css stuff can easily be added to local proj css for those who wants it.
It does no harm. The browser simply ignores it.
And yes, it grows when typing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Todo
Development

Successfully merging this pull request may close these issues.

3 participants