Goal: In the current demo, theres a padding between the last word in the textarea field and the bottom border (the bottom border is realized through a "background" property).
Demo:
https://jsfiddle.net/7vaf1th8/336/
Thats how it looks like (And its correct, thats exactly what I want!):
In Webinspector:
Problem: As soon as I focus into the textarea, hit Enter and type some characters in, the characters are far too low near the bottom border (because the padding-bottom gets ignored), it looks like this (Which is wrong):
In Webinspector:
I've tried to set a calc(100%+7px) background position, to keep the space / padding between the bottom border and the characters, but no attempt was successful.
How can I remain the padding / space between the text and the bottom border while typing? (without disregarding/loosing/deleting the "background" property (border on the bottom), because I need it?)
in the .form-group .form-control you can change the padding to 0px and it will remove that extra: https://jsfiddle.net/7vaf1th8/349/
.form-group .form-control {
margin-bottom: 7px;
border: 0;
background-image: linear-gradient(#66bb6a, #66bb6a), linear-gradient(rgba(165, 181, 203, .5), rgba(165, 181, 203, .5));
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-position: center bottom, center calc(100%);
background-color: transparent;
transition: background 0s ease-out;
float: none;
box-shadow: none;
border-radius: 0;
resize: none;
margin-top: 7px;
padding-top: 0 !important;
height: auto;
padding: 0px 0;
width: 100%;
color: #555;
display: block;
}
I've fixed it on my own now.
Ive created a parent class for the parent element, changed the background propertys to this parent element and deleted it on the child(textarea) element.
Now the padding works as expected.
Note: It seems to be a fact, after reading similar questions, that padding is not working in webkit on textareas "as expected". It doesnt seem to be a bug, just the way webkit handles padding when the scrollbar starts to appear on the textarea.
Related
I found a bug in Chromium.
It seems that the engine renders transitions in some kind of special layer. Part of content which overflows over border-radius should be hidden, but it is not.
Look at this example: http://jsbin.com/nijavunoqe/1/edit?html,css,output
Hover mouse over color squares. You will notice that while animation corners are visible. And furthermore it affects neighbour element. Firefox and IE are ok.
So, the question is: Is it possible to find a way around this bug and get it to work as expected?
.container
border: 1px solid red
width: 200px
height: 200px
border-radius: 20px
overflow: hidden
margin-bottom: 10px
img
height: 220px
width: 220px
margin-top: -10px
margin-left: -10px
cursor: pointer
transition: width 1s, height 1s, margin-top 1s, margin-left 1s
&:hover
height: 240px
width: 240px
margin-top: -20px
margin-left: -20px
You can use this code in the mean time for chrome. Those transforms are broken as hell I've never even noticed.
Just note that I changed your .content to img. It didn't work straight off the bat with .container but I'm sure you can tweak it from here.
I have some strange behaviour in using padding.
I have a div as a wrapper. This wrapper has a padding of 25px to both sides:
.wrapper #header #navline #log form .small {
height: 25px;
width: 180px;
padding: 5px 25px;
}
in that wrapper I have an input field with the following css:
input[type="text"],[type="password"] {
font-size: 10px;
width: 180px;
height: 18px;
line-height: 18px;
padding-left: 5px;
padding-right: 5px;
outline:none;
}
and as error class:
input.error {
background-image: url(../images/error.png);
background-repeat:no-repeat;
background-position: 160px 50%;
width: 165px;
padding-left: 5px;
padding-right: 20px;
position: absolute;
z-index: 3;
}
so I'm getting crazy through setting it up the right way. The problem is that chrome/safari and Firefox seems to be different in handling padding properties. For example when leaving height property in chrome/safari there is something like padding top/bottom automatically added to the input field. in firefox there is a different height of the input field. to show an image:
firefox:
chrome:
the main problem is that I would like to center the input field in the wrapper div. the width of the input should be 180px. this means there is 25px to each side left. the text padding is also 5px to each side. so when using padding properties the new the width of the input field is the width minus the padding. so this will be the first question. when using pading-left and padding-rightof 5px is this equal to 180px(width input field) minus 10px (padding) or is the padding 0px because of the left hand side +5px and right hand side -5px? so what will be the correct width of the input field?
Second question is regarding to the error class. In that I will add a picture and would like to increase the right hand padding from 5px to 20px. even here the question whats the width of the input field? I thought the logic behind would be 180px minus +5px left, -20px would be 165px?
Third question: I tried all method but the result was different to each browser. Is there a failure behind my logic because padding should be padding or not?
Add css3 box sizing to every element that has padding. It will fix the issue.
.text {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Like this
With only this code
<span>1</span>
http://jsfiddle.net/MafjT/
You can use this css
span {
display: block;
height: 60px;
width: 60px;
line-height: 60px;
-moz-border-radius: 30px; /* or 50% */
border-radius: 30px; /* or 50% */
background-color: black;
color: white;
text-align: center;
font-size: 2em;
}
Because you want a circle, you need to set the same value to width, height and line-height (to center the text vertically). You also need to use half of that value to the border radius.
This solution always renders a circle, regardless of content length.
But, if you want an ellipse that expands with the content, then http://jsfiddle.net/MafjT/256/
Resize with content - Improvement
In this https://jsfiddle.net/36m7796q/2/ you can see how to render a circle that reacts to a change in content length.
You can even edit the content on the last circle, to see how the diameter changes.
Using CSS3:
span
{-moz-border-radius: 20px;
border-radius: 20px;
border-color:black;
background-color:black;
color:white;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
font-size:1.3em;
}
http://jsfiddle.net/NXZnq/
You have many answers now but I try tell you the basics.
First element is inline element so giving it margin from top we need to convert it to block element. I converted to inline-block because its close to inline and have features of block elements.
Second, you need to giving padding right and left more than top and bottom because numerals itself extend from top to bottom so it gets reasonable height BUT as we want to make the span ROUND so we give them padding more on left and right to make room for BORDER RADIUS.
Third, you set border-radius which should be more than PADDING + width of content itself so around 27px you will get required roundness but for safely covering all numerals you can set it to some higher value.
Practical Example.
The border-radius shorthand property can be used to define all four corners simultaneously. The property accepts either one or two sets of values, each consisting of one to four lengths or percentages.
The Syntax:
[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
Examples:
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;
I your case
span {
border-radius: 100px;
background: #000;
color : white;
padding : 10px 15px;
}
Check this Demo http://jsfiddle.net/daWcc/
In addition to the other solutions, http://css3pie.com/ does a great job as a polyfill for old internet explorer versions
EDIT: not necessary as of 2016
I'm having a CSS problem in Chrome (build: 17.0.9) with an image element that is not showing up. Please take a look at this link: http://next.lab501.ro/smartphone/nokia-n9-meego-to-go/3
In the top-right part of the main body you should see a list of pages with two image arrows acting as next and previous links. In Chrome only the next image arrow appears.
In any other browser (Firefox, IE9) everything shows up OK. What am I doing wrong?
You have to give .prev - float left [it will automatically make the element block]. is an inline element -> width, height, padding [top, bottom], margin[top, bottom] etc.. will not get applied unless its a block level element.
If you set float:left in your .prev element, it shows up, but you have to lower the right padding so it gets closer to the numbers.
In http://next.lab501.ro/wp-content/themes/new-theme/style.css, it says:
.prev {
background: url(img/nav-left.png) no-repeat scroll 0 0 transparent;
padding: 3px 12px 5px;
margin-right: 2px;
width: 23px;
height: 22px;
}
Add a float: left; to the end of that. I would also change the padding on the right side to move it closer to the numbers. I changed it to 0 in this case. The code now looks like this:
.prev {
background: url(img/nav-left.png) no-repeat scroll 0 0 transparent;
padding: 3px 0 5px;
margin-right: 2px;
width: 23px;
height: 22px;
float: left;
}
This question already has answers here:
Creating space between an element and its border
(5 answers)
Closed 2 years ago.
Is it possible to increase the distance between a border and its content?
If it is possible, just do it on here: JSFiddle
What I plan on doing is putting a glow around the content (using a shadow with 0px/0px distance) and then putting a border a couple of pixels away from the glow.
NOTE: I have decided to do an inset shadow and a border instead, it looks better, but thanks for the answers :3
Add padding. Padding the element will increase the space between its content and its border. However, note that a box-shadow will begin outside the border, not the content, meaning you can't put space between the shadow and the box. Alternatively you could use :before or :after pseudo selectors on the element to create a slightly bigger box that you place the shadow on, like so: http://jsbin.com/aqemew/edit#source
Its possible using pseudo element (after).
I have added to the original code a position:relative and some margin.
Here is the modified JSFiddle: http://jsfiddle.net/r4UAp/86/
#content{
width: 100px;
min-height: 100px;
margin: 20px auto;
border-style: ridge;
border-color: #567498;
border-spacing:10px;
position:relative;
background:#000;
}
#content:after {
content: '';
position: absolute;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
border: red 2px solid;
}
If you have background on that element, then, adding padding would be useless.
So, in this case, you can use background-clip: content-box; or outline-offset
Explanation:
If you use wrapper, then it would be simple to separate the background from border. But if you want to style the same element, which has a background, no matter how much padding you would add, there would be no space between background and border, unless you use background-clip or outline-offset
You usually use padding to add distance between a border and a content.However, background are spread on padding.
You can still do it with nested element.
.outer {
border-style: ridge;
border-color: #567498;
border-spacing: 10px;
min-width: 100px;
min-height: 100px;
float: left;
}
.inner {
width: 100px;
min-height: 100px;
margin: 10px;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(39, 54, 73)), color-stop(1, rgb(30, 42, 54)));
background-image: -moz-linear-gradient( center bottom, rgb(39, 54, 73) 0%, rgb(30, 42, 54) 100%);
}
<div class="outer">
<div class="inner">
test
</div>
</div>
Just wrap another div around it, which has the border and the padding you want.
You could try adding an<hr>and styling that. Its a minimal markup change but seems to need less css so that might do the trick.
fiddle:
http://jsfiddle.net/BhxsZ/