CODEWITHSUNDEEP
htmlcssresponsive
helloedsfsfgsg
helloedsfsfgsg

Reputation: 37

How to make textbox responsive the right way?

I want to make the search text box responsive fill the whole screen. I make it work but the orange button and advance dropdown menu is in the second line.

This is my CSS code for the search bar

.form-group.footable-filtering-search {
  width: 100%;
}
.footable .input-group-btn {
  display: block;
}

This is the page https://www.test.com/

Check prices table

What I have tried:

I tried to set the textbox for width:80% and the input-group-btn to flex.

But it completely disappear. I tried with contain too the same thing.

My question is how to make the textbox at full screen while the input-group-btn at the same line and responsive

Upvotes: 0

Views: 243

Answers (1)

Kamuran Sönecek
Kamuran Sönecek

Reputation: 3333

Use calc to calculate right size.

.form-group.footable-filtering-search {
  width: calc(100% - 74px);
}

74px is total of your buttons' size. If you change it, you have update this.

Upvotes: 1

Related Questions