I want to use the SLDS picklist found here.
I'm using several other SLDS elements in my page and they work fine, I have included the necessary SLDS css.
The picklist doesn't actually work in the example they provide so I'm wondering if there is additional configuration required? The documentation does not mention any.
Can anyone tell me what the problem is?
As of my understanding after reading the SLDS documentation the SLDS is just a CSS "framework". For the picklist to work (open) you need to include some Javascript and more specifically the picklist is "opened" by adding a class slds-is-open to the element (picklist). Apply the class to the div stated below.
<div class="slds-picklist slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open" aria-expanded="true">
I can't really make a demo out of this since the SLDS is so complicated to install but hopefully this can help you.
Well those dropdowns require some kind of javascript or jquery so there should be a file you have to include. CSS just styles the content it doesen't make it work XD
if you not comfortable with JS you can use this JS library
or add slds-is-open class on click event
If you are working with desktop application only (no SalesForce1), a simple way to make it work without adding code is removing the trigger--click
Just let the div like this:
<div class="slds-dropdown-trigger slds-is-open"> *//your list//* </div>
And it will work when you put your mouse over the icon.
It will have a weird behavior in SalesForce1 because you can't put your finger "over" without "clicking" the screen, keep that in mind.
PS: slds-dropdown-trigger is deprecated at the moment in SLDS documentation, keep that in mind too.
Related
I using vue3. I need to router-tabs likes vue-router-tab.
I tried to use vue-router-tab on Vue3, but its changelog shows that it only works with Vue2.
So I want to make a router tab myself. But I don't know how to make it.
Please tell me how to make the most basic router-tab.
You want to rely on Vue's <slot> method. There are multiple ways of doing it from there.
There's a LearnVue that will help you learn how to do it: https://learnvue.co/tutorials/vue-reusable-tabs-component
I am using HTML to do the basic FancyTree initialization of a folder tree control and I was wondering if I could also specify a custom icon for these folders, i.e.,
<li id="xyz' class="folder" data-icon="myFolderIcon.gif">Folder Name
In the definition of my FancyTree control, I specify an imagePath:
$("#tree").fancytree({imagePath: "skin-win8/",
but all I see is an empty spot where my icon should appear, even though I placed my custom icon in the skin-win8 folder. What's the simplest way to add a custom icon or two to a FancyTree control? I'm both a FancyTree and CSS neophyte, in case you were wondering :)
Sheldon
That looks ok to me. Basically the same as in this demo:
http://wwwendt.de/tech/fancytree/demo/sample-theming.html
Maybe simply a typo in your markup:
<li id="xyz' class="folder" data-icon="myFolderIcon.gif">Folder Name
(should be id="xyz" instead of id="xyz')
Thanks again to mar10 to pointing me in the right direction, even though his thought that I had a typo in my markup was not the actual culprit. But by saying that he didn't see anything wrong and referring me back to his demo for custom node icons, it got me thinking that perhaps I too was also experiencing an imagePath issue, like this previous custom-node question
So I went back to my FancyTree download and got the custom-node example working on my server, then I moved the page and its dependencies around till I got something similar to my situation. Once I had that working, I was able to use the same approach within my actual page...
I happen to keep all my FancyTree-related files in a directory called fancytree within my application's web folder, so I added a subfolder called custom there and set my imagepath in the following manner:
imagePath: "fancytree/custom/",
Once I did that, I was able to use my custom icon either by including it in the HTML definition of the node or by setting it within the Javascript function I used to initialize certain aspects of my tree. Hope this helps some other custom-node newcomer...
Sheldon
I am creating a mobile simulator that mocks the appearance and functionality of an iPhone (and other devices later) in a web browser, using 100% javascript, HTML5, and CSS, with the simulator fully functional with only client side code.
While trying to accomplish this task with as little modification as necessary to the original app projects themselves to be hosted in the simulator, I am injecting the <script> and <link> tags into the head of the page, then loading the html into a <div> screen.
The problem is that when I load in a new css file, it (obviously) overrides the one I'm using to style the page, and therefor some elements are affected (ex the background changes color).
My question is: Is there any way to limit the "scope" of an external .css file to apply only to objects within the <div> screen? Would it make any difference if instead of me injecting it into the <head> of the page, I inject it into a <style> element in the <div> screen?
UPDATE Support for this feature has been dropped. Please seek other options
Original Post:
You may want to look at scoped styles; see http://css-tricks.com/saving-the-day-with-scoped-css/.
The basic idea is
<div>
<style scoped>
#import "scoped.css";
</style>
</div>
However, you are on the bleeding edge here in terms of browser support. See http://caniuse.com/style-scoped.
One alternative would be to use an iframe.
Simply wrap all you css code inside the selector for parent element, say it's a div with id of foo you'd do the following:
div#foo{
//All your css
}
And convert it as less to css, it will prepend the right selectors. Note that you'll need to take care manually of things like #media queries and so on.
While writing this, the <style scoped> is deprecated by the Chrome team.
As a result I experimented with some approaches and released https://github.com/thgreasi/jquery.scopeLinkTags .
Note: you should only have to use this approach in case that you can't control the imported CSS file. If you can use SASS/LESS/anything to pre-process your CSS, you should prefer that.
A simple way is adding pre-class before all selector in css file.
I find a grunt script can do this:
https://github.com/ericf/grunt-css-selectors
This is how i do it if not using preprocessor in my project. Search for a online preprocessor then load copy paste the css under the parent class/id
.parent{
// copy paste here
}
Example
Find a preprocessor for example https://beautifytools.com/scss-compiler.php works very well for me (I have no affiliation with the given link)
if you are using from a URL add the URL using the load URL button.
Wrap the css code under parent and hit compile then minify.
I had a similar issue and found that Shadow DOMÂ can solve it easily.
let output = d.querySelector('#output')
let shadow = output.attachShadow({
mode: 'closed'
});
shadow.innerHTML = HTMLcontent // HTMLÂ content and style injected
Source
http://jsfiddle.net/AB5LK/2/
For the life of me, I can't get OverText working in the above example. I overrode the JSFiddle Mootools libraries (since they contain everything by default!) and inserted the ones I am using on my website, and have determined that the libraries are the ones causing the problems.
I use a slimmed-down MooTools library.
It looks as though while I selected OverText in the "More builder", there is still something missing in my libraries that causes the overtext to only become a label, and not a proper overtext.
Short of trial-and-error, does someone know which feature I am missing that will turn this overtext from a label on the right of the input box, to a proper OverText?
perhaps you need to reconsider your 'slimming down':
this.getStyle is not a function
[Break On This Error] return(d&&d.returnPos)?c:this.setStyle...urn this.getStyle("display")!="none";
Removing Element.Style is just silly, unless you're using MooTools for server side js like node and have no DOM.
Hai,
I have seen something that when mouseover is done on a link/word in a HTML page, an information will be popping up.
Can any one post some sample code or link to achieve that.
Thanks in Advance.
Here's a list of 10 plugins, which might be interesting:
http://www.reynoldsftw.com/2009/03/10-excellent-tooltip-plugins-with-jquery/
or - if you want to add tooltips to links - just use the title attribute:
Hello
Well that depends entirely on what javascript framework you use.
For instance in jquery, this plugin tooltip(http://jquery.bassistance.de/tooltip/demo/) makes it trivial to do this.
If you are not using any frameworks then use onMouseover etc.
eg
Link
You could use JQuery QTip to accomplish this.
Source and examples here
You can use the standard HTML attributes
<img src="path_to_image" title="Information tip about the image"/>
Or use JS librery to produce more friendly tooltips
jQuery with a tooltip plugin
Prototype with a tooltip extension
To add a tooltip to anything, use the tag <acronym>, or in german: (great html reference page). Style with css if necessary.