CSS fun: mysterious 10.4%
-
We are using Kendo UI components for an MVC application. Kendo's CSS has textbox width set as 12.4em. I want it to be 100%. So, in jQuery, I was setting it to 100%. But when the control is rendered, in the source I see it to be 110.4%. After just looking at the screen for sometime (didn't knew what to do), I asked my colleague for help. And we both were confused. We then created a 100px wide div and added a textbox to it. Then, same jQuery function was called to change the width to 100% instead of default 12.4em. It still showed up as 110.4%. Time not being on my side, I changed width in jQuery function to 89.6% and then it rendered as 100%. We are still looking for a good detective to help solve the mysterious 10.4%.
"It is easy to decipher extraterrestrial signals after deciphering Javascript and VB6 themselves.", ISanti[^]
-
We are using Kendo UI components for an MVC application. Kendo's CSS has textbox width set as 12.4em. I want it to be 100%. So, in jQuery, I was setting it to 100%. But when the control is rendered, in the source I see it to be 110.4%. After just looking at the screen for sometime (didn't knew what to do), I asked my colleague for help. And we both were confused. We then created a 100px wide div and added a textbox to it. Then, same jQuery function was called to change the width to 100% instead of default 12.4em. It still showed up as 110.4%. Time not being on my side, I changed width in jQuery function to 89.6% and then it rendered as 100%. We are still looking for a good detective to help solve the mysterious 10.4%.
"It is easy to decipher extraterrestrial signals after deciphering Javascript and VB6 themselves.", ISanti[^]
The first thing I'd check would be the
box-sizing: box-sizing - CSS | MDN[^] Box Sizing | CSS-Tricks[^] The default iscontent-box, which means any padding and borders are added to the specified width. If you change it toborder-box, the width includes the padding and borders, which makes it much easier to reason about the layout.html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
We are using Kendo UI components for an MVC application. Kendo's CSS has textbox width set as 12.4em. I want it to be 100%. So, in jQuery, I was setting it to 100%. But when the control is rendered, in the source I see it to be 110.4%. After just looking at the screen for sometime (didn't knew what to do), I asked my colleague for help. And we both were confused. We then created a 100px wide div and added a textbox to it. Then, same jQuery function was called to change the width to 100% instead of default 12.4em. It still showed up as 110.4%. Time not being on my side, I changed width in jQuery function to 89.6% and then it rendered as 100%. We are still looking for a good detective to help solve the mysterious 10.4%.
"It is easy to decipher extraterrestrial signals after deciphering Javascript and VB6 themselves.", ISanti[^]
-
The first thing I'd check would be the
box-sizing: box-sizing - CSS | MDN[^] Box Sizing | CSS-Tricks[^] The default iscontent-box, which means any padding and borders are added to the specified width. If you change it toborder-box, the width includes the padding and borders, which makes it much easier to reason about the layout.html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
Haven't used Kendo before but I've had issues with em and Bootstrap before because it's cumulative which is why I always use rem now if I can.
-
The first thing I'd check would be the
box-sizing: box-sizing - CSS | MDN[^] Box Sizing | CSS-Tricks[^] The default iscontent-box, which means any padding and borders are added to the specified width. If you change it toborder-box, the width includes the padding and borders, which makes it much easier to reason about the layout.html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
Nicely done.
#SupportHeForShe Government can give you nothing but what it takes from somebody else. A government big enough to give you everything you want is big enough to take everything you've got, including your freedom.-Ezra Taft Benson You must accept 1 of 2 basic premises: Either we are alone in the universe or we are not alone. Either way, the implications are staggering!-Wernher von Braun
