style problem with jQueryUI Autocomplete widget (using remote datasource) - css

<input class="ui-autocomplete-input"/> represents the text field to be autocompleted.
<ul>...</ul> contains the list of matching items from the text field input. It is added to the document by remote call as you type.
<ul>...</ul> is added just inside the closing </body> tag. I was expecting the <ul>...</ul> to be placed just after the <input class="ui-autocomplete-input"/>. Because this does not happen, the <ul>...</ul> falls outside of the containing div and the resulting style is broken.
Suggestions? Can I specify where the <ul>...</ul> gets placed in the document? Thanks in advance for your time.

Post your source (so we can see exactly what we're working with here) but basically you need just need to find the parent and then appendTo
$("ul").appendTo($("input.ui-autocomplete-input").parent());

Related

Wordpress text block list type is not changing

Try to change list type of text block in word press. I change the text block using text mode not visual mode
add type="A" in <ol> tag . But after save changes, it doesn't work. How to implement it correctly?
In the image below i want to change 1.Informasi Pribadi to A.Informasi Pribadi
https://ibb.co/DKCHtDB
https://ibb.co/NLPSxgY
This might point you in the right direction. Usually you will be changing list styles with either HTML or CSS.
With HTML there are <ul> (un ordered) and <ol> (ordered) lists.
Then you can change their bullet points with some CSS like in this tutorial:
https://www.w3schools.com/css/css_list.asp

Unable to locate element by div class

Trying to check if the element set focus to using class header matching by text and getting error unable to locate the element. I know the header title which is 'My Details' in this example, and using this title, how to locate the element?
<div class="attribute-group-header card__header">
<h3 class="attribute-group-title card__header-title">My Details</h3>
</div>
Element should be focused //div[contains(.,'My Details')
To locate the h3 in your example code, use this xpath //h3[contains(text(),'My Details')]
To locate the div which has card__header in class, use this xpath //div[contains(#class,'card__header')]
It worked fine with this keyword and the X-path reference. Thank you all for guiding me to find the solution
Element should be enabled //h3[contains(text(),'${MyLinkText}')]

seeing the script written inside html when i hover on tooltip

Iam getting a problem while i place mouse on tooltip only when the page loads intially. When i login to website, after the page is loaded when i place my mouse on '?' glyphicon symbol, iam able to see the whole title script that written inside the html.
This is the below text iam seeing when i hover. This is the title with close button 'x' inside the tool tip.
About your score<button type=button class=close data-dismiss=popover aria-hidden=true onclick=$('#abcPopover').popover('hide')>×</button>
I made the tooltip clickable. when i click on '?' glyphicon symbol the popover is not coming on first click and the script is now hiding. when i click on '?' glyphicon symbol second time it works fine the popover is coming. This is the problem iam seeing only on when page loads and when i click on '?' glyphicon symbol the title will hide and on second click works fine and popover will come up.
This is the code i have written in html.
<a href="#" id="abcPopover" data-html="true"
title="About your score<button type=button class=close data-dismiss=popover aria-hidden=true onclick=$('#abcPopover').popover('hide')>×</button>"
data-toggle="popover" data-content="{{abcTooltip}}" ng-click="open()"><i class="glyphicon glyphicon-question-sign"></i></a>
nesting a button in Html tag it isn't valid HTML5 according to the HTML5 Spec Document from W3C:
Content model: Transparent, but there must be no interactive content descendant.
The a element may be wrapped around entire paragraphs, lists, tables,
and so forth, even entire sections, so long as there is no interactive
content within (e.g. buttons or other links).
In other words, you can nest any elements inside an except the following:
<a>
<audio> (if the controls attribute is present)
<button>
<details>
<embed>
<iframe>
<img> (if the usemap attribute is present)
<input> (if the type attribute is not in the hidden state)
<keygen>
<label>
<menu> (if the type attribute is in the toolbar state)
<object> (if the usemap attribute is present)
<select>
<textarea>
<video> (if the controls attribute is present)
However, if your <button> tag is styled using CSS and doesn't look like the system's widget... Do yourself a favor, create a new class for your <a> tag and style it the same way.
Check this link out to create your tooltip. Link
Fiddle

xquery- how to get content of a node which is immediately after a node with known text

I am trying to extract content from a XHTML document-- in this document, within a div, there are a number of 'b' elements, each followed by a link.
For eg--
<div id="main">
<b> Bold text 1</b>
some link 1
<b> Bold text 2</b>
some link 2
<b> ABRACADABRA</b>
abracadbralink
</div>
Now, I want to extract the link 'abracadabralink'-- the problems are that, I dont know how many and elements are there before this specific link-- in different documents there are a different number of such elements- sometimes there are many links immediately after a single element-- all I do know is that the text for the element that occurs just before the link that I want, is always fixed.
So the only fixed information is that I want the link immediately after the element with known text-- how do I get this link using XQuery?
If I get it right, you are interested in the value of the #href attribute? This can be done with standard XPath syntax:
doc('yourdoc.xml')//*[. = ' abracadbralink']/#href/string()
For more information on XPath, I’d advise you to check out some online tutorials, such as http://www.w3schools.com/xpath/default.asp
I guess the following should work for you:
$yournode/b[. = ' ABRACADABRA']/following-sibling::a/#href/string()

show multiple rows words on <textarea> but single row in <div>

Let's say I typed in a <textarea>:
I
Love
You
Then I save it to phpMyAdmin database. Then I use MySQL to retrieve it from database and display it onto a <div>. Now the output that show in the <div> is :
I Love You
How do I make the <div> show exactly like the database field and textarea which has multiple rows?
If the text is stored exactly as it was entered into the <textarea> (i.e. it still contains the newline; check this by viewing the source of your page), you can use the CSS property white-space: pre on your <div>.
See this jsFiddle example; note how the content of both <div> tags are the same, but produce different output, due to the use of the white-space property in the second <div>.
Replace line returns with <br> tags.
If the textarea supports use of HTML tags (similar to the Stack Overflow answer box that I'm typing in now), then you could type:
I <br>
love <br>
you
and it would render in the way you want it to.

Resources