This is my jsfiddle:
http://jsfiddle.net/BTYA7/4/
At the bottom of the white input box we can see that there is about 5px of padding / margin between the border and the white box. I have tried to use chrome developer tools but I cant see where it is coming from, can anyone help me pinpoint it?
It seems to be on this:
<div class="uEditor" style="">
But in the metric window there is no padding
That is because of the line-height property .. Set it to 0
.uEditor
{
line-height: 0;
}
Check FIDDLE
You can change the line-height to 0 as Sushanth suggested. But line-height is inheritable so you would have to change it back to normal value for the child elements.
Therefore I suggest you change the background colour on the .uEditor to white and leave the line-height unchanged.
See this jsfiddle.
Related
When border radius applied to list then the text is overflowing. This is happening only in IE. I am using IE11.
You can add padding to the content so as to prevent the text from cutting
padding: 15px;
http://jsfiddle.net/36raavxe/19/
Please use padding , That will solve the issue
So I've got a bit of a weird issue which is happening in Chrome (latest version on Mac). Here is the fiddle which replicates it: http://jsfiddle.net/mwznjnoc/1/
You'll see that the search bar has a set height of 40px. However, as soon as the right side red cell has content which makes it scroll, it squishes the search bar. Moving the search bar outside of the div it is in and under the header div fixes the issue, but I cannot fix it that way (the search bar is part of the view content, which gets rendered in the div it is in). Removing height: 100%; from html and body stops it from happening, but is not the fix as I need the viewport height to be 100%. This layout works fine in other browsers I've tested it with, anyone have an idea why this is happening or a way to adjust the layout to prevent it? Thanks for your time in advance!
You forgot the flex rule on your .search box.
Because it being a part of flex, you should remove the style height:40px from the .search box.
Then provide flex-grow and flex-shrink as 0, and flex-basis as 40px.
You may combine all three into one as flex: 0 0 40px. This will force the layout to contain the .search box within 40px and let other blocks grow or shrink in the available space.
Changes in HTML Markup:
<div class="search">search bar</div> <!-- Remove inline style for height -->
Changes in CSS:
.search {
flex: 0 0 40px; /* add the flex rule here */
background: #ccc;
}
Your Fiddle: http://jsfiddle.net/abhitalks/mwznjnoc/3/
As the title says, I try to fix a text element to the baseline while dynamically changing its font-size on window resize.
I made a jsfiddle to illustrate. The problem is, when resizing the window, the distance to the bottom of the window is not constant.
<div class="foo">text</div>
<script>
var onResizeFunction = function() {
var newFontSize = Math.floor(0.2 * $(window).width());
$(".foo").css("font-size", newFontSize);
};
onResizeFunction();
$(window).resize(function() {
onResizeFunction();
});
</script>
I tried to fix it like that.
.foo {
position:fixed;
bottom: 0;
}
Obviously the problem is the "hitbox" of the text element. Anyway, maybe somebody knows a nice css trick or workaround?
Its running in angular, so no fancy jquery allowed;)
EDIT:
Its about the distance from the bottom of the text element to the bottom of the window. This need to be constant.
The problem here is your line-height in combination with the font you use. As you notice you set the bottom to 0, yet the text is not aligned with the bottom of the window, as you would expect.
This can be solved by setting the line height to a value without a unit. This way the line height will be relative to the font size. One would expect that setting the line height to one would solve this, but this depends on the font, and how much of it's available height it uses.
If you experiment a little you should be able to find the sweet spot though. It won't be 100% accurate, but pretty close. I updated your fiddle as follows, and as you can see with the help of the ruler I added it comes pretty close:
.foo {
position:fixed;
font-family: arial;
bottom: 10px;
line-height: .7; /* this will depend on the used font */
}
https://jsfiddle.net/u6bd9qfp/2/
I have built this menu:
JSBIN EDIT ; JSBIN DEMO
As you see, the menu isn't centered at the middle of the bar, he's centered up. However, I want to make it go lower, exactly at the middle.
So, I had an idea to do margin-top: 26px because the bar's height is 53 pixels, but it doesn't change anything. I also did margin: 0 auto and text-align:center.
I read this STACKOVERFLOW and realized that it is related in float, but I don't want to float it - I want to make it go down.
Thank you!
You need to give the line height by using line-height. Okay, updated, the line-height trick doesn't work!!! And also, giving this to the <a> tag does the trick:
width: auto;
display: inline-block;
Fiddle: http://jsbin.com/cayob/2
Try setting the line-height of the links to the height of the bar, in this example 53 pixels.
The width of the div "topNav" changes by few pixels when its position style is changed from relative to fixed. I found a jquery plugin (http://imakewebthings.github.com/jquery-waypoints/) which can perform the same functionality I'm looking for elegantly, but I feel it is a overkill for this purpose.
EDIT: My question is how to avoid changing the div sizes.
Check out the code at :
http://jsbin.com/azace5/edit
You need to remove the page's "default margin". This will do it in "every browser":
html, body {
margin: 0;
padding: 0
}
See: http://jsbin.com/azace5/2
Or you can add a minimum width.
min-width:600px;