CODEWITHSUNDEEP
javascriptcss
PineCone
PineCone

Reputation: 2343

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

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>

Upvotes: 2

Views: 2712

Answers (3)

PineCone
PineCone

Reputation: 2343

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.

Upvotes: 1

Amessihel
Amessihel

Reputation: 6424

(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.

Upvotes: 0

Void Spirit
Void Spirit

Reputation: 909

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
}

Upvotes: 0

Related Questions