make q-select style exactly as q-input

[Claus1]

I injected editing in q-table but can not make normal look for q-select (without gray fixed extra space behind).

It has to be exactly as q-input without that grey fixed rectangle. How to remove it and make the same?

P.s tried copy sass section from q-input but it does not work (I am not css expert at all).

[ontwikkelfabriek]

@Claus1

Please create a codepen.io that demos your problem. You'll get much better support.

[pikil]

Did you try to remove filled attribute or add borderless?
If so, have a look at your css, looks like some of the classes from your own code intervene

[Claus1]

I tried every attribute combination. gray fixed extra space behind is irremovable.
@ontwikkelfabriek I already showed screenshot what quasar allows and what I need. I am looking for a method how to eliminate the gray fixed size area which is attached to all q-select.

[pikil]

@Claus1 You need to provide a codepen or jsfiddle then
It is working just fine in the quasar examples

[Claus1]

@pikil Can you send a link to that example? not clear what modification you made. And it remains big. I hope to make it with adopted size like q-input.

[pikil]

https://quasar.dev/vue-components/table#body-slots
Open example in codepen and add <q-select /> into any cell - you will see the same

[Claus1]

@pikil Thanks! https://codepen.io/Claus1/pen/BaZeyzo?editors=1011
Here I can not make size and behavior for q-select when editing as for q-input.
It's always expand from text on big and fixed size. I use select only for 1 active field, the others are just texts. Inside table such expanding looks bad. The first column is q-select, the second is q-edit. I hope the difference is visible in size.

[ontwikkelfabriek]

@Claus1

I really don't understand what you want to demo in your codepen. If I remove the green badge around your q-input in col 2, it looks exactly like the q-select on col 1.

It's always expand from text on big and fixed size. I use select only for 1 active field, the others are just texts. Inside table such expanding looks bad. The first column is q-select, the second is q-edit. I hope the difference is visible in size.

When I remove the green badge, all the expanding and size difference problems disappear. Can you try to be more clear what the problem is? I am really trying here....

[Claus1]

@ontwikkelfabriek

As you see for same length text the width of q-select is fixed and much bigger than required compare with q-input. In my editable table all fields are text. When I select such text field it switches to q-select or q-input for editing. And (!) q-select expand and corrupt good table view by expanding the space which move and distort the right part of table and enormously expands the height. You can see on the pic above. I want THE SAME LOOK AND behavior as q-input.
Non-edit mode

Edit mode - enormous expanding

[ontwikkelfabriek]

@Claus1

As you see for same length text the width of q-select is fixed and much bigger than required compare with q-input. In my editable table all fields are text. When I select such text field it switches to q-select or q-input for editing. And (!) q-select expand and corrupt good table view by expanding the space which move and distort the right part of table and enormously expands the height.

Ok, let me try it one more time. Instead of posting images and a codepen (that does not demonstrate what you describe above), why can't you create a WORKING codepen.io that demos EXACLTY the unwanted behavior you see on your LOCAL dev machine. Otherwise people that want to help you, not only have to guess what you want, but also have to (re)create their version of YOUR problem (in a codepen) with a table with columns with a q-select and q-input with inline edit and....ect

[Claus1]

@ontwikkelfabriek I made codepen.io example but it does not work normally although the same code works in my program.
https://codepen.io/Claus1/pen/BaZeyzo?editors=1011

1. fragment that does not work:

<q-tr :props="props">
          <q-td key="name" :props="props">
            <q-select use-input fill-input autofocus  hide-dropdown-icon :model-value='props.row.name' dense :options='options' 
                   v-if ="row === props.row && colname == 'name'"/>
            <div v-else @click="select(props.row, 'name')">{{props.row.name}}</div>
          </q-td>
     ...

Normally it has to show div v-else with text. Shows nothing.

2. The same fragment with q-input instead of q.select works ok. You can see the text and the click causes switching to edit mode.

<q-td key="calories" :props="props">            
      <q-input :model-value='props.row.calories' dense autofocus v-if ="row === props.row && colname == 'calories'"></q-input>
      <div v-else @click="select(props.row, 'calories')">{{props.row.calories}}</div>
 </q-td>

! If fix the 1 fragment you would see that switching any 'name' field to edit mode causes enormous expanding compare with q-input 'calories' expanding. For that fields has to be small, not full screen as in codepen.io. That is the problem.

[ontwikkelfabriek]

@Claus1

I don't have time right now to fix your codepen. If your really need a solution then I suggest:

1. Create a (GitHub) repo with a working demo( so I can take a look at that)
2. Ask the Quasar team on the discord server.

[Claus1]

@ontwikkelfabriek My codepen does not have errors for demonstrating effect. The bug is in codepen.io or in quasar.
Just point me how to decrease fixed size of q-select in width and height and make it as q-input. how to?

[ontwikkelfabriek]

@Claus1

I don't have time right now to fix your codepen. If your really need a solution then I suggest:

Create a (GitHub) repo with a working demo( so I can take a look at that)
Ask the Quasar team on the discord server.