I wonder if it's possible to change the tick size of noUiSlider? I would like to reduce the height/length of the ticks but I can't find CSS selector of it. Thank you
I figured out the CSS selector for the property of tick size. The CSS code below works for my horizontal noUislider.
.noUi-marker-horizontal.noUi-marker-large {
height: 10px;
}
Related
I have many icons svg, I could use them as fonts if that is helpful and I would like to use ng-click(basically any kinda of click you know) the way that when i click on svg1 and svg2 wont be clicked. Till now i have tried allot of icons and many ways of doing it without success. I have upload to codepen small example, each region of that country have it's own svg which cover other svg's and make click on them impossible. Basic use of svg is below:
<svg>
<use xlink:href="#icon-region"></use>
</svg>
Since all <svg> elements in your page are absolute positioned and have both width and height of 100%, it's possible to only catch elements from the last element. That behavior comes from the way elements are rendered, within layers, like the example bellow:
+-<svg>--+
|+-<svg>--+
||+-<svg>--+
||| |
+|| |
+| |
+--------+
If all those elements have the same width, height and position you can only catch events from the last one, on the top of all.
To avoid this behavior you can do the following, with CSS:
.regionPosition {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
pointer-events: none;
}
.regionPosition > * {
pointer-events: all;
}
This way you disable the event listening from <svg> elements – with regionPosition class – and catch only the events from their immediate children.
Since you're using <use> inside your SVG to get the actually graphics, you can't rely only on Angular to bind the event, because the elements are not yet there when you load the script. You'll need to attach the event listener to the document and then check the target before call the function you want. This can be easily done with jQuery, as follows:
jQuery(document).on('click', '.regionPosition > *', function () {
// Call your function.
});
I changed your code a bit to show how to do it, here: http://codepen.io/anon/pen/waLwrm. I'm using a simple window.console.log() call to just log the clicked element. You can change it to another logic in your final code.
Reference:
jQuery hover problem due to z-index
Hi in Drupal 7 I am using autocomplete search. In search input it displays part of ajax loader animation all the time even when the input is not focused. Bug is marked with red square .
Any suggestions please why there is this bug. (I am using boostrap theme)
Thank you for help.
It's not a twitter bootstrap error.
See your drupal installation's misc/throbber.gif file. You will see that it's actually a sprite and when the ajax request is in progress, it changes its position to show the animated throbber.
You will need to create a new one and adjust CSS accordingly to workaround this issue. Your text field has a relatively higher length than this sprite's
Add the following CSS to your theme's css file. These styles are defined already, so you will only need to override them. See inline comments.
html.js input.form-autocomplete {
background-image: url("/misc/throbber.gif"); // Enter a new thribber image here.
background-position: 100% 2px;
background-repeat: no-repeat;
}
html.js input.throbbing {
background-position: 100% -18px; // Adjust this -18px to the height of your new throbber.
}
I want to create a Java web application based on JSF 2.0 and PrimeFaces 3.0
I have some problems with the tag: http://www.primefaces.org/showcase/ui/ring.jsf
Pictures that I used in the tag are bigger then default limits and I can't reduce their size any more in order to keep them in a good resolution.
I tried to change width and height in many tags but nothing new
So how can I modify the source code provided to use bigger photos in the ring tag???
Solution 1. Override height attribute's value of ui-ring css style class. You can use a custom css file or an inline style tag with .ui-ring { height: 18em; } inside it.
Solution 2. use style attribute setting the height directly style="height: 18em !important;" ( the !important may not be needed )
UPDATED May, 3
To enlarge the ring you can define a fixed width value using the style attribute. Component will adjust the distance between images automatically.
Ex.: width: 100%; or width: 300px or width: 50em
Unfortunately there's no way to adjust other options, but easing, of the Ring component.
I have a div which has position set to fixed. This div is meant to be site's header.
The problem is that it should take 100 % of the width except for leaving a small gap on the right edge, where we show a custom styled scroll-bar. The body of this page has been absolutely positioned and overflow set to scroll to present the custom scroll-bar.
I tried with 100% width, but then it takes 100% of the view-port instead of its parent. I also tried setting margin-right to scroll-bar width but it seems that is not honored. Is there a way to do this without using Javascript?
Let me just say this..
If your width is set to 100%, and you set margin-right: 20px;.. then the 20px is added to the original div.
Aside from that, I don't know what you're talking about without seeing it.
Instead of setting width to 100% I would use something like
#header {
height:30px; /* assumption */
top:0;
left:0;
right:10px; /* assumption */
}
I have a jqGrid that has add/edit dialogs with a form that's longer than the dialog height but the dialog won't scroll. I've tried to add an overflow: auto style to the dialog but no effect:
$("div.ui-jqdialog-content").css("overflow", "auto");
Although, if I change auto to scroll, I at least see a scrollbar but still no scrolling:
$("div.ui-jqdialog-content").css("overflow", "scroll");
This at least gives me a small glimmer of hope that I'm on the right track.
There doesn't seem to be any direction from the API documentation to support scrolling:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing
Does anyone know how to add a working scrollbar to the jqModal dialog window used by jqGrid?
UPDATE
This is a total hack job but I got a scrollbar to appear and function doing the following:
setTimeout(function() {$("#FrmGrid_list").html('<div style="height: 300px; overflow: auto;">' + $("#FrmGrid_list").html() + '</div>');}, 1000);
I attached this to the afterShowForm event. However, this really doesn't solve the problem because it causes other issues with other fields.
I thought I'd share my solution for others to reference.
The form element has a default height: auto; style property which causes the overflow: auto; not to function as desired. To make the overflow scroll, the height needs to be set to a fixed number to constrain the form container and therefore make the overflow necessary.
I attached a css update to the afterShowForm Form Editing event, using the following code:
afterShowForm: function(form) { form.css("height", "300px"); }
Mind you, 300px is an arbitrary number that I selected for testing. That number will be tweaked to fit my needs. It may even be dynamically adjusted on resizing. Who knows.
Also, using Firebug I found that my form id is FrmGrid_list. My grid id is list (e.g. <table id="list"></table> and jQuery("#list").jqGrid({...});). If your grid is named something other than list, the form id (above) should reflect that.
Reference link:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing
Your problem sounds strange. Every edit/add dialog has already a scrollable form with the name "FormPost" inside. This form has following style:
position: relative; width: 100%; height: auto; overflow: auto;
I just tested one jqGrid with a lot of controls and can scroll there without any problem.
The reason of the strange behavior which you have is probably that you either forget to include optional jqModal.js and jqDnR.js (see the same http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing page at the beginning) or use the wrong path to the files, so they will be not loaded.
This question is VERY old, but I'll add an answer anyway.
I don't know if this was possible before, but now you can simply use the dataheight property of the dialog (add or edit), to precisely set the height (in pixels) of the inner form. The default is 'auto', and thus it doesn't overflow. Setting the desired height shows the scroll-bar if necessary.
reference: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing