I was wondering about the textarea box bit.ly has on the 1st page you log in where they state to "Shorten your links and share from here".
I was wondering how you would go about centering text in a textarea? I don't think there's a command, so how would you hardcode move it down a few spaces. You can't use html tags in the textarea so it's been difficult with or other methods
Are you sure it's a textarea and not just an <input type="text">? If it's the latter, you can achieve the effect quite easily with padding:
input[type=text] { font-size: 20px; padding: 5px; }
Edit: If it's a text area (say with one row), styling via padding works the same:
textarea { font-size: 20px; padding: 5px; }
Set textarea padding and margin 0 and set the line-height. Or it would be better to use padding like Kerrek posted
You can't center multi line text in a textarea but you can add padding.
<!doctype html>
<style>
input[type=text]{margin:0;padding:0;line-height:40px;font-size:40px;}
</style>
<input type=text>
Related
Ok so I found out that the text inside an <input> tag still gets cut off even though the <input> tag already has a padding. You'll notice it more when you set your font style to anything cursive.
Take a look at this image:
The first text box in the screenshot is an input of type=text and the second text box is just a div. The input text box cuts off the tail of character 'j', while the div text box does not.
HTML:
<input type="text" value="juvenescent" />
<div>juvenescent</div>
CSS:
input, div {
font-family: cursive;
font-size: 2em;
padding: 15px 20px;
margin-bottom: 10px;
width: 300px;
border: 1px solid black;
}
div {
background-color: white;
}
Here is a link to the jsfiddle:
https://jsfiddle.net/9eLzqszx
What would be the workaround here? Obviously, I want the padding of the input text box to NOT cut the text inside it.
It looks like the curve of the J goes past the left-hand side of what the browser considers to be the edge of the letter. Instead of using padding for both sides, use padding for top/right/bottom and instead use text-indent for the left, it should do the trick!
input {
font-family: cursive;
font-size: 2em;
padding: 15px 20px 15px 0;
font-style:italic;
margin-bottom: 10px;
width: 300px;
border: 1px solid black;
text-indent: 20px;
}
https://jsfiddle.net/will0220/pxrs321f/3/
An input element is a special element as it needs to cut and allow the user to navigate through its text. Its active text zone isn't increased by the padding, and that's why you're seeing this behavior. Firefox seems to be more clever than the bunch, as it doesn't vertically cut the text if the text's width is smaller than the input's active text zone.
A workaround would be to add text-indent and decrease padding-left:
text-indent: 5px;
padding-left: 15px; /* Originally 20px */
You can see it in a fiddle over here.
You could try increasing your line height property. That would be restricting the viewable area for the letters causing them to be cut off. However, that's probably a crappy hack if you want it to match the same size as your div.
Add height: auto; to your input type=text to keep flexibility, and change the padding to get the original effect, like this padding: 14px 20px;
I have labels aligned in three rows and displayed in regular text. I'd like to make these labels bold, but when I apply the property in CSS, the alignment gets a little messed up.
I have included some padding and margin properties to have more space between text box and label, but that doesn't seem to help.
I am trying to have the text bold with "*" and have it aligned with "Surname" label.
How can I make the labels bold and still keep the alignment? I can only make changes to the CSS file and not HTML or font size of the text.
Before
After
**Before code-**
.bold-label {
}
.bold-label:after {
color: #e32;
content: ' *';
display:inline;
}
**After code-**
.bold-label {
font-weight: bold;
margin-left: -1em;
padding-right: 0.75em;
}
.bold-label:after {
color: #e32;
content: ' *';
display:inline;
}
Thanks in advance
The only way to do this is to have the labels that need to be right aligned (above Surname) in a container element, like a div and apply text-align: right to that container.
Here's the problem you're having:
Each label box (.bold-label) is the width of its content (the text). This means that when the content expands (because you make it bold), the box will expand with it. This breaks your alignment.
To overcome this you could assign a width to each label box. With a large enough set width you can create enough space for the text to expand without changing the length of the box.
Try this:
.bold-label {
display: inline-block;
text-align: right; /* only works on block containers */
width: 150px;
}
DEMO
This is my code, but it puts the bullet-points on the left. Hope it is of help:
<!DOCTYPE html>
<html>
<head>
<style>
li{
font-weight:bold;
text-align:right;}
</style>
</head>
<body>
<li>Consultation
</li>
<li>Pharmacist
</li>
<li>Registration No.
</li>
</body>
I'm working in this form. Its design is exactly like this:
Right now I'm at this stage, so I am working on some little details:
As you will be able to see, the "Your text..." is stuck to the top left corner of the textarea. I'm trying to find a way to manipulate this via CSS if possible. I just need to apply some margin/padding to the text inside the textarea. If this is not possible with CSS I'm open for suggestions.
How can I manipulate the text inside the textarea via CSS?
You can use CSS padding property:
textarea {
padding: 5px;
}
Use:
textarea {
padding: 5px;
box-sizing: border-box;
}
Note: box-sizing is a CSS 3 property. It's very useful, because without it width: 100% or other will not work as you expected.
You can use CSS to create the desired effect
textarea {
padding: 20px;
margin: 10px;
}
<textarea></textarea>
Yes, the padding from CSS applied to textarea is correct. But then you need to change the "rows" and the "columns" as the dimensions of the whole textarea changes.
You can use the code below:
line-height: _px;
Use the same value as the height of the textarea.
I'm trying to create a custom form input that utilizes some images, it should look like this:
I've tried the following:
<style>
input {
background-image: url(../img/search-background-middle.png);
background-repeat: repeat-x;
padding: 17px 0;
font-size: 12px;
border: none;
margin: 0;
}
form {
padding: 0;
margin: 0;
}
</style>
<body>
<form>
<img src="../img/search-background-left.png"/>
<input type="text" value=" start typing to search..." size="40" maxlength="255" />
<img src="../img/search-background-right.png"/>
</form>
</body>
Which results in:
Why?? I'm not only interested in the solution, but also in the reason why this doesn't work. I think my understanding of inline elements put next to each other is flawed.
Try setting the vertical-align to top
form * {vertical-align:top;}
also remove the spaces between the imgs and the input
remove whitespace between img and input elements (including linebreaks)
set height and line-height on input element to match the image height
set padding and margin to 0 on input.
you may also need to add a float: left !important; to the input. Sometimes that fixes my issues when things aren't lining up
A simple CSS issue that I can never seem to fix quickly -
I have a line of text followed by a form which consists of some invisible inputs and a submit button. I've removed the border and the background from the submit so just the text -
My html -
<p>Posted about 21 hours ago.</p>
<form class="button_to" data-remote="true" action="/comments/8/likes/114" method="post">
<input type="hidden" ...... > <!--not actual markup -->
<input type="submit" value="unlike" html_options="classlike_button_form">
</form>
my css -
p {
color: #595959;
float: left;
font: 85% "Arial",Verdana,sans-serif;
line-height: 131%;
padding-bottom: 0;
}
input {
background-color: transparent;
border: 0 none;
color: #3B5998;
font: 85% "Arial",Verdana,sans-serif;
float:left
}
The problem is that the text in the p tag and the text from the button are not aligned horizontally.
I'm using the reset css and Yahoo text sizing included in the HTML5 boilerplate.
I really don't want to fix it with margins or positioning, so any help would be great.
Thanks
EDIT - I'm unable to change the HTML structure
This seems to work: http://jsfiddle.net/8BHtz/6/
I removed the floats and added display: inline-block; vertical-align: middle; to p and form. It works in Chrome, Firefox, Safari and IE8. However, because of inline-block it does not work properly in IE7 or lower. Since p and form are now displayed inline you may want to wrap them in a div (http://jsfiddle.net/8BHtz/7/).
Looks ok when I plug your html and CSS into jsFiddle: http://jsfiddle.net/LAzUf/. Do you have Firebug? Does it look like the input tag is inheriting styles from another setting?