Dynamically increase and decrease an input text box size depending on another selector width

Question

I have an input text box which has some padding to it. I also have a wrapper class selector which is used next to that input text box. I am trying to remove set padding from the input text box and make that space dynamic so that the element size would (especially width) increase and decrease depending on the screen size (i.e. Mobile or Large view as large screen) without effecting the wrapper.

The text box looks like the following. a, c, d, e are buttons which appear dynamically. So the space for b here should expand if the there is only one button on the right and decrease if there are all the buttons on the right.

|____|________________________ |_____|_____|_____|

a b c d e

so the css class selectors that I have includes b and another one includes all the c, d, e (wrapper).

I assume this can't only be done through CSS. Any suggestion?

CSS:

 .input {
  position: relative;
  width: 100%;
  max-width: var(--grid-main-max-width);
  padding: 1.188rem 2.9rem 1.188rem 4.5rem;
  margin: 0;
  font-size: 16px;
  border: 1px solid var(--color-gray);
  border-radius: 0.375rem;
  outline: 0;
  }


.wrapper {
position: absolute;
top: 0;
right: 1.5rem;
bottom: 0;
display: flex;
justify-content: center;
}

HTML

<div>
<input class="input">
  <div class= "wrapper">
  <button>c</button>
  <button>d</button>
  <button>e</button>
 </div>
</div>

Look into [CSS Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries). — Scott Marcus, Oct 09 '18 at 12:14
@ScottMarcus I already use `Media Queries` for different screen size. The issue is not this. The issue is to make the input text box dynamic. — PineCone, Oct 09 '18 at 12:18
@Amessihel let me get my solution working first with your ideas. Only then I can accept this as accepted answer. — PineCone, Oct 10 '18 at 06:57

score 1 · Accepted Answer · answered Oct 17 '18 at 11:31

The solution only needed to count the width of the input text box and the wrapper and assign the difference as a padding to the right of the input text box. The following little change was added to an onInput event.

document.getElemendById("inputTextBox").style.paddingRight = document.getElemendById("searchFieldWrapper").clientWidth;

And also needed to use Media Queries for @media (--large-viewport) / @media (--medium-viewport) to assign different padding for the input. as @Scott Marcus mentioned in a comment.

score 0 · Answer 2 · answered Oct 09 '18 at 12:28

Lets say you have div child blocks for those child elements or you can specify some class.

div:first-child:nth-last-child(1){
    width: 100%;
}

div:first-child:nth-last-child(2),
div:first-child:nth-last-child(2) ~ div{
    width: 50%;
}

div:first-child:nth-last-child(3),
div:first-child:nth-last-child(3) ~ div{
    width: 33.3%;
}

div:first-child:nth-last-child(4), 
div:first-child:nth-last-child(4) ~ div{
    width: 25%;
}
//and so on

Source refer to here

Also if you want to modify other elements you can use

div:first-child:nth-last-child(2) > .someClass{
    style:goesHere
}

Amessihel · Answer 3 · 2018-10-14T16:54:59.570

(UPDATE: I figured out you used a wrapper element, and that a is'nt a label but a button. But this answer is easily adaptable to your question.)

You can use the calc function provided by CSS. Given this piece of HTML (I joined all the elements to remove side effects of the blank characters; we can fix it in an other way but I wanted to keep the answer simple):

<html>
  <head>
  </head>
  <body>
    <article id="demo">
      <label>a</label><input type="text" placeholder="b" /><button>c</button><button>d</button><button>e</button>
    </article>
  </body>
</html>

This piece of CSS allow the input text element to fill the available space.

article#demo {
  /* the width (80vw) includes border and padding */
  width: 80vw;
}

article#demo label {
  /* to make label resizable */
  display: inline-block;
  width: 30px;
}

article#demo button {
  width: 20px;
  margin: 0;
  padding: 0;
  background-color: #f0f0ff;
  box-sizing: border-box;
  /* see above */
}

article#demo input[type="text"] {
  box-sizing: border-box;
  /* text input width = 100% minus other items */
  width: calc(100% - 30px - 3 * 20px);
}

You can set the width of article#demo using any unit (em, ex, etc.) it should work.

In your final design, use box-sizing:border-box to set the whole element, including borders and padding, within the CSS width. Otherwise, you'll have to adjust the calc parameter.

If you put left or right margins, count them too.

If you use font-dependent units (em, etc.), the same font-family and other font-related CSS entries have to be set - implicitly or not - for all the concerned elements.

Working fiddle with a little interactive test here.

The buttons seem static in your solution. The input text search box needs to dynamically change size without any button click which you have the `onClick` event. — PineCone, Oct 09 '18 at 13:28
The onClick is just here for the demo. You can resize manually the fiddle frame to see the changes. The size of the buttons doesn't change, yes, I understood you wanted a dynamic width for your text input, am I wrong ? — Amessihel, Oct 09 '18 at 13:59

Dynamically increase and decrease an input text box size depending on another selector width

3 Answers3