I have a textarea that gets processed into an image. I need to force the user to type in a specific area including formatting and returns. The box should limit users from overflowing the box How can this be done?
I'm using cakephp as a framework and can therefore use html, css, php or js to accomplish this.
This is the textarea element I'm working with:
<textarea name="ch_text" id="ch_text" rows="8" tabindex="20"></textarea>
I tried adding a cols property, which didn't work. I tried setting wrap="true", which didn't work either. Is there a way to specify a height/width property that can't be exceeded?
The way I have usually seen this done is by enforcing a character or word limit. This can be done by using variables in the HTML code!
A combination of setting the maxlength on the element and then in CSS make sure to give a height and width and set resize to none.
textarea {
resize: none;
height: 100px;
width: 200px;
}
<textarea maxlength="10"></textarea>
I wanted to use a span element to style some text, but for some reason when I enter that code it will on the right side of the page show that scroll bar. It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
I don't know how to fix that. I have tried reducing the padding, adding <br> at the end, etc.
This is the code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
I have restricted my text to a border on the page, so it looks better, but it can't have anything to do with my problem since I haven't had it before and I've been using this border tactic for a while now. And as well I know the button "My other articles" isn't linked to anything--I'll add the link later. I just need help with this one problem.
Thanks to whomever helps me out with this in advance.
It seems to be rendering correctly for me (Chrome on Linux):
I'd suggest you update your answer with a screenshot of what's happening.
The best thing to try in this scenario is to add the following CSS to your code if it's not working for you:
span {
overflow: visible;
}
Since you're doing inline CSS (you don't appear to have a linked stylesheet), you probably want something like this as your full code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px; overflow: visible;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
overflow: visible; ensures that the element doesn't show scrollbars. In most cases (such as if this rule is applied to a <div>), then text inside the element will visually overflow if the element is a fixed size. The <span> isn't a fixed size (it grows as text is added), and so text won't appear as overflowing. Hopefully, though, it should solve the scrollbar problem.
Alternatively, you could try using overflow: hidden; which will hide the overflow entirely. Try experimenting with either visible or hidden and see if your code works!
More info about overflow: overflow - CSS: Cascading Style Sheets | MDN
It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
Try also applying the CSS to the <p> element as well/instead, or even the <body>. The <span> may or may not be the element that's experiencing the overflow issue, after all. Your question is admittedly worded quite vaguely for us to tell how the problem manifests.
Hello I have a problem with a fieldset in CSS.
I have this example
In this example you can see that left hand side the border
margin-left: 0px;
flushes exactly on one line/height with the dark frame. Right hand side you can see that the class fr has
margin-right: 0px;
But it does not flush with the frame border. I have tried to Google for it but I could not find anything on that. Is this phaenomenon normal or what am I doing wrong? are there some specific borders?
UPDATE
hello and thanks for answering this question. i tried to implement that code directly into my editor (dreamweaver cs6) and thought it used to be the same style as on jsfiddle. wrong. it seems like there is a problem with the editor because as a result i will get this:
it looks like there are automatically added tabs left hand side. so is there anybody who knows about that problem? thanks a lot.
UPDATE 2:
i had to reset the css default settings.
I would say the main one is that you have your labels set to 80px wide and your inputs are set to 180px wide.
Probably need them to be the same size. I'd also check your math to make sure it all adds up properly.
Add box-sizing: border-box to the inputs. (Also add -moz-box-sizing and -webkit-box-sizing for the relevant vendors)
use this instead, box-sizing:border-box causes the padding to be used from inside the input element rather than the outside.
#left #frame form fieldset ul input {
position:relative
color: #444444;
font-size: 10px;
width: 180px;
height: 18px;
padding-left: 5px;
outline:none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box
}
yes box-sizing:border-box; is a good solution but simply reduce the size of input-box 7 pixel{5px for left-side padding and 2px for border of both left and right side border} so now final width of input-box is 173px
It looks like you want to put some input fields (a form, perhaps?) into columns and just don't seem to know the best way to do it?
I am working on a form right now, actually- here's how i do it when I want to have two columns within a div.
<form>
<fieldset>
<legend>The form to fill out</legend>
<p> Any instructions for the form. Fields marked with <span class="red">Red</span> are required.</p>
<div class="columnA">
<label for="fname">Label 1</label>
<input type="text" name="fname" tabindex="1" />
</div>
<div class="columnB">
<label for="address1">Address:</label>
<input type="text" name="address1" tabindex="10" />
</div>
<div class="fullwidth">
<input type="submit" value="Register"/>
</div>
</fieldset>
</form>
Then, make sure that these things are set (minimally) in your CSS for each of the above classes:
margin
padding
width
(advice: I actually set these first within every piece of my CSS- it gives me a structure if I have my own order of elements for my CSS. I am not saying use mine, but adopt your own- it saves time when you're troubleshooting)
Remember, if you want the parent element (whatever div is containing the form) all child elements have to be floated as well.
Now, you might think to float columnA to the left and columnB to the right, with both set at a width that adds up to 50% once you add in margins and padding. However, I've found that unless my content demands that much real estate, you can actually float both to the left and you'll get a better look for the form as a whole.
I have a textarea which is contained in a div as I have jquery hint and wanted to use opacity without changing the border.
When I am typing in the text field and it goes beyond the container I cannot see what I am typing. How do I make the div follow the text.
Textfield:
<label><div id="name">
<textarea name="name" type="text" id="name" title="Enter Message Here" rows=9 cols=60 maxlength="2000"></textarea>
</label>
Styles:
#name {
border: 1px solid #c810ca;
width: 270px;
height:159px;
}
Try to improve basic things:
Don't use any id name more than once (you have div#name and textarea#name, it can cause problems)
Close tags in correct order
Textarea doesn't support text attribute
If it won't solve you problem, please give some more details - I've tested your code and I can see what I'm typing. If you mean to make div's height flexible (although textarea has constant height, it is still resizeable), remove the height and replace it by min-height.
Is it possible to change the value of src attribute of <input type='image' alt="Text will be shown if pics are disabled" src='somepic.png'../> by css?
The problem is:
I want to specify which pic will be shown as submit button just using css (so the design team will change only css files!).
If I use the alternative way like <input type="submit" class="cssclass" value=" " alt="Text will be shown if pics are disabled"/> and specify the background of this element in css - it doesn't work well if pics are disabled. - No any alternative text is shown instead of pic. However the first way solves this situation...
Please advice something
Thanks.
Here it is: http://jsfiddle.net/kizu/66JXn/
Some notes about this solution:
Use <button></button>, 'cause it can include other blocks.
You'll need a bit of extra code to make all these work in Fx and IE:
For Fx you need an extra wrapper inside (there are positioning bug) and some extra -moz- properties reset.
For IE you must shrink the original button, 'cause there are some extra padding that is hard to remove.
You place the text and another element inside, that would overlay the text. So when the images would absent, the text would be accessible.
That's it :)
No, and this is bad practice. CSS is for static content only.
What you should do, is define a template file with variables in it such as:
template.js
my_backgroundImage = "url('somepic.png')";
then your file would load
x = document.createElement('image');
x.src = my_backgroundImage
Attribute selectors might work, but they aren't very flexible. Try this one:
img[src=""] {
background-image: url('none.png');
height: 100px; /* Height of BG image */
width: 100px; /* Width of BG image */
}
It doesn't change the image's src= attribute, but it performs the same function.
Here's my idea.
You can use JavaScript to read the stylesheets of <img> tags, and modify them accordingly.
I'm talking about a class whitelist, like big, small, center and all other classes applied to the images are interpreted via JavaScript. The design team could use CSS, but it would not render in the expected manor, like this (Python + JavaScript):
for every <img> tag:
if tag.classes contains class not in whitelist:
for every class not in whitelist:
this.src = newClass.backgroundImage;
this.removeClass(newClass)
It reads the CSS for the background-image property, but it just steals the URL of the image and sets the src= attribute using that URL. Then, the JavaScript would delete that class, causing it not to render.
(This is a problem for which JS is the solution, but ignoring that:)
One option is to wrap the button and an extra div (lets call it div.overlay) in a parent container.
Set the container to to position:relative.
Set the button to only display text, as usual. Set the div.overlay to position:absolute, width and height to 100%, and left and top to 0, and a z-index higher than the button. Set the image you want to display as the background-image of div.overlay.
With images enabled, the user sees the image, and the image can be changed using only CSS.
With images, or CSS disabled, the user only sees the plaintext submit button.
You might have to do some trickery to get clicking div.overlay to submit the form, perhaps just make div.overlay a duplicate submit button. Also, who knows what Googlebot makes of overlay techniques like these.
It's ugly, but the only pure CSS solution that immediately jumps to mind is a kind of image replacement with relatively poor support. That's using :after. It's kind of a poor practice due to the misuse of :after, and the support is pretty iffy, and I think it'd be iffier for an input element, based on the last time I tried to use :after on an input...
.cssclass,
.cssclass:after{
display:block;
width:100px;
height:100px;
}
.cssclass{ position:relative; }
.cssclass:after{
position:absolute;
top:0;left:0;
content:url("button.jpg");
}
See http://www.rachaelmoore.name/best-practices/css-image-replacement-ii/ for more.
Or setting the default src to a shim and always using CSS to set the desired button as a background image. Which I just noticed you've already thought of. I imagine that should work just fine.
Ok... So I hate it when I ask a specific question and, instead of answering it, they give me some crappy work-around instead of answering the original question that I asked... But for some reason, I've decided that I'm going to do it to you.
If I understand the problem correctly, you just want to have a form button with a background image and if the background image doesn't load, you want some sort of alt text displayed to the user with the caption of the button? If that's not right, stop reading and "down arrow" me.
In apps that I've made, I've always just styled the input with a background image, but left it up to the HTML control to insert text... It's good for three reasons... buttons can be styled, developers can change the value of the text on the button without having to bother me to make a new image, and if the background image doesn't load, the button is still readable.
So my html was like this:
<input type="submit" id="btnSearch" class="searchButton" value="Search">
then my class may read something like:
.searchButton {
backgorund-image: url('searchButtonImage.png');
font-family: sans serif;
font-size: 10px;
color: #808080;
padding-left: 50px 0px 0px 0px; // Assuming a magnifying glass icon or whatevs is on the left and is 20-ish pixels
width: 100px; // you can put this as in-line style if you make a more generic class
}
If you want to make the BG more generic, move the width of the button to make it in-line on the button, so the devs can change the width with the text value and make your generic bg image like 200px wide.
Depending on the browser, the text might not be as nice and ani-aliased as in others, but IMO, it's a small price to pay.
(Disclaimer: Please forgive me if you copy and paste this and it doen't work. I just hand-wrote it without testing it.)
Can you do it with javascript?
I have an image on my page that, when clicked, will show another button, and also change the src attribute of the first.
Here is what I use:
<script type="text/javascript">
function apps()
{
var element = document.getElementById("app_frame");
if (element.width != "0%")
{
parent.document.getElementById("frame").setAttribute("width","100%");
parent.document.getElementById("app_frame").setAttribute("width","0%");
parent.document.getElementById("appbutton").setAttribute("src","site/main/images/apps/show.gif");
parent.document.getElementById("wthrbutton").style.visibility="hidden";
}
else
{
parent.document.getElementById("frame").setAttribute("width","65%");
parent.document.getElementById("app_frame").setAttribute("width","35%");
parent.document.getElementById("appbutton").setAttribute("src","site/main/images/apps/hide.gif");
parent.document.getElementById("wthrbutton").style.visibility="visible";
}
}
</script>
What that says, is: set the "app_frame" as variable "element",
then check variable "element" for its width.
if its width is not 0, then it gets the element "frame",
by using getElementById, and then sets the attribute "width" to 100%
you can see slightly lower down that you use the same method, but use the SRC attribute rather than width, and set it to whatever you want, in my case, site/main/images/apps/show.gif
hope that helps