text-overflow:ellipsis doesn't work in HTML select properly - javascript

Though text-overflow: ellipsis in css works properly in div, spans and etc it does not work properly in HTML select. Only the text overflow will be hidden from the select. But not ends with dots as the default behavior of text-overflow
Can anyone suggest any workarounds for this please ?
JsFiddle Exampleenter code here

Add
select, select option {
instead of
select
in your css
You had given style to only the select tag header and not the option tag

Related

Hide Aria label with css or javascript

I want to hide an arialabel without modifying it so just adding some code in css or javascript.
I know that you can put display:none for a class but is there any similar options for labels ?
Here's the aria label I want to hide. It doesn't have any ID
// aria-label="Sign-up" href="/EN-CA/contact-sign-up/" title="Sign-up">
Sign-up
//
You should be able to use display: none or visibility: hidden for this but if it isn't working for some reason, there's a way to hide aria-labels.
Use aria-hidden="true".
For example, <p aria-hidden="true">Hidden Aria Label</p>.

Text obstructing a textarea

In order to make a textarea handle some basic formatting, I put a div over it with the same monospace font and position. The div would display the same text, but with color and boldness.
However, the text inside the div obstructs and makes the user unable to select text inside the textarea.
<div class="centerc">
<div class="copyc">
<textarea id="input" class="ipadded epadded txtarea" rows=20 cols=80></textarea>
<div id="copyadd" class="copyadd"></div>
<!--THIS IS THE DIV FOR FORMATTING ^ -->
</div>
</div>
-webkit-user-select: none;-ms-user-select:none;user-select:none; etc has not fixed this issue, only made the user unable to select text in the div as well. If any more CSS code is needed, I will comment it but I don't think this is necessary.
How would I stop the div from making the user unable to select text from the textarea (if this is possible)?
If not, are there any alternatives to the method I use?
Edit: I should have made it clear from the start I wanted multiple types of formatting.
You can't put formatting in a textarea but you can use an editable div and get rid of the textarea. It will at least make the problem simpler.
See this question: editable div
In order to expand capacity of being stylized of a <textarea> a good starting point is thinking at the opposite: making a <div> editable...
<div id='divTextEditable' contenteditable></div>
That's not "the magic wand", and it has its downside, but it's a good starting point.
Why don't you just add some css to the textarea to accomplish what the div is trying to accomplish.
.dark-text {
font-weight: bold;
font-color: black;
}
You could, for instance, add a CSS rule that puts the text area in front of the div when the user is hovering over the parent div, something like this:
.copyc:hover txtarea {
z-index: 2;
}

Line-Wrap issue for highlighted span

I have this highlighted span in which you can type text
jsfiddle
You can click on the white area and start typing. Now when you type and you reach the and I would like it to wrap.
The HTML is not very special:
<div>
Complete the story:<br>
Once upon a time there was <span></span>. And they all die :)
</div>
<input>
To make the typing possible I use a hidden (not hidden in the demo) input field. Anyway, now when you start typing and you reach the end of the line it should wrap as follows:
I've tried things like word-wrap:break-word; but that didn't work very well. Is something like this even possible ?
You can't wrap text in an input. You could use a textarea instead. You will have to adjust your CSS for the size of the span to grow as the text spans multiple lines, by changing the height to min-height:
min-height: 20px;
See this fiddle for working version: https://jsfiddle.net/3L4bazg6/7/
I've also removed some of the styling in your span rule to get the wrap effect you are looking for.
Here's another fiddle that hides the textarea completely: https://jsfiddle.net/3L4bazg6/10/
And, here's a fiddle that does away with the textarea and the JavaScript completely and just uses contenteditable:" https://jsfiddle.net/3L4bazg6/17/
Refering to your js fiddle
Change display: inline-flex; to display: inline;
Remove height: 20px;
Add line-height
here is your updated JSfiddle
https://jsfiddle.net/sewpjeta/9/

How to apply CSS(specially padding/margin ) to options or optgroup of select drop down?

Padding or margin CSS only applies to the options in FF browser. I have tried same thing in IE chrome but does not work. Can someone let me know how we can style(padding/margin) option in select menu.
There is a DropKick JQuery library , where you can customize your dropdown (it's automatically replacing the native dropdowns with this element, so you don't need to replace your <select> elements in html code.
You won't see an option for padding or margin. That's because it isn't needed. What I typically do is I wrap the select dropdown in a div and style it like so.
.myDropdown select{
border: solid 1px red; font-weight: normal;width:300px;height:40px;font-size:12px;background:#FFC;
}
The reason padding is not available is because it really isn't needed. You can adjust the height or width of your box and the font size. Adjusting the height and width essentially adds more space around your text within the select. Anything more than adjusting these settings is just overkill. If you're really wanting that much control over styling then use something like jQuery UI or bootstrap.

how do i align the span tags in div tag in a well designed way?

Well Im stucked at this point.please take a look at this http://jsfiddle.net/karthik64/5jhgF/3/
Okay first enter some input into the input box and hit enter you would see a span element added to the div and try to input some more values and
I guess you got what the problem is.Could anyone tell me how do i fit those <span> tags in <div> tag in a nice manner.
I have set my div tag width and using javscript I add some elements to div tag and I get some kind of wierd bugs something like for example . if user enters dennis ritchie , steve jobs and bill gates my code works likes this
..dennis ritchie.. ..steve jobs.. ..bil
l gates..
Instead it should be like this
..dennis ritchie.. ..steve jobs..
..bill gates..
if it cannot fit the span tag in that remaining space, I want the whole span tag element jump to next line instead of breaking the span tag value how do i do that .please help me with this.any help is greatly appreciated.Thanks
<span>s are not block-level elements and are not rendered like you describe by default (they wrap with text). Apply the CSS display: inline-block; to your spans to stop them from wrapping.
On newer browsers, add display: inline-block; to the .music_elements style rule.
On older browsers, float: left; might work.

Categories

Resources