How can I centralize control

Question

I'm using Nebular Template.

I'm trying to use <nb-select>.

I couldn't centralize the control, once it as been inside another tag, <div class="input-group">, for example.

How could I centralize the <nb-select>, and how could I set 100% of width of this control, and the change has been visible at the control?

          <div class="input-group">
              <nb-select selected="0">
                <nb-option value="1">Verint Speech</nb-option>
                <nb-option value="2">Nice IA</nb-option>
              </nb-select>
            </div>

By "centralize" do you mean center? That is, are you trying to position the element such that it is centered horizontally? — Roddy of the Frozen Peas, Dec 12 '19 at 03:47

ArtemRomanovsky · Accepted Answer · 2019-12-31T08:22:27.070

2

How could I centralize the

According to code from the question you have nb-select inside div with input-group class. To center nb-select inside div add following CSS to your component:

.input-group {
  display: flex;
  justify-content: center;
}

how could I set 100% of width of this control

You can set fullWidth input of nb-select.

<nb-select fullWidth>
...
</nb-select>

See the docs for details

edited Dec 31 '19 at 08:22

answered Dec 27 '19 at 12:45

ArtemRomanovsky

129
4

Thank you for the solution! Funny enough it's case sensitive, thus `fullwidth` wouldn't work. – Victoria Oct 29 '22 at 15:16

score 0 · Answer 2 · edited Dec 12 '19 at 06:38

0

You need to override default CSS and force max-widht to 100% as follows. This worked for me.

nb-select{ 
    max-width: 100% !important;
    width: 100%; 
}

edited Dec 12 '19 at 06:38

Dulaj Kulathunga

1,248
2
9
19

answered Dec 12 '19 at 03:36

SKDesai

56
1
10

I think it's better to use the offered solution by the library `fullWidth`. – Victoria Oct 29 '22 at 15:18

How can I centralize control

2 Answers2