5 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 11 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 19 hours 15 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

VeeraM
VeeraM's picture
Offline
Enthusiast
bangalore
Last seen: 4 years 7 weeks ago
bangalore
Timezone: GMT+5.5
Joined: 2014-09-22
Posts: 59
Points: 59

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.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 11 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

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 !

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 19 hours 15 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 11 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

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.