I have a textarea that will hold data from a database. It will be disabled so that the user cannot interact with it.
Is there a way to set the height via css so that it fits the area. IE: if there is only one line of text, the textarea height is only 1 row or if there is 3 lines of text, the textarea height is 3 rows?
It's part of an MVC application if that helps at all. I'm using the html.textareafor as well.
Simplest I can think of is this:
Working Fiddle
div {
display:inline-block;
border: solid 1px #000;
min-height:10px;
width: 300px;
}
More Options:
Textarea Auto height
Textarea to resize based on content length
More Smart Solution Of Mine depends On Count of Chars :) PHP Laravel
<textarea class="form-control" name="description" id="description" style="height: {{(strlen($sectionItem->description)/4).'px'}}">{{$sectionItem->description}}</textarea>
I do i similar in PHP but i use the rows and not the CSS Attribute:
<textarea class="form-control" type="text" rows="<?= strlen($sometext)/50 ?>" readonly> <?= strip_tags(nl2br($sometext)) ?></textarea>
I have spent the last hour reading sites, mostly SO, to find the answer to how to display HTML code on a page without it executing.
The best answer I found was to put it in a textarea, but the textarea did not expand vertically to show the entire contents. style='height:auto;' and style='height:fit-content;' did nothing.
So, my solution was (so simple it surprised me) - count lines (using '\n', the linefeed character in my text):
<?php $lines = substr_count($HTML,"\n"); ?>
<textarea style="border:none;width:100%;" rows="<?=$lines?>" ><?=$HTML?></textarea>
height is now perfect! Add disabled to textarea if you don't want it editable.
Related
I have an input box that I want to be tight to the value string within. As such, I have the input field resized on each input event, e.g.:
<input value=1 size=1 oninput='this.size=this.value.length'>
This works with the exception that both Chrome and Firefox (shown below respectively) leave additional padding on the right within the input field. Firefox being the worst.
How can I, thru CSS or inline attribute, get rid of the extra padding on the right WHILE maintaining the auto-expanding expanding feature (vis a vis this.size = this.value.length)?
UPDATE: While suggestion below fake-fix the problem, none are proper fixes. It seems, in this regards, <input> box is unredeemable. As such, I'm just moving on to using <div contenteditable=true></div>. The outline hugs the textContent tightly. Fortunately, for my use, compatibility with <form> or autocomplete features are not necessary.
It's not padding on the right side. Your text in the input is just aligned to the left. If you want to have it in the center of your input you can use text-align: center;.
input {
text-align: center;
}
<input value=1 size=1 oninput='this.size=this.value.length'>
Try this. It works fine after inputting 3 characters.
HTML:
<input style="text-align:center" type="text" value="1" size="1">
JS:
function resize(e){
len = e.target.value.length;
if(len > 3){
e.target.size = len-3;
}
else {
e.target.size = len;
}
}
document.querySelector("input").addEventListener("input",resize)
playing with width, the output seems to be very close to what you expected. See snippet below. The answer is not 100% accurate but close. Kindly adjust the code to suit your requirement.
Note:
you need a extra span element to get the exact width without extra
padding - this is because, when assigning a fixed width to calculate the width of the input box, slim values like 1 occupies less width and.
ensure the extra span element and the target input box have
some font size.
Plan to set a minimum width for the textbox when
it's empty or slim values like 1.
Hope this helps.
<html>
<style>* {
font-family: calibri;
font-size: 11px;
}</style>
<body>
<span id="d1"></span>
<input type=text value="1" style="width: 12px;" size="1" onkeyup="d1.innerText=this.value;this.style.width = d1.offsetWidth;" id="t" />
</body>
</html>
I have two texts with different lengths and I'd like to display only one of them (in this case 'come') but preserving as much space as the length of the longer one ('will come') so that I can switch them without changing the sentence width.
Is it possible only with css?
I promise I come to see you in the hospital.
I promise I will come to see you in the hospital.
Yes, it is possible with pure CSS.
You will want to wrap both potential options each in <span> element, and then both of those should in turn be wrapped in another <span>.
You can set each of the child span elements to be display: block; so that they sit on top of each other, and then you can show and hide one or the other by setting height: 0; and overflow: hidden;. This completely hides that one element, but allows it's width to still contribute to the size of the parent.. thus, the parent will be as large as the longest of the two options.
Then, the outer <span> just needs to be display: inline-block; and vertical-align: bottom; to stay in line with the text.
Add some extra styles for prettiness and to do the toggle on hover and you should have something like this:
jsFiddle DEMO
I made this in a few mins you can work off it and improve the basic functionality but here is the gist of what i did.
By using span and visibility:hidden rather than display:none it keeps its space even when its not actually visible.
Giving each button, text input and phrase an id that can use a key to identify it you'll be able to have multiple buttons, phrases and text boxes without needing to name every button, text box and phrase within your jquery.
here is the basic html
<p>A random phrase <span id="word1">to</span> test with</p>
<input type="text" id="txt1"/>
<input type="button" id="btn1" key="1" value="test word"/>
<hr>
<p>Another random phrase <span id="word2">that</span> can be tested</p>
<input type="text" id="txt2"/>
<input type="button" id="btn2" key="2" value="test word"/>
<hr>
<p>Some random text <span id="word3">just</span> to create some test</p>
<input type="text" id="txt3"/>
<input type="button" id="btn3" key="3" value="test word"/>
<hr>
basic jquery
$(document).ready(function(){
$("input[type=button]").on("click", function(){
var which = $(this).attr("key");
var correctWord = $("#word" + which).text();
var userWord = $("#txt" + which).val();
if(correctWord == userWord){
$("#word" + which).html(userWord).css({"visibility" : "visible", "color" : "#00cd00"});
$("#txt" + which).css({"border" : "1px solid #00cd00", "outline" : "none"});
}else{
$("#txt" + which).css({"border" : "1px solid #ff0000", "outline" : "none"});
}
});
});
and the small bit of css
p span{
visibility:hidden;
color:black;
}
You will of course be able to see the correct spelling of the word within the source code but im assuming that wont be an issue with the way you asked the question.
here is a jsfiddle showing it in action
Hope this gets you thinking on a way to carry on with your idea.
EDIT here is an updated JSFIDDLE which is more inline with what your thinking of i think.
You can grab the source code from there and play around with it.
Once again hope this helps.
A little new to html so if further explanation is necessary or this question just doesn't make sense please feel free to say so.
I am using div to layout a webform I am designing and using the   to move text within a div doesnt always produce the result I want as far as the layout of the page.
I started experimenting and by using:
<span style="margin-left:(variable)px"></span>
i am able to move the text exactly where I want it.
My question is this, is this a bad practice? is there a better way to do what I am trying to do, or a more conventional way? Or even something built into html that I just have not discovered yet.
Thank you
* Added Block of code to show what i am trying to accomplish
Complainant's Address
<input type="text" size="50" id="complainantAddress"/>
<span style="margin-left:3px"></span>
City
<input type="text" name="city" maxlength="15" size="15"/>
<span style="margin-left:16px"></span>
State
</div>
Using non breakable spaces for layout/positioning is bad practice.
What you are trying to do with style attributes is better, but inline-style attributes are often considered as bad pratice, too.
Style attributes are hard to maintain and you duplicate lots of information etc. In addition this styling has the highest specificity and cannot be overwritten by other styles (like user CSS files). They should be used with caution.
Use CSS attributes margin, padding and text-align for this.
Sample
http://jsfiddle.net/UYUA7/
HTML
Text<br />
Text <!-- Do NOT use this -->
<div class="center">Center</div>
<div class="right">Right</div>
<div class="indent">Indented</div>
CSS
.center {
text-align: center;
}
.right {
text-align: right;
}
.indent {
margin-left: 20px;
}
What you're doing is actually a better way to do spacing, than relying on  s. This will give you a much greater flexibility in the long-term and allow you to make changes quicker. (Less typing)
The only other thing that I would recommend is to read through this CSS manual:
http://www.w3schools.com/css/css_intro.asp
This will help you continue to learn about position with css.
UPDATE:
This is what your code can look like:
CSS - Use it in the header
<style type="text/css">
#complainantAddress {
margin-right: 3px;
}
#city {
margin-right: 16px;
}
</style>
HTML
Complainant's Address: <input type="text" size="50" id="complainantAddress"/>
City: <input type="text" name="city" maxlength="15" size="15" id="city"/>
Notice that I created two css styles, one for each matching input boxes. Within each style I defined a margin which would add the appropriate spacing to the right of the input box.
So the first input box called "complainantAddress" will have 3px spacing to the right and the second one who's id is "city" will have 16px spacing to the right of it.
Hi i would like to know how to change the text box in HTML to just a line rather than a box because i am trying to make a webpage look like a PDF form and for a neat outlook i would like to change the text box design to just a long line so the user can type his name or whatever the field requires him to do..
You'll probably want a more specific selector, but this should make a reasonable starting point:
input {
border-style: none;
border-bottom: solid black 1px;
}
You mean to display a <textarea> as an <input type="text">?
In html, i assume, via <textarea cols="" rows="1"> or via CSS styling the width and height of the element
For single lines of input, I'd use a <input type="text" />, which actually is the default type and can be abbreviated to just <input /> (I'm assuming xhtml in these examples).
I have always struggled designing css forms, I can never get the input and label side by side. Do you have any words of wisdom that may help me.
I usually use a 10px margin on the bottom but cannot get them aligned
My Common form:
Name:
Email:
Phone:
Message:
text area
I know I'm going to get backlash for this from people who think that the only possible way to do things is with pure CSS, divs, spans, etc. However, your form is tabular. You have a column of titles, and a column of input fields. In this case, because of the tabular layout, a valid solution could be tables.....GASP!
Tables are not valid for page layout...let me repeat that again, tables are not valid for layout. However, you've got an element of a page, you're not doing a full page layout. You can easily use <th> elements to style the labels for the inputs, which is quick and simple. Overall, the table (tabular) solution would be less verbose than many of the CSS layouts given, which from a pure HTML standpoint is a win. It will continue to work and layout properly even when the server gets backed up and can't load the external CSS document. To all those who believe that tables are never ok, let me remind you that this solution will validate with W3 100% of the time provided your table is properly structured. And it's far more cross browser compatible, with no box-model issues in the "crabby" legacy browers. Certainly continue to progressively enhance with CSS as is best practice.
Theory and practice, especially in the web world, are two entirely different things. In theory, all of us should be producing 100% HTML5/CSS3/Semantic/SEO Optimized...blah blah blah. In practice, theory only goes as far as the first customer complaint. Progressive enhancement is key to survival. When a webform breaks in a big corporate setting, money is lost and people get fired. For that reason, the International Bank I recently did work for had requirements that demanded all its webforms were tabular (assembled with tables) It's hard to argue with a portfolio of sites whose users generate the company hundreds of millions of $$$ annually.
<style>
ul.anyclassname{
padding:0;
}
ul.anyclassname li{
list-style-type:none;
clear:left;
}
ul.anyclassname li label{
width:300px;
float:left;
}
.inputs{
float:left;
}
</style>
<form>
<ul class="anyclassname">
<li>
<label>Name:</label>
<div div class="inputs"><input type="text"></div>
</li>
<li>
<label>Email:</label>
<div div class="inputs"><input type="text"></div>
</li>
<li>
<label>Phone:</label>
<div div class="inputs"><input type="text"></div>
</li>
</ul>
</form>
I usually do this:
<div>
<label for="txtname">Name:</label>
<input type="text" id="txtname" name="txtname"/>
</div>
<div>
<label for="txtEmail">Email:</label>
<input type="text" id="txtEmail" name="txtEmail"/>
</div>
<div>
<label for="txtPhone">Phone:</label>
<input type="text" id="txtPhone" name="txtPhone"/>
</div>
etc...
Then with my CSS:
label { width: 100px; display: inline-block; }
Something along those lines. Nothing fancy, but they are side-by-side and with the surrounding div you get a block level element to give you a line return after each pair.
I wrote a complete form in this answer: how can we make forms like this with css & html? . It has the html markups and the css classes you need to start.
The code is also in a fiddle here: http://jsfiddle.net/vSqR3/64/ (Now with the nice addition of the for attribute, thanks Kyle!)
You will find in that link not only how to put one markup next to the other, but how to set sizes and borders for each.
I strongly suggest you to play on the jsfiddle.net website. You'll be able to modify and test immediately all your changes.