Is it possible to specify the position of the tooltips that noUiSlider draws? It appears that by default it places the first one over the slider, and the second below. I understand the usability goal here, but I'd like to put both above or below.
Example (with tooltips above and below): http://jsfiddle.net/leongersen/z83oz9np/2/
noUiSlider.create(div, {
start: [0, 50], // 2 handles
range: {
'min': 0,
'max': 50
},
tooltips: true // 2 tooltips but how to position?
});
I don't believe there is an option to specify the position of the labels. In the css version you're using there's
.noUi-horizontal .noUi-handle-upper .noUi-tooltip {
bottom:-32px
}
Which you can override to be the same as the other label:
.noUi-horizontal .noUi-handle-upper .noUi-tooltip {
top: -32px;
bottom: initial;
}
See your updated fiddle: http://jsfiddle.net/z83oz9np/20/
Think that's the best thing to do here. In the latest version on github I've noted this styling is missing, so take this into account if you ever update it.
You can overwrite the attribute "bottom" from the css class ".noUi-horizontal .noUi-tooltip"
for example to do the tooltip go below the slider:
.noUi-horizontal .noUi-tooltip {bottom: -130%;}
For others that find themselves here, this will give you more consistent positioning than negative pixel positioning:
.noUi-vertical .noUi-handle-upper .noUi-tooltip {
right: unset;
left: 120%;
}
This removes the right: 120%; from the tooltip and repositions it with respect to the left, like the bottom tooltip.
for me none of this solution worked so I ended up with my own:
.noUi-horizontal .noUi-tooltip
{
left: unset !important;
}
.noUi-target
{
direction: unset !important;
}
done.
Related
Hi I wanted to add some Arabic text to my Phaser game. I have the following in the update() function:
this.scoreText = this.add.text( this.world.centerX, this.world.height/5,
"",{nsize: "32px", fill: "#FFF", align: "center"});
this.scoreText.setText("تُفاحة");
This produces strange letters on the screen which are not Arabic. Any ideas?
First off, you shouldn't be adding text in the update() method - this would cause it to be added multiple times (once for each frame, ideally 60 times per second). Move it to the create() method so that it's only added once. You also have a typo in the parameters: nsize should be just size.
function create() {
this.scoreText = this.add.text( this.world.centerX, this.world.height / 5, "", { size: "32px", fill: "#FFF", align: "center" });
this.scoreText.setText("تُفاحة");
}
You can try something like
Import the font in the CSS part in index.html
#import url(https://fonts.googleapis.com/earlyaccess/amiri.css);
Then just declare the style as a variable
var style = { font: "32px Amiri", fill: "#333", align: "center" };
Then in the create function add the text like in this jsfiddle https://jsfiddle.net/albator2018/r2zLtoqd/
There is another manner to do it but like what i've just explained it works fine
I want my grid to have a dynamic height. Before with angular 1 and kendo i would do like this.
<kendo-grid id="grid" options="entityGrid.gridOptions"></kendo-grid>
With the following CSS:
#grid {
height: calc(100% - 1em);
}
But with Kendo grid for angular2 when i try this it wont work.
<kendo-grid id="grid"
[data]="entityGrid?.view | async"
[scrollable]="'virtual'">
</kendo-grid>
When using scrolling (and static headers), the grid content area needs to have a height, too. Computing it dynamically based on the page is not supported at this time, and is not going to work with angular-universal. You can log this as a feature request on the kendo-angular2 repo, so that it is considered for implementation.
That said, you can use the following hack to make it work:
encapsulation: ViewEncapsulation.None,
styles: [
`kendo-grid {
height: calc(100% - 3em);
margin-top: 3em;
}
kendo-grid .k-grid-content {
height: calc(100% - 46px);
}`
],
This will pass the styles in the component itself. The value 46px is the size of the header, and 3em is your desired offset.
See this plunkr example for a working demo.
I was able to set dynamic height with following configuration
<kendo-grid class="grid"
[kendoGridGroupBinding]="data"
[ngStyle]="gridHeight"
</kendo-grid>
In TS file
public gridHeight = {
height: 'calc(100vh - 140px)'
};
You can set height as per your requirement from TS
I've tried finding the solution to my problem but came up with nothing, so forgive me if this has been covered elsewhere.
I'm using Masonry for a client's site that I'm currently developing. In any viewport size that is 768px or wider, there are two element widths: 20% and 40%; when sizing down to mobile, i.e. up to 767px, the element sized at 20% becomes 50% and the one at 40% becomes 100%.
The problem is that, in mobile view, Masonry doesn't always put two of the 50% elements into a row, so the grid becomes broken up.
Here's a link to the dev site and Masonry grid: http://176.32.230.48/maxence.io/#work
Here's my CSS for the two different grid-item sizes:
.grid-item,
.grid-sizer {
width: 20%;
#include media(xs-max) {
width: 50%;
}
}
.grid-item-lg {
width: 40%;
#include media(xs-max) {
width: 100%;
}
}
Here's the relevant block of jQuery:
$container.masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
I'm also using the Masonry layout method on window resize:
var windowWidth = $(window).width();
if (windowWidth < 768) {
$('#grid').masonry('layout');
}
Anybody have any ideas?
This may be obvious, but I can't find how to enlarge the font size of an SC.LabelView. What I have now is
title: SC.LabelView.design({
layout: { centerX: 0, centerY: 0, height: 36, width: 200 },
tagName: "h1",
value: "Contacts"
})
Although it is an h1, it stays 'normal' text, but it is a title, as suggested by the property name.
SproutCore includes a CSS reset so that you can style your page and make it look the same across all browsers.
The best way to edit your styles is to add some CSS to my_app/resources/main_page.css using the font-size property.
$theme h1 {
font-size: 30px;
}
There are some comments and links to additional resources in the main_page.css file, but you can learn more from the Chance guide.
I have a TextArea() and would like to hide the vertical/horizontal scroll bars. I see that the control seems to have a built in scroll-pane that shows as needed.
TextArea numberPane = new TextArea();
numberPane.setEditable(false);
numberPane.setMaxWidth( 75 );
// Set the characteristics of our line number pane
numberPane.setId( "line-number-pane" );
In my CSS file I have the follow settings.
#line-number-pane
{
-fx-text-fill: white;
-fx-background-color: black;
-fx-font: 12px "Courier New";
-fx-font-family: "Courier New";
-fx-font-weight: bold;
}
#line-number-pane .scroll-pane
{
-fx-hbar-policy : never;
-fx-vbar-policy : never;
}
As expected the text area font/color/size works just fine. However, the scroll-pane policy doesn't seem to work.
Should I be able to hide the scroll bars via the CSS file or is there some code that will do the trick.
Thanks.
From How can I hide the scroll bar in TextArea?:
Remove Horizontal Scrollbar
textArea.setWrapText(true);
Remove Vertical Scrollbar
ScrollBar scrollBarv = (ScrollBar)ta.lookup(".scroll-bar:vertical");
scrollBarv.setDisable(true);
CSS
.text-area .scroll-bar:vertical:disabled {
-fx-opacity: 0;
}
I just did it very simply using a StyleSheet:
CSS
.text-area .scroll-bar:vertical {
-fx-pref-width: 1;
-fx-opacity: 0;
}
.text-area .scroll-bar:horizontal {
-fx-pref-height: 1;
-fx-opacity: 0;
}
No need for all that whacky code.
I observed code of TextAreaSkin class, and found, that a
void layoutChildren(x, y, w, h) method, which is called "during the layout pass of the scenegraph" and de facto, each time, when something happens with a control, contains a code, which changes hbarPolicy and vbarPolicy between AS_NEEDED and NEVER, according to the current state of control.
So, looks like, there is no chance to do somethign with it, using a css.
Try to just make scrollbars invisible. But, as I see code of ScrollPaneSkin, scrollBars are created once, but their visibility state seems to change during the control is working, so, instead of using setVisible(false) (which will be ignored in the nearest layout), try to use a setOpacity(0.0). (I'm not sure, it will work, but it worth to try).
Also, instead of CSS using, you can apply a recursive search of scrollBars in a control structure, using a Parent.getChildrenUnmodifiable() method, and make them invisible manually.