Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I love how the textarea can be resized by placing the mouse on the slanted lines in the lower right hand corner and dragging the mouse. I am wanting to add css styles to text and this cannot be achieved with a textarea. Does anyone know a way to emulate the textarea resizing using another DOM element? This way, I can add my CSS styles to the text and whatever else i place inside. Thanks in advance.
I think you will find that you can apply css to a text-area just like you can with any other element. Theres only two elements which are funny with css, thats file uploader and select.
For example, see http://codepen.io/cshaw/pen/YyVxRE for an example of a text-area styled with basic css.
<style>
textarea {
border: 1px solid black;
background: green;
color: white;
padding: 10px;
width: 500px;
height: 300px;
}
</style>
<textarea name="youtextarea">
SOME CONTENT
</textarea>
Or if it must me a re sizable div see http://codepen.io/cshaw/pen/zvwdbB
<style>
div {
resize: both;
border: 1px solid #222;
width: 500px;
height: 200px;
overflow: auto;
background: #222;
color: #999;
padding: 10px;
}
</style>
<div>Resizable Div</div>
Or pop over to https://www.chris-shaw.com for more.
did you try the css resize property ??
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
<div>Let the user resize both the height and the width of this div element.</div>
</body>
</html>
Related
This question already has answers here:
Font scaling based on size of container
(41 answers)
Closed 9 months ago.
I want to scale the font of the text in the circle if it overflows.
If it is overflowed I want the text to resized until it fits inside the circle. I'll eventually be coding in dynamic text, so I need to find a solution that is able to check overflow every time it's re-rendered.
I've been trying to do this with Javascript and React.js, however I'm having a hard time finding a solution. My current idea is to create a function called changeFontSize and do a conditional where I check if the text width is greater than the circle width. Then keep decreasing the size until the text fits.
I'm still quite new to Javascript, so I'm unsure how to execute this.
I want to be able to do this without calling in a package to handle it for me.
.circle {
justify-content: center;
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid red;
line-height:50px;
text-align:center;
}
<div class="circle">circleCIRCLEcircle</div>
There's a great npm package called fitty that will fit the text to the size of the container automatically:
<div id="my-element">Hello World</div>
<script src="fitty.min.js"></script>
<script>
fitty('#my-element');
</script>
.circle {
border-radius: 50%;
width:100px;
height: 100px;
padding: 10px;
background: #fff;
border: 3px solid #000;
color: #000;
text-align: center;
font: 32px Arial, sans-serif;
word-break: break-word;
white-space: break-spaces;
<div class="circle">circleCirlcecircle</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
In React on a button click I make a small component (compSmall) visible on top of another big component (compBig). using css properties on compSmall such as
position: absolute;
width: 300px;
height: 150px;
margin-left: 40%;
margin-top: 200px;
border: 1px solid #0083a5;
z-index: 100;
But when compSmall is visible on top of compBig, background (means content of compBig) still visible . But I want content of compBig is to be not visible clear or blur when compSmall is visible.
How to achieve this.
PS:
I can only apply properties on compSmall, not on CompBig. Since CompBig is the whole application component except compSmall.
What about make compSmall with the same size of compBig, so you will not see the compBig and inside the compSmall you can create another component or just a div with those css properties.
JSX
<CompBig>
<CompSmall className="compSmall">
<div className="content"></div>
</CompSmall>
</CompBig>
CSS
.content {
position: absolute;
width: 300px;
height: 150px;
margin-left: 40%;
margin-top: 200px;
border: 1px solid #0083a5;
z-index: 100;
}
.compSmall {
/* Add the blur effect */
filter: blur(8px);
height: 100%;
width: 100%
}
I am working with jsf and I am using the h:selectOneMenu tag. Currently on the Website it is getting displayed like this :
selectOneMenu
But i would like to change the apperieance of the arrow at the end. It should have a red color and no background. I have tried a lot of things like using the overflow attribute or changing the background of the select item to the dropdown arrow i would like to have. Changing the Color of the element also effects the writing in it. For some reason putting the selectOneMenu into a div and adding folowing styles to it works fine:
.epSelect {
width: 240px;
overflow: hidden;
background: url(..arrowdown_red.png) no-repeat right #FAFAFA;
border: 1px solid #CDCDCD;
color: #333333;
height: 27px; }
.epSelect select {
background: transparent;
width: 257px;
height: 27px;
padding-top: 5px;
font-size: 12px;
border: 0;
border-radius: 0;
-webkit-appearance: none;
padding-left: 3%;
cursor: pointer;
}
"epSelect" ofcause beeing added as class to the div
Does anyone knonw the specific css element which can be addressed to change the color of the arrow only ?
in the standard html select tag it would be addressed by the label:after attribute as can be seen here : http://cssdeck.com/labs/styling-select-box-with-css3
Any help is much appreciated.
Simply put JSF is in this part merely an html generator in which it generates a plain html select/dropdown. Effectively your question is 'How do I change the icon of an html select'.
So look at the following Stackoverflow Q/A for answers
How to change down-arrow on select tag
CSS Select box arrow style
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have 3 rectangles that I've created with CSS. I want them to be clickable and link them to a file called "index.html". I've been searching over the web but could not find a way to do it. Is there also a way where hovering your mouse over the rectangle would just have the index.html file pop up but not open in a completely new window? Here is a snippet of what I have so far:
.rec
{
height: 100px;
width: 125px;
}
#d1
{
background : lightgreen;
border: 2px solid black;
display: inline-block;
left: 0%;
}
#r1
{
background : red;
border: 2px solid black;
display: inline-block;
left: 10%; position: relative;
}
#r3
{
background : white;
border: 2px solid black;
display: inline-block;
left: 20%; position: relative;
}
You should see JavaScript and jQuery tutorials. It's what, mostly, makes web pages interactive. Although in here, the best solution is clearly to use
<a href="index.html">
it would be good for you to learn them, and their incredible power. Check this fiddle here: http://jsfiddle.net/qjntjyyr/
As you can see, it's quite simple. In the next fiddle, I'm using an event for when the mouse goes over the squares.
http://jsfiddle.net/qjntjyyr/1/
Have fun with it, you can manipulate almost everything you want.
The clickable rectangles:
Index
Index
Index
As for the little box that appears when you hover them, you could use a title="" in the anchor tag, but that has the default styling the OS gives it. To customize one yourself you'd need JavaScript.
I found an interesting link to learn for your problem:css-trick
But the first answer is a good one to use.
I need to know how to create an overflow option that will link to another page once the text overflows by either me or by the browser size increases. I have divs with borders one side an image and the other the text. The text is inside a paragraph tag. This is not in a form at all. I prefer the code in JavaScript but will accept any other languages that will get the job done. I understand for the browser size increases that I can set the font-size but I want everybody including the blind to read the content.
Here is my logic::
Get JavaScript to detect the text size.
Determine if the text has passed the outside borders.
Create page for content. (optional)
Create/display link to rest of content.
I appreciate any help that you all can give.
To mrtsherman, if I used overflow it will look like an example I made below (tested in Firefox). I apologize for the confusion but the ultimate goal is to detect that the browser’s current text is too large for the divider tag, display a link to the detailed page and cut off all of the text that would typically overflow. I know I am making this a little complex but I would like for any reader to easily read the content. If you would go to tools > Options > content tab - fonts and colors - size: 28 in Firefox you will see big words in a hard to read overview of what the sentence/paragraph is trying to tell you. Simply put I am trying to make it easier to read the overview for reader who has truble seeing. Thank you for your input.
CSS:
.first_div
{
border: 2px dotted grey;
width: 415px;
height: 200px;
padding: 10px 10px 10px 10px;
overflow: auto;
}
.second_div
{
margin: -13px 0px 0px 205px;
padding: 10px 10px 10px 10px;
width: 200px;
height: inherit;
position: absolute;
overflow: auto;
border-left: 2px dotted grey;
}
#picture
{
background-color: green;
width: 200px;
height: inherit;
color: white;
}
h3
{
font-weight: bold;
color: black;
}
Body
<h3>Overflow Example:</h3>
<div class = "first_div">
<div class = "second_div">
<p>
This div text will be inside. This div text will be inside. This div text will be inside. This div text will be inside. This div text will be inside. This div text will be inside. This div text will be inside. This div text will be inside. This div text will be inside.
</p>
</div>
<div id = "picture">THIS IS A PICTURE</div>
</div>