I got a textarea that is 2 rows high. When there is just one row of text in the textarea it looks like this:
What I'm looking for is a way to make it look like this if only one row got text:
When there are 2 rows in the textarea with text, I want it to look normal like this:
Here is the code:
<textarea class='input_box_menu'>Test text</textarea>
.input_box_menu {
text-align: center;
width: 217px;
height: 35px;
resize: none;
float: left;
}
Help really appreciated!
Thanks,
Tompa
Here is a little jQuery snippet to do exactly what you wish to do:
$(function () {
fixVAlign($('.input_box_menu'));
$('.input_box_menu').on('keyup', function () {
fixVAlign($(this))
});
});
function fixVAlign(field) {
if (field.val().length < 27) {
field.css('line-height', '35px');
} else {
field.css('line-height', 'normal');
}
}
And here the jsfiddle
Ok so my first train of thought was to look up the css property vertical-align here.
Applies to: inline-level and table-cell elements
So looking at your example, inline-level objects seem to be out of the question -- so why not table cell?
Try this out:
.box {
display: table-cell;
height: 200px;
width: 400px;
background: #d4d4d4;
text-align: center;
vertical-align: middle;
}
<div class="box">
Text Text Text
</div>
Just a side note, there are ways to do this with a span within a div or a div withing a div, this is just how I chose to interpret the question.
EDIT
Ignore my answer because it doesn't do anything about textareas.
See this pen on CodePen for an example of a good fix.
Because you say you can use JavaScript, the simplest way to do this would be to set the initial line-height of the <textarea> equal to its initial height. Then onkeypress or a similar JavaScript event you can check textarea.value.length and if it's long enough to wrap, then you would set the line-height back to the font-size.
Related
I have a round < button > with a < div > inside that represents a Unicode image. Currently the button is set to border-radius: 12px; height: 24px; and width: 24px; and the < div > is to font-size: 17px. The < div > Unicode image sits inside but not centered and the button is slightly off to the side.
How can I get the < div > to center inside an oval button despite what font-size the < div > is?
EDIT
I want to create a circle/round button with an emoji center to the middle of the button despite the button's size or the emoji image's size.
CSS for the button and emoji image for div:
#emoji-button {
border-radius: 19px;
width: 38px;
height: 38px;
}
#thumb-emoji:after {
content: "\01F44C";
font-size: 20px;
}
And round/circle button with emoji image inside:
<button
type="submit"
id="emoji-button"
>
<div id="thumb-emoji"></div>
</button>
But it is not centered.
And is there a way to just back the emoji image alone to be clickable for a method?
First off:
A <div> is a block element by nature. It will always become 100% wide. If you want it to not be 100% wide, give it a display:inline-block so it won't get bigger than it needs to be. Then give it a margin:0 auto; or a text-align:center on the parent to center it.
HOWEVER, You are not allowed to put <div>s inside of <buttons>. it is invalid HTML
See this answer for more information:
Why can't a <button> element contain a <div>?
Or, you could read here, from W3 that only phrasing content is expected to be used within a button:
https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element
If you do not know what phrasing content is, See this page:
https://www.w3.org/TR/2012/WD-html5-20120329/content-models.html#phrasing-content
-- if you are looking into styling buttons specifically, maybe this very short tutorial would help:
http://web.archive.org/web/20110721191046/http://particletree.com/features/rediscovering-the-button-element/
Here is a fiddle of a working button like yours:
https://jsfiddle.net/68w6m7rr/
I honestly didn't have many problems with this. I only replaced your <div> with a span, that's it.
can you post your code?
You should NOT need a div inside the button. If you need the button to have a specific style give it a class. You could do something like this
CSS:
button.something {
padding: 25px;
border-radius: 100%;
font-size: 20px;
border: none;
}
HTML:
<button class="something">👌</button>
For clean and valid code, you'd better use a :before or :after pseudo-element. This would also take care of the centering by default.
It's even easy to set the content. Either in css only, like this:
1.
button:before {content:"\25b6";}
(put your unicode value there and classes/ids as needed, then specify them in turn in css)
2.
Or if you need to specify the value in mark-up, drop a custom data-* attribute like this:
<button data-myunicode="\25b6"></button>
with each button taking it's own value, then drop this single line in css:
button:before {content:attr(data-myunicode);}
Before answering, let's clear some things out.
div is a block level element, used in an inline element, which is the button element. Browsers will consider this invalid and will fix it by removing the block element from the inline element. For more about CSS concepts like box model, box generation please refer to these resources:
https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements#Block-level_vs._inline
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Also, if you are using an IDE, make sure you have installed linting/hinting tools to help you out. These tools can help you in code authoring so, make sure you have them. If you are using software like VSCode or Sublime Editor, there are many free code analysis tools out there.
Let's go back to the code now.
You said
I want to create a circle/round button with an emoji center to the
middle of the button despite the button's size or the emoji image's
size.
I went ahead and created a plunk here where I demonstrate this. Essentially, I wrapped the button around a div which serves as a container and through some CSS magic, I made it to have the same height as its width. More on that you can find at this SO answer.
The #emoji-button then has a border-radius: 100% in order to be round, width is inherited from the parent, meaning it has the same as the container and it position is absolute in order to fit in the container.
The #thumb-emoji has changed to a span element. By user agent styles it has text-align:center.
<div class="button-group">
<button type="submit" id="emoji-button">
<span id="thumb-emoji"></span>
</button>
</div>
CSS:
.button-group {
position: relative;
width: 100px;
}
.button-group:before {
content: "";
display: block;
padding-top: 100%;
}
#emoji-button {
width: inherit;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#thumb-emoji:after {
content: "\01F44C";
font-size: 200%;
}
You can change the .button-group width to whatever width you want, it will still keep its 1:1 ratio.
You can use then media queries on .button-group to adjust the font-size of your #thumb-emoji, by setting your desired breakpoints.
This is a little thing, but I can't find anything at all in regard on how to go about doing it!
In the picture below, there is a textarea with a styled (and disabled) buttonpurely for aesthetic purposes:
But when you resize the textarea, this happens:
This doesn't look so great.
I want to tie the dynamic height of the textarea to the height of the button so that they stay together at whatever height, but I cant find anything like this.
How do you tie an elements styling to another's?
Note - Much more confident at PHP than jQuery/javascript, but obviously won't refuse answers in those languages.
Flexbox can do that
div {
display: inline-flex;
margin: 1em;
}
textarea,
botton {
flex: 1;
}
<div>
<textarea id="output">My size will be matched by the button</textarea>
<button>Click</button>
</div>
Here is a way to do it with HTML and CSS, no javascript or php code needed:
<div class="container">
<textarea rows="4" cols="50"></textarea>
<button type="button">Click Me!</button>
</div>
.container{
overflow: auto;
position: relative;
}
textarea, button{
float: left;
}
button{
position:absolute;
height:100%;
width:150px;
}
Here is a JsFiddle: https://jsfiddle.net/83uuk6gx/1/
EDIT:
You can remove the min-height, it will work without it (I removed it from code above and updated jsfiddle). Also I would not use flex as it will impose restrictions on earlier version of the browsers. IE9 does not support it I believe, here is more details on it: http://www.w3schools.com/cssref/css3_pr_flex.asp
The easiest way would be to wrap the textarea within another element and set the display property of that parent to flex, like so:
div{
display:flex;
}
textarea{
resize:vertical;
}
<div>
<textarea></textarea>
<button>text</button>
</div>
Depending on your requirements and other styles, you may need to adjust some of the other flexbox properties. See caniuse.com as well for details on browser support and prefixing.
Either disable the resise of textarea using the following :
textarea {
resize: none;
}
or use this fiddle(I did not create it) by making necessary changes.
http://jsfiddle.net/gbouthenot/D2bZd/
Hope everyone's doing okay. I have created an HTML with some CSS. What it does is it highlights the table on hover and highlights the entire text line inside the table on click. Next thing that I wanted to achieve is to autocopy the highlighted text or do autocopy on click. I tried some google chrome autocopy extension, however, it's not working. Just like it's not working on google spreadsheet cells.
I've been thinking about javascript, but I'm not really sure if this can be done to autocopy a highlighted text inside an HTML table.
Any advice or tips on this one?
<script>
if (!('select' in HTMLTableCellElement)) {
HTMLTableCellElement.prototype.select = function() {
var range = document.createRange();
range.selectNodeContents(this);
window.getSelection().addRange(range);
}
}
</script>
<style type="text/css">
table{
table-layout: fixed;
width: 170px;
height: 35px;
font-size: 14px;color:#333333;width:100%;border-width: 1px;border-color: #9dcc7a;border-collapse: collapse;
}
table td {
font-size: 12px;border-width: 1px;padding: 10px;border-style: solid;border-color: #9dcc7a;
overflow: hidden;
text-overflow: ellipsis;
width: 225px;
white-space: nowrap;
}
table th {
font-size:12px;color: black; background-color:#ffff99; border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;
text-align: center;
width: 230px;
}
#table tr {background-color:#ffffff;}
#table tr:hover {background-color:#ffff99;}
::selection {
background-color: orange;
color: blue;
}
#tableheader
th {
font-size:12px;background-color:#abd28e;border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;
text-align: left;
width: 230px;
</style>
</head>
<body>
<table class="table" border="1">
<tr><th>Header</th></tr>
<tr><td onclick="this.select()">This will be highlighted on click. It should also be copied to clipboard automatically</td></tr>
</table>
I'm looking forward to hearing back from you.
Best,
Jason
You can indeed use JavaScript (and especially some libraries) to achieve copying some text (possibly from somewhere in your current page) directly into the user's clipboard.
Please refer to that post which uses the clipboard.js library.
The idea is to add a specific class (e.g. btn) to the elements which should be clickable and which content must be copied to clipboard on click.
<td class="btn">This will be ...</td>
Then add the functionality following Clipboard API:
var clipboard = new Clipboard('.btn', {
// The selection of the correct content is done here.
text: function(trigger) {
return trigger.innerHTML;
}
//clipboard.js will take the entire inner content of the clicked element.
});
Demo for your case: http://jsfiddle.net/kv9ymLjn/
You can also re-implement the content highlighting (Clipboard does not need that, but it gives a visual feedback to the user). See the demo code.
As shown in the post linked in the question comments, the safest way is to let the user performing the actual copying action (e.g. Ctrl + C), while helping him/her by auto highlighting the desired text.
The Clipboard library on the other hand may not work in all environments, even though the most common are covered.
I am looking to have a comment field that will grow to show all text when the user clicks on it and then shrink back down (hiding the unshowable text) when the user clicks out of the text area. The user should be able to type in text and modify what they see.
I am assuming that textarea is the way to go since input doesn't have multi-line functionality. However, I am a little stuck on how to implement this. It seems everything out there just has the textarea resize to fit the text but not shrink back down after the user is done typing in it.
Could someone help me out/point me in the right direction?
Thanks!
You can use the :focus and :active states to change the textbox once the user clicks on it. Something like:
textarea{
width: 200px;
height: 200px;
resize: none;
}
textarea:focus,
textarea:active{
width: 400px;
height: 400px;
}
Once the user clicks into the space, the text box will expand to the new dimensions. These work very similarly to :hover, if you're familiar with adding hover states.
Demo in a jsbin: http://jsbin.com/culil/1/
To add this stylings to you page you have two options.
1: You can include it as a css class in your site's stylesheet:
Css:
.parentcontainer > textarea:focus,
.parentcontainer > textarea:active {
width: 400px;
height: 400px;
}
This is a best practice because it separates the concerns of styling ( which should be CSS ) and adding interactivity ( which should be JavaScript).
2: You can add the class before you append the element using javascript:
css:
.your-textarea-class:focus,
.your-textarea-class:active{
width: 400px;
height: 400px;
}
js:
$(function(){
var textarea = $(".parentDiv").append("<textarea></textarea>");
$("textarea").addClass("my-textarea-class");
});
http://jsbin.com/buhado/1/edit
Is it possible to align the span "Header" in this fiddle : http://jsfiddle.net/25LjE/37/ to right of text as shown :
I'm creating the header using jquery.
Here is the fiddle code :
<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6352993.js"></script>
<noscript>This is very long test question to test how polldaddy handles questions that exceed that normal length............ yes a very long question indeed..............</noscript>
.pds-pd-link {
display: none !important;
}
.pds-box {
width: 220px !important;
}
.pds-input-label{
width: auto! important;
}
.PDS_Poll{
margin-bottom:15px;
}
$(document).ready(function() {
$('.pds-question-inner').prepend('<center><span style="color:red;font-weight:bold;font-size: 10pt"><u>Header</u></span></center>');
});
When I try proposed solutions in IE8, the text is slightly higher than rest of text :
Can this be fixed ?
It is not really clear to me what you are trying to achive, but adding this CSS seems to get this done:
center span{
position:relative;
top:30px;
left:-70px;
}
You can do that by wrapping your two elements both in a div which float left, then you can append instead of prepend the header.
<div class="floatLeft">Your two elements</div>
<style>
.floatLeft {
float: left;
display: inline-block;
}
</style>
You may want to set a width and padding/margin on the elements as well so they come out as desired. If you want the header way to the right you can float it right instead of left. If you do that stick with the prepend because some versions of IE screw up floats if the right floating elements are not first in the series.
You just have to add float:left in
<span style="color:red;font-weight:bold;font-size: 10pt;float:left"><u>Header</u></span>
Check this:
JSFiddle
Check out this code at fiddle I have edited it http://jsfiddle.net/25LjE/46/
You can add float: left to the span (and clean up your HTML).
You can check this: http://jsfiddle.net/ooflorent/zvbzT/
I think this is what you want?
$('.pds-question-inner').prepend('<center><span style="color:red;font-weight:bold;font-size: 10pt; text-align: right; display: block;"><u>Header</u></span></center>');
http://jsfiddle.net/84fjB/
If not it should be, looks better :P