I wonder how can I achieve the same selectable new line as this for <textarea/>.
and this is what the normal textarea looks like image.
I'm currently using react and I tried researching for answer everywhere but I can't find any solution that will work or relavant to the result I'm trying to achieve.
Thanks all
In your stylesheet add:
textarea {
white-space: pre;
}
This allows new lines to be selected as well.
This is very simple, you can use tag in html and add the below code to css file.
textarea {
white-space: pre;
}
Related
This may be obvious but I can't find out how to change the size of font for different devices.
The documentation for d3-legend says that it does not use css.
CSS will still work if you select the SVG element containing your legend text. Here's an example in CSS.
svg text {
font-size:1.5em;
}
g.cell text.label { ... } worked.
I have a h1 element that looks something like this:
But I want the output to look something like this:
Is there a way that we can achieve it in HTML5? CSS3? JavaScript? JQuery?
Please let me know. Thank you.
As requested by #Ethyl I'm posting this as an answer
You can use word-wrap CSS property. You set a small width and break-word for the word-wrap property. Check this fiddle http://jsfiddle.net/1eje4uu4/.
HTML
<h1>Hello</h1>
CSS
h1 {
width: 5px;
word-wrap: break-word;
}
I can't tell you how reliable is this option, but it's one way to go.
You can use <BR> inside an <H1>.
<H1>H<BR>e<BR>l<BR>l<BR>o</H1>
<h1>H<br>E<br>L<br>L<br>O</h1>
And the output
HELLO
Use this jQuery:
$('h1').html($('h1').html().split('').join('<br>'))
Working example
** this will work on dynamic text.Check this with dynamic data
Default strikethrough functionality of CKEditor works well and do what is logic, adding an "s" tag surrounding the text that has strikethrough (also I can make the editor use html5's "del" tag), the problem however, is that assistive reading technologies such as NVDA or JAWS do not read this kind of content in any way different from normal text without special settings. What I'm trying to do is to add a span tag at the beginning and at the end of strikethrough text indicating this fact to the user:
<p>
<span style="height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px;">Start strikethrough. </span>
<s>Text with strikethrough</s>
<span style="height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px;">End strikethrough. </span>
</p>
As you can see in this code the span is not visible in the page but the reader will follow dom order so the user will be alerted of the strikethrough.
I know you can build a plugin to insert any html but I have to make this work in the same way basic styles buttons work, with toggle feature:
The easy part: if there is a selection in the content and the button is pressed we have to strikethrough the content. This one is easier as we can get the selected html and surround it with what I want.
The harder part: if there is no selection and the button is pressed then every text written next must have the strikethrough.
After lot of researching and analysing how the "real" plugin was made I came to something like this:
CKEDITOR.plugins.add( 'customStrike', {
icons: 'customStrike',
init: function( editor ) {
var style = new CKEDITOR.style( { element: 's' } );
editor.attachStyleStateChange( style, function (state) {
!editor.readOnly && editor.getCommand( 'customStrike').setState(state);
} );
editor.addCommand( 'customStrike', new CKEDITOR.styleCommand( style ) );
if ( editor.ui.addButton ) {
editor.ui.addButton( 'CustomStrike', {
label: 'Strike Through',
command: 'customStrike',
toolbar: 'custom'
} );
}
}
});
This works exactly as the real plugin, I tried to work around this code but the element property in the style defintion only accepts one tag as far as I know, I would need a way to nest tags using the element property to accomplish this.
Is there any way to solve this?
Any help would be appreciated.
For me it looks like you're trying to fix the wrong end of the problem. It's readers' problem that they don't read the content differently. Clobbering the content may help for a while (although it will break the editing), but will be a problem when the readers are updated and start reading the content properly.
Anyway, if you insist on having some solution right now, then I have two advices:
There may be some ARIA role or other attribute that you could set on the s/del tag which will somehow affect the readers.
Do not clobber the content inside the editor, because you will break it. You could for example process the content before sending it to the end user, if that's the part that you want to fix.
I have a PRE tag with a bunch of code in it and several lines. I want to apply a :hover style when a user hovers over a line.
Is there a way I could do this using CSS or Javascript? I looked at :first-line and couldn't find anything.
Any idea?
You have to use the <span class="changeonhover"> tag around each line and then you can have that effect.
pre tags are good way of dumping an array. Its not the best way to display the actual array or data.
If you want to do it in CSS:
wrap it around a div
.prediv a:hover{
background-color:blue;
}
And use:
<div class="prediv"><pre>CONTENT</pre></div>
This would hover the whole content not line by line.
My suggestion is use ul li tags and do a for loop in JavaScript and dump lines into li.
Hope this helps.
I want to display some text in a inline popup window with ok/close button.
I implemented and bit modified Custom Alert but sometimes the text has too many lines so I need the window scrollable.
I want to use only javascript. No framework nor libraries.
you should be able to accomplish that with css
With the default style it would be like this:
#alertBox p {
font:0.7em verdana,arial;
height:50px;
padding-left:5px;
margin-left:55px;
overflow:auto;
}
Example on jsfiddle.
Also as Casablanca points out, if you want to assign a specific class you can modify the javascript to use
msg.className = 'messageBox';
and then your own css
.messageBox{
overflow:auto;
}