How to make input pop out and show whole content - html

Question

I have multiple inputs and for some of them the input is to small to display the whole text (can not be changed). Is there a way to show the whole content of the input when hovering without breaking the rest of the layout? I included an example. I am trying to have the input pop out and be on top of the other inputs without breaking the design.
https://jsfiddle.net/14e37gj0/
I am not realy good with css.
I tried something like this.
input {
width: 10%;
}
input:hover {
width: 100%;
}
Best regards

Answer 1

First way to come on my mind was using Flexbox
so first of all, you need to wrap all your input tags with a wrapper like this
<div class="wrapper">
<input type="text" value="This text is long and I want to see the whole input when hovering" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
And in CSS add the following rules
.wrapper {
display: flex;
}
input:hover {
flex: 1 1 auto;
}
The flex: 1 1 auto is the one responsible to fill remaining gap until the end of the row.
Things could still be more efficient, but i tried to make it as simple as possible, and i suggest you learn more about CSS Flexbox.

Answer 2

Wrap the inputs in a flexbox div:
.row{
display:flex;
width:100%;
}
input {
width: 10%;
}
input:hover {
width: 100%;
}
<div class="row">
<input type="text" value="This text is long and I want to see the whole input when hovering"/>
<input type="text" />
<input type="text" />
<input type="text" />
</div>

Answer 3

You can use javascript to create a mouseover and mouseout event to create an absolutely positioned element, then pass the value of the event.target into its content. Use insertAdjacentHTML to add it on mouseover and use .remove() to remove it on mouseout. Check the inputs clientWidth with the inputs scrollWidth to see if you have overflow, if you do, insertAdjacentHTML span tag with class of .content with the e.target.value as its content.
See below code in snip it with full explanation of code above each line:
// get nodelist of all inputs
let inputs = document.querySelectorAll('input')
// function for the event listeners, pass the event into it as poarameter => e
function showAllContent(e) {
// the following positions will be used to position our
// absolutely positioned span tag below the event.target element
// get the top position of the event target => "input" being hovered
let top = e.target.getBoundingClientRect().top
// get the left position of the event target => "input" being hovered
let left = e.target.getBoundingClientRect().left
// get the height of the event target => "input" being hovered
let height = e.target.getBoundingClientRect().height
/* set a root variable for e.target top and left to be used in CSS to style
the position of the absolutely positioned span tag
NOTE: if you change the inputs layout of have elements below,
you will likely have to play with these settings a bit */
document.documentElement.style.setProperty('--e-target-top', `${top + height}px`)
document.documentElement.style.setProperty('--e-target-left', `${left}px`)
// set variable for event target value
let allContent = e.target.value.trim()
// set variable to show all of event.target.value
let span = `<span class="content">${allContent}</span>`
// conditional to make sure event.target is not null and also
// make sure its scrollWidth is greater than its clientWidth
if (allContent && e.target.scrollWidth > e.target.clientWidth) {
// check type of event is mouseover
if (e.type === 'mouseover') {
// insert the span tag into the DOM
e.target.insertAdjacentHTML('afterend', span)
}
// check type of event is mouseout and .content is set
if (e.type === 'mouseout' && document.querySelector('.content')) {
// remove the element from DOM
document.querySelector('.content').remove()
}
}
}
// iterate over the input nodeList
inputs.forEach(input => {
// event listener for mouseover
input.addEventListener('mouseover', showAllContent)
// event listener for mouseout
input.addEventListener('mouseout', showAllContent)
})
:root {
/* this will set our top position in the .content class it is being sent
from JS using style.setProperty('--e-target-top', `${top + height}px`) */
--e-target-top: 0;
/* this will set our left position in the .content class it is being sent
from JS using style.setProperty('--e-target-left', `${left}px`) */
--e-target-left: 0;
}
input {
width: 10%;
}
.content {
display: inline-block;
position: absolute;
left: var(--e-target-left);
top: var(--e-target-top);
width: auto;
height: auto;
background: #ccc;
border-radius: .5rem;
padding: .5rem;
margin-top: 2px;
}
<div id="parent">
<input type="text" value="This text is long and I want to see the whole input when hovering" />
<input type="text" value="small text" />
<input type="text" value="this inputs scrollWidth will overflow the clientWidth" />
<input type="text" />
</div>