I'm new to React Native (done a couple example apps but I'm trying to branch out without a road map), and I'm having trouble with SliderIOS. My slider code is the following
<SliderIOS style={styles.slider}
onValueChange={(value) =>this.setState({value:value})}
maximumValue={100.0}
minimumValue={0.0} />
Styles includes:
slider:{
height:30,
margin:15,
}
The getInitialStateMethod sets this.state.value to 0.
The track is missing and the nob is totally nonfunctional (see http://i.imgur.com/K85zRBG.jpg - can't post images yet).
I'm sure I'm missing something very simple, but not sure how to solve it. Let me know if you need more information to make my question sensible.
Thank you!
I think your issue is that you did not specify a width for the slider. Try adding flex: 1 to the style slider, which will make the slider consume all remaining space not required by other components. For further details see CSS tricks as well as the React Native documentation. Alternatively, you can set the width attribute. Below you can see some code I use for creating the slider illustrated by the following Image:
sliderConfigurationView:
{
height: 20,
flex: 1,
margin: 6
}
Related
In Vaadin 14, I would like to have a listbox with a scrollbar. Either permanently present, or even better, one that appears when the space needed for the list exceeds the maximum height of the listbox.
It does not necessarily have to be done using the vaadin core component; if there is something else out there that would do the same job and can be integrated into my Vaadin application easily, that's also fine.
I have little experience in web components and have no idea where to start to achieve this.
If much more knowledge is necessary, please point me in the right direction to learn it.
This is how a ListBox component already works in Vaadin :) Scrollbar appears, if there is no enough space to display all items
ListBox<String> listBox = new ListBox<>();
listBox.setItems("Bread", "Butter", "Milk");
listBox.setHeight("100px");
add(listBox);
A Web-component Vaadin docs page Vaadin-ListBox HTML
Setting height will work, and with minor CSS changes max-height will also work. Here’s what you need to add to your theme.
In Java (Vaadin 14+):
#CssImport(value = "./styles/my-styles.css", themeFor = "vaadin-list-box")
In CSS (my-styles.css):
[part="items"] {
flex: auto;
height: auto;
}
I opened a new issue for fixing this: https://github.com/vaadin/vaadin-list-box/issues/56
Being pretty new to React Native, hopefully this is an obvious oversight, but I've experimented and not found a solution. It's a pretty straightforward problem: when I have a couple of Views and a TextInput, everything lays out as expected. When I wrap them in a ScrollView, the Views remain but the TextInput no longer renders. I have not been able to figure out why.
To test and share it I created an rnplay app here: https://rnplay.org/apps/P774EQ
As you can see, the text in the Views wrapping the TextInput appear as expected, but the TextInput isn't there. If you just remove the ScrollView (lines 18 & 39), the TextInput appears.
Hopefully someone experienced will look at this and have an answer in a few seconds because I'm pretty sure I'm just missing something obvious. Thanks in advance.
1) Line17: style={styles.scrollview} => style={styles.scrollView}, you have a spell mistake.
2) Use contentContainerStyle for ScrollView (for more details about contentContainerStyle)
<ScrollView keyboardDismissMode='interactive' style={styles.scrollview} contentContainerStyle={styles.contentContainerStyle}>
and here is the contentContainerStyle:
contentContainerStyle: {
flex: 1,
}
3) The flex property of message style is better to set as .125 because the flex of inputcontainer is .75.
I've just upgraded my site to the new 3.0 release.
The charts shown on my site are 990x548 pixels.
But when I select an export, regardless of whether it's png/jpg/pdf/svg, the output is 1020x930pixels.
Is this a known bug, or might I be doing something wrong?
Thanks!
Yo can define width / height exported image by chartOptions parameter.
http://api.highcharts.com/highcharts#exporting.chartOptions
the exportButton and printButton are now removed, and replaced with a generic contextButton. So you can use that one for your dropdown menu: http://api.highcharts.com/highcharts#exporting.buttons.
See also the new article at http://docs.highcharts.com/#export-module
Please refer my question
Highcharts 3.0 version changes in exporting options?
The problem was that I didn't have an explicit width set on the chartContainer div. I was just letting it flow to 100% of the parent element. As soon as I set an explicit width on that div, the exporting size options worked. Before that the chart would come out squished regardless of what documented options I set.
In Titanium SDK before 2.0 the following snippet worked like a charm on iOS Apps:
var label = Titanium.UI.createLabel({
text: 'Sample Text',
width: 'auto'
});
alert(label.width); // shows the pixel width of the label
With the new release of the 2.0+ SDK this seems to no longer be supported.
Is there a different approach available that does not involve events such as postlayout? Events will need a ansync. handling which adds too much work to the creation of views.
The solution is dirty and more or less a workaround:
label.toImage().width
… represents the width by creating an image of the label first.
Ok, So I'm a bit lost on this. jQuery UI documentation states that on resizable i can have visible handles which as i understand are visible icons/pictures (do I understand this correctly?)
If specified as a string, should be a comma-split list of any of the following: 'n, e, s, w, >ne, se, sw, nw, all'. The necessary handles will be auto-generated by the plugin.
So I should have handles all over my object if I specify 'all' ? If so, it does not seem to work--I only have something visible on 'se' corner.
Now looking at jQuery UI resizable source code, it seems that this is the only way it is supossed to work :
if ('se' == handle) {
axis.addClass('ui-icon ui-icon-gripsmall-diagonal-se');
};
Am I missing something? Can I create them on my own?
That code is telling the widget to only bother setting up a nice icon for the SE handle, if they're automatically generated. It's still actually creating the handles as a small, invisible box in each corner which can be dragged, just without any icon (the jQuery UI iconset actually doesn't have any other similar handles).
Refer to the API doc for how to attach them to your own DOM objects, which you can easily customise the appearance of. Quick example:
$('#targetToMakeResizable').resizable({handles : { ne : ".jquerySelectorForNEHandle", sw: ".jquerySelectorForSWHandle" }, aspectRatio : true});
Alternatively, you can just override the base css for .ui-resizable-handle.ui-resizable-{direction} with your own settings.
Here's a jsfiddle to demonstrate both methods. Note that rotating the icon in the way I've done it is probably not going to work in every browser.