Thu, 2015-05-07 13:22
hey guys , have a look at my html below ::
<span class="input"> <input type="text" id="akira" class="akira-input"> </span>
The CSS ::
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } .input { position: relative; display: inline-block; max-width: 350px; width: 100%; height: 20px; } .akira-input { position: absolute; top:0; left: 0; display: block; height: 100%; width: 100%; background: transparent; z-index: 10; }
now why is it that the input is bigger on all sides my 1px in comparison to span , even though span is the parent ?? Why ?
P.S. This can be seen in the dev tools by hovering over span or input , check computed styles too .
Thank you.
Gautam.
Thu, 2015-05-07 14:30
#1
Flow
You made the input position:absolute, which is not in the flow. It's parent is unaware of its child.
The real question is why are you doing something that is unlikely to ever be sanely used in a real case?
cheers,
gary
Thu, 2015-05-07 15:03
#2
input bigger than span
Hi,the input bigger than span are sub characteristics menu are div sub divs classes are used in this method,stripped down to this level making the input larger than the container.
Thu, 2015-05-07 19:17
#3
real world use case
heres the real world use case : http://jsfiddle.net/u46Luemf/
P.S. i taught i should minify my problem and so posted only the relevant part . anyways coming to my question , @gary , you say the parent is not aware of the child ? i have given the parent a position:relative and child position:abosute ,exactly for the reason that the parent should be aware of the child !
Thu, 2015-05-07 23:12
#4
Not quite
Making the parent relative only gives the absolute child a reference point.
Can you tell me just what you expect to happen, for example, when <input> gains focus? When it loses focus?
It is dangerous to set margins a padding with *{}. form controls can get wonky and it isn't undoable.
cheers,
gary
Tue, 2015-05-12 09:41
#5
gary heres what i mean
referance point ? hmmmm , not sure what you mean , heres an example to depicting what i mean ::
<div class="test"> <div class="inner"> </div> </div>
now see the 1st set of CSS ::
.test { height: 300px; width: 300px; background: #eee; } .inner { height: 100%; width: 100%; background: #444; }
now lets remove the 1st set of CSS and add the 2nd set of CSS , as follows ::
.test { height: 300px; width: 300px; background: #eee; position: relative; } .inner { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #444; }
in both cases is't inner a .child of .test and thus , in both cases is't .inner suppose to be smaller or equal to .test , unless explicitly specified in the CSS ??
regarding your focus question , when the user focuses on the input the text inside the input moves either to the top or bottom of the input area , this is achieved using
transform:translate3d(0,somevalue,0);
see the fiddle here :
Thanks for the last pointer about add the margin and padding to the * selector , i'd like to know more , is there an example that you can show that 'causes such a bug ??
Thank you.
gautam.