How to get the effect of 'user-select: text' in css3? - text
The validator at http://jigsaw.w3.org/css-validator/ says that the value 'text' for 'user-select' is not valid. For a css rule with this code in it:
user-select: text;
the validator says:
text is not a user-select value : text text
Presumably this is because of this behavior, specified at (the outdated) http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select:
This property is not inherited, but it does affect children in the
same way that display: none does, it limits it. That is if an element
is user-select: none, it doesn't matter what the user-select value is
of its children, the element's contents or it's childrens contents
cannot be selected.
Also, I only see the attribute value 'text' specified in that out-of-date css3 doc from w3.org:
http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select
and not in the latest one: http://www.w3.org/TR/css3-ui/
Additionally, searching 'whatwg.org' yields nothing.
Any ideas if 'user-select: text' is valid css3, and if not, what should be used instead?
This would be used, for example, when overriding 'user-select: none' rules applied to containers of text and ancestor containers.
You are getting this wrong. user-select:text doesn't mean it would select text only. It's default value of user-select property. W3C describe it this way:
The element's contents follow a standard text content selection model.
And Also MDN syas something same:
-moz-none The text of the element and sub-elements cannot be selected,
but selection can be enabled on sub-elements using
-moz-user-select:text .
So I don't think this should prevent selecting images or boxes.
As far as I know user-select:text is useful when you have user-select:none for most or all of your elements and you have a textbox or text area that is kind of output and you want it be selectable for copying and pasting.
It seems if you use -webkit- prefix it works for me. I'm sure it works with -moz- prefix too. Test this fiddle in your browser. I don't know why user-select:text is not working on my Chrome 13 Mac?
Related
verify heading text in css selector
This is my xpath "//div[#class='city']/h4[text()='Newyork']"
xpaths I can use in Geb but I want to write similar expression in CSS or better Groovy-ish, Gebish locator.
I have tried
.city>h4:'Newyork'
.city>h4:contains('Newyork')
but none worked.
I have referred https://sqa.stackexchange.com/questions/362/a-way-to-match-on-text-using-css-locators
Geb has an ability to further filter down the elements matched using a CSS selector by passing a map of element attributes to its methods together with that selector. It also introduces a special attribute for matching text of a node. Your selector would look like this:
$('div.city > h4', text: 'Newyork')
Please note that this works by fetching text for every matched element and checking it against the provided value, that is it does the work on the JVM side and not in the browser, which means that you want your css selector to be as specific as possible and match as little elements as possible otherwise the selector will be very slow.
TinyMCE and SVG
I'm using the latest/current TinyMCE editor (<script type="text/javascript" src='https://cdn.tinymce.com/4/tinymce.min.js'></script>) and it doesn't seem capable of displaying <svg>. I have some HTML saved in a database which contains some <svg>. When loaded in TinyMCE, it doesn't display. Is this a known issue (I've searched and haven't found much)? Any workarounds?
TinyMCE strips empty and invalid tags. You can solve it by
Adding ' ' to each empty element:
svg.find('*').each(function() {
if (!$(this).html()) {
$(this).text(' ');
}
});
here svg is your jQuery wrapped svg element.
Extending the valid elements according to the svg element reference*
extended_valid_elements: "svg[*],defs[*],pattern[*],desc[*],metadata[*],g[*],mask[*],path[*],line[*],marker[*],rect[*],circle[*],ellipse[*],polygon[*],polyline[*],linearGradient[*],radialGradient[*],stop[*],image[*],view[*],text[*],textPath[*],title[*],tspan[*],glyph[*],symbol[*],switch[*],use[*]"
*Note I added only the elements relevant for my case.
I tried Koen's first suggestion and it worked for existing SVG content (I added this in the setup callback). However it still filtered the SVG tags out when pasting HTML into the source code editor and then confirming the dialog. After digging a bit into TinyMCE's source code to see where those elements are actually removed (it's in the DomParser class) I found an undocumented editor setting for the Schema class that specifies tags that are allowed to be empty without being removed. The only annoying thing is that you can't use it to add to the existing list, you can only override it. So when setting it you have to list the tags it has in there by default as well. Use this in the settings that you provide to TinyMCE when initialising it: // First the list of tags that it normally knows about by default: non_empty_elements: "td,th,iframe,video,audio,object,script,pre,code,area,base,basefont,br,col,frame,hr,img,input,isindex,link,meta,param,embed,source,wbr,track" // Now we add tags related to SVGs that it doesn't normally know about: + "svg,defs,pattern,desc,metadata,g,mask,path,line,marker,rect,circle,ellipse,polygon,polyline,linearGradient,radialGradient,stop,image,view,text,textPath,title,tspan,glyph,symbol,switch,use", This way these SVG tags should never be filtered out because they are empty - as long as they are also valid in general, e.g. by setting the extended_valid_elements as Koen suggested above or by allowing all elements (not recommended as it leaves you vulnerable to XSS attacks): extended_valid_elements: "*[*]" Please note that this worked for my version 4.5.8 of TinyMCE. Since this setting is undocumented it might not work anymore in current or future versions. Also they might've adjusted the default list that I'm overriding here in later versions. Find nonEmptyElementsMap and shortEndedElementsMap in Schema.js in their source code to find the default list in your version (the two lists get combined) and note that in there the tags are separated by spaces but when you supply a list yourself the list is separated by commas (for whatever reason).
Seams to be TinyMCE that removes it because it is an empty tag: http://world.episerver.com/forum/developer-forum/-EPiServer-75-CMS/Thread-Container/2015/1/tinymce-and-svgs/ You might be able to use this inside the init: extended_valid_elements : "svg[*]", It works with other empty tags etc, but have never tried with SVG. From the forum post I linked to: ok,I did some debugging into TinyMCE and the problem seems to be that the svg element is detected as being empty and therefor removed. Unfortunatley there is no config way to change this behavior but there are some workarounds. Always have a name attibute for the svg element: <svg name="something" Always have a data-mce attribute for the svg element: <svg data-mce-something="something" Include some text content within the svg element: <svg> </svg> Using these techniques i could succesfully store inline svg in an xhtml property
I made it work by adding all valid SVG elements to the extended_valid_elements property of the settings object while initializing TinyMCE, no other action was needed For your convenience here's the full list of SVG elements I used a[*],altGlyph[*],altGlyphDef[*],altGlyphItem[*],animate[*],animateMotion[*],animateTransform[*],circle[*],clipPath[*],color-profile[*],cursor[*],defs[*],desc[*],ellipse[*],feBlend[*],feColorMatrix[*],feComponentTransfer[*],feComposite[*],feConvolveMatrix[*],feDiffuseLighting[*],feDisplacementMap[*],feDistantLight[*],feFlood[*],feFuncA[*],feFuncB[*],feFuncG[*],feFuncR[*],feGaussianBlur[*],feImage[*],feMerge[*],feMergeNode[*],feMorphology[*],feOffset[*],fePointLight[*],feSpecularLighting[*],feSpotLight[*],feTile[*],feTurbulence[*],filter[*],font[*],font-face[*],font-face-format[*],font-face-name[*],font-face-src[*],font-face-uri[*],foreignObject[*],g[*],glyph[*],glyphRef[*],hkern[*],image[*],line[*],linearGradient[*],marker[*],mask[*],metadata[*],missing-glyph[*],mpath[*],path[*],pattern[*],polygon[*],polyline[*],radialGradient[*],rect[*],script[*],set[*],stop[*],style[*],svg[*],switch[*],symbol[*],text[*],textPath[*],title[*],tref[*],tspan[*],use[*],view[*],vkern[*],a[*],animate[*],animateMotion[*],animateTransform[*],circle[*],clipPath[*],defs[*],desc[*],discard[*],ellipse[*],feBlend[*],feColorMatrix[*],feComponentTransfer[*],feComposite[*],feConvolveMatrix[*],feDiffuseLighting[*],feDisplacementMap[*],feDistantLight[*],feDropShadow[*],feFlood[*],feFuncA[*],feFuncB[*],feFuncG[*],feFuncR[*],feGaussianBlur[*],feImage[*],feMerge[*],feMergeNode[*],feMorphology[*],feOffset[*],fePointLight[*],feSpecularLighting[*],feSpotLight[*],feTile[*],feTurbulence[*],filter[*],foreignObject[*],g[*],hatch[*],hatchpath[*],image[*],line[*],linearGradient[*],marker[*],mask[*],metadata[*],mpath[*],path[*],pattern[*],polygon[*],polyline[*],radialGradient[*],rect[*],script[*],set[*],stop[*],style[*],svg[*],switch[*],symbol[*],text[*],textPath[*],title[*],tspan[*],use[*],view[*],g[*],animate[*],animateColor[*],animateMotion[*],animateTransform[*],discard[*],mpath[*],set[*],circle[*],ellipse[*],line[*],polygon[*],polyline[*],rect[*],a[*],defs[*],g[*],marker[*],mask[*],missing-glyph[*],pattern[*],svg[*],switch[*],symbol[*],desc[*],metadata[*],title[*],feBlend[*],feColorMatrix[*],feComponentTransfer[*],feComposite[*],feConvolveMatrix[*],feDiffuseLighting[*],feDisplacementMap[*],feDropShadow[*],feFlood[*],feFuncA[*],feFuncB[*],feFuncG[*],feFuncR[*],feGaussianBlur[*],feImage[*],feMerge[*],feMergeNode[*],feMorphology[*],feOffset[*],feSpecularLighting[*],feTile[*],feTurbulence[*],font[*],font-face[*],font-face-format[*],font-face-name[*],font-face-src[*],font-face-uri[*],hkern[*],vkern[*],linearGradient[*],radialGradient[*],stop[*],circle[*],ellipse[*],image[*],line[*],path[*],polygon[*],polyline[*],rect[*],text[*],use[*],use[*],feDistantLight[*],fePointLight[*],feSpotLight[*],clipPath[*],defs[*],hatch[*],linearGradient[*],marker[*],mask[*],metadata[*],pattern[*],radialGradient[*],script[*],style[*],symbol[*],title[*],hatch[*],linearGradient[*],pattern[*],radialGradient[*],solidcolor[*],a[*],circle[*],ellipse[*],foreignObject[*],g[*],image[*],line[*],path[*],polygon[*],polyline[*],rect[*],svg[*],switch[*],symbol[*],text[*],textPath[*],tspan[*],use[*],g[*],circle[*],ellipse[*],line[*],path[*],polygon[*],polyline[*],rect[*],defs[*],g[*],svg[*],symbol[*],use[*],altGlyph[*],altGlyphDef[*],altGlyphItem[*],glyph[*],glyphRef[*],textPath[*],text[*],tref[*],tspan[*],altGlyph[*],textPath[*],tref[*],tspan[*],clipPath[*],cursor[*],filter[*],foreignObject[*],hatchpath[*],script[*],style[*],view[*],altGlyph[*],altGlyphDef[*],altGlyphItem[*],animateColor[*],cursor[*],font[*],font-face[*],font-face-format[*],font-face-name[*],font-face-src[*],font-face-uri[*],glyph[*],glyphRef[*],hkern[*],missing-glyph[*],tref[*],vkern[*]
How to wrap af:inputFile text name?
I am using JDeveloper 11.1.2.3.0, I have an inputFile component in my page that takes its text value from the name of some components. The problem is that that when the text is long it gets displayed all there and may even occupy the whole window. Is there any possibility to wrap this text value in this case?
I don't think <af:inputFile> has a labelStyle attribute: You can try adding the CSS in the component's inlineStyle or contentStyle <af:inputFile inlineStyle="word-wrap:break-word;" /> It depends if the very long text is in the content or the label of the field. If this doesn't do the trick, you can try creating a custom skin and customizing the label or content style via the adf style selectors: af|inputFile::content , af|inputFile::label. Btw, you need to check if word-wrap works on all browsers you're targeting.
You can try setting the labelStyle attribute of the <af:inputFile> component to wrap the contents of the label. I am not sure of the CSS style attribtue information for it, but searching on the net I found word-wrap:break-word;.
I too had this problem with af:inputFile. Just give contentStyle="width:200px" it will solve the issue. we can adjust the width accordingly.
CSS - z-index:-1 breaking in google chrome
Basically creating a webpage with a dropdown menu I wrote following a tutorial. My page layout consists of 3 separate tables which include 1 for the title/banner, one for the drop down menu and one for the body/content.
The problem I am having first off is that when I scroll over my drop-down menu it drops behind my body/content table. I found a fix for this which was to include z-index:-1. This worked perfectly in IE but after testing it in chrome it prevented links and iframes to be interacted with on the content/body table.
#bodytable {width:1100px;
height:100%;
margin:auto;
position:relative;
top:10px;
z-index:-1;
}
The entire .css code can be found here:
http://pastebin.com/T97JAjQ8
Try giving them each a positive z-index value. Obviously the higher numbes will be "on top" of the other with lesser value. Instaed of giving a table "-1", give it something positive, like 10 and make the dropdown menus "20". You can even set the z-index of the body, to 0 as a baseline. I haven't confirmed this, but it could be that chrome doesn't like negative z-index values.
Giving Negative z-index makes your element to go under body or wrapper div and hence, prevent them to be interacted because the body element is on the top of that table when you click the event occurs on the body tag not table tag. You have to give positive z-index value. Default stack order of elements is determined the position where the element is defined. For example, your table will be have a larger z-index value if it is defined after menu div. You can fix your problem by changing only the current stack order. By just changing that negative value to positive.
element {
z-index:1;
}
The above code will set the target element to be on top of others beside the current stack order.
How to insert a value into a text field under a div using Watir
I used set to insert a value in a text field under a div.
Below is the approach that I've used without success. This is the only way I was able to identify the element. When I tried to identify text field by name was not recognized.
#browser.div(:evaluation, :id => "evaluation_form_attributes").text_field(:id => "evaluation_form_name")
#browser.set('Teacher Evaluation Form')
The following error was displayed:
undefined method `set' for #<Watir::IE:0x4dd9348>
This is the HTML:
div id="evaluation_form_attributes"
Evaluation name:
input id="evaluation_form_name" type="text" size="50" name="evaluation_form[name]" maxlength="30"
Try this: browser.text_field(:id => "evaluation_form_name").set 'Teacher Evaluation Form'
Is there an iframe involved perhaps? if you know the thing is there, and you are sure of the ID, and watir cannot locate it, then usually it's because that part of the page is inside of a frame. To work with elements that are inside of a frame, you must specify the frame, then the element browser.frame(:how, what).element(:how, what).method etc. see http://wiki.openqa.org/display/WTR/Frames for more info
To set a value for a text field you simply need to find it and set it. The setting part you already know (set), so you need to string together something that finds the text field. if Zejiko's answer doesn't work because of "unable to locate element" then it's not the setting that's failing, it's finding the text field. Use Firebug (in Firefox) or some kind of DOM toolkit (Tools>Developer Tools or F12 in IE8) to find the text field and see what kind of attributes it has. Ensure the id is really "evaluation_form_name". This is case sensitive and sensitive to leading/trailing spaces. You could try the following to make your search broader: #browser.text_field(:id => /evaluation/).set 'Teacher Evaluation Form' This uses a regular expression to identify the id. You can search by many things, not just :id, and you can use more than one. For example: #browser.text_field(:id => /eval/, :index => 2) finds the second text field whose id contains "eval". What you can use to identify the text field can be found here: https://github.com/watir/watir/wiki/HTML-Elements-Supported-by-Watir