I try to used #shoutem/ui! In my project, I define 1 Component with header is NavigationBar of #shoutem/ui, in NavigationBar I try define rightComponent is an DropDownMenu, but when long content, navigation bar will made 2 line and I don't want that way! I'm still want it pingleline!
That's what I'm facing:
Please Help.
It seems that this PR https://github.com/shoutem/ui/pull/216/files solves it, so please check if you are using the latest version of #shoutem/ui.
Related
I'm aware there is a similar question that was asked on here, but this is more specific to vue-echarts. On vue-echarts github page, they state that since version 4.1.0 Vue-Echarts supports ZRender events via zr: prefixed events. I can't really find documentation on how to implement this in vue and am not sure how to go about this. I want to register clicks when a user clicks not only on the bar, but also when they click in the space around the bar.
The following code below only registers clicks when a user clicks directly on the bar.
<v-chart :options="chartOptionsBar"
theme="infographic"
#click="selectBar"
:autoresize="true"
ref="chart">
</v-chart>
The linked post give the following solution for plain js, but i'm not sure how to transform this into something that vue understands. getZr() seemingly does not work with vue.
myChart.getZr().on('click', params => {
var pointInPixel = [params.offsetX, params.offsetY];
var pointInGrid = myChart.convertFromPixel('grid', pointInPixel);
var category = myChart.getModel().get('xAxis')[0].data[pointInGrid[0]]
console.log(category);
});
I tried npm installing zrender but also get the when trying to initialize a zrender object :
./node_modules/zrender/lib/vml/graphic.js
Module not found: Error: Can't resolve '../graphic/text/parse' in '/node_modules/zrender/lib/vml'
This was a bug, but supposedly was fixed, so I'm not sure if this affects the solution as well. Any help would be appreciated! I currently using vue-echarts v5.0.0, zrender v5.0.3.
Figured out the answer of my question by digging into vue-echarts code
Looking at the following commit, to use zrender events with vue-echarts format it the following way:
<v-chart :options="chartOptionsBar"
theme="infographic"
#click="selectBar"
#zr:click="outsideBarClick"
:autoresize="true"
ref="chart">
</v-chart>
and in the methods :
outsideBarClick: function(params) {
console.log(params)
}
Change the import line in ./node_modules/zrender/lib/vml/graphic.js
from:
import * as textContain from '../graphic/text/parse';
to:
import * as textContain from '../graphic/Text';
<f7-toolbar tabbar>
<f7-link icon-f7="compass_fill" tab-link="#tab-1"></f7-link>
<f7-link icon-f7="drawers_fill" tab-link="#tab-2" tab-link-active></f7-link>
<f7-link icon-f7="pie_fill" tab-link="#tab-3"></f7-link>
</f7-toolbar>
<f7-tabs>
<f7-tab id="tab-1">
<f7-view url="/tab1/"></f7-view>
</f7-tab>
<f7-tab id="tab-2" tab-active>
<f7-view url="/tab2/"></f7-view>
</f7-tab>
<f7-tab id="tab-3">
<f7-view url="/tab3/"></f7-view>
</f7-tab>
</f7-tabs>
I really dont know why, but my Views are not Displayed? Does anyone know why they are not displayed?
let me give you an unprofessional advice but it works. goto to http://framework7.io/docs/tabs.html
and you will just copy and paste the tabs template then edit.
From what i can see yours are not working because i cant seem to see the class .f7-toolbar but its simply using the class .toolbar.
From the look of your current code every class with a prefix .f7- is not gonna work unless if you are using a version which is not v2
I need to update Listview when in textinput typed > 2 symbols. I get data from API, and every new symbol after 2 chars must update suggested variants (new datasource). Can't find my mistake. Will be very grateful for solution :)
Source code:
https://rnplay.org/apps/msxitg
The mistake is on row 54:
API_RESPONSE_ARRAY = responseJSON.result.items.name;
responseJSON.result.items is list of objects that have name key. You have to change this to following and it will work:
API_RESPONSE_ARRAY = responseJSON.result.items.map((item) => item.name);
Forked version that works can be found from here https://rnplay.org/apps/WDXSHw
ps. maybe you know it but as it is you don't need the componentWillReceiveProps function and it's not called at all currently.
Hai i am struggling with keyboard problem in android, when i want to type any thing in text input it show some suggestions in keyboard, I don't want those suggestions, Can any one help me that how to avoid those suggestions.
Any help much appreciated, the above image from nexus 6.
Here is my TextInput code
<TextInput
style={styles.TextInput}
value={this.state.currentWord}
onChangeText={(text) => this.setState({currentWord:text.trim()})}
placeholder="Type Your word here"
autoCapitalize='characters'
autoCorrect={this.state.autoCorrect}
autoFocus={this.state.autoFocus}/>
In state i declare autoCorrect to be false
When using autoComplete="false", React native sets the underlying native android input type to TYPE_TEXT_FLAG_NO_SUGGESTIONS and clears out TYPE_TEXT_FLAG_AUTO_CORRECT, effectively telling the system not to offer any suggestions (see source code). This is the recommended way of disabling text suggestions per the Android reference guides.
The problem is it appears that some (or many?) HTC devices do not honor this setting. From my research, it appears some Samsung devices might not support this either. It is reasonable to assume that other manufactures will not honor this setting - which flat out just sucks. This is one of the big problems with Android - somehow they didn't learn from Microsoft - that sleazy manufacturers will destroy the reliability of your products and it takes years (a decade, roughly) to even begin to undo the damage </rant>. (note: I'm an Android fan).
According to Daniels answer it appears someone had success setting the text type to use TYPE_TEXT_VARIATION_FILTER - which tells the device that your input is being used to filter a list of items. Lets try to modify the existing text input and see if it works - then you can build our own if you want:
You need to find the file ReactTextInputManager.java. From the React Native folder, it will be located at this path:
[react-native]/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java
Around line 378 you will find a method called setAutoCorrect - update it to the following:
public void setAutoCorrect(ReactEditText view, #Nullable Boolean autoCorrect) {
// clear auto correct flags, set SUGGESTIONS or NO_SUGGESTIONS depending on value
updateStagedInputTypeFlag(
view,
InputType.TYPE_TEXT_FLAG_AUTO_CORRECT | InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER,
autoCorrect != null ?
(autoCorrect.booleanValue() ?
InputType.TYPE_TEXT_FLAG_AUTO_CORRECT : (InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER))
: 0);
}
Build your app and test. If it doesn't work, try removing both instances of InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | (including the pipe) from the above code and try again. If that doesn't work, I think you're out of luck.
If it does work, then you can either a) instruct everyone on your team how to modify the react native component before building (hacky and unreliable), or b) build your own text input component. You should be able to copy and paste the existing TextInput code and shouldn't have to write much native code at all - mostly just renaming things. Good luck.
Update: going further down the rabbit hole, you can also try the setting TYPE_TEXT_VARIATION_VISIBLE_PASSWORD. So here is the kitchen sink - I'm assuming you can read the code well enough to play around with different combinations of input types:
public void setAutoCorrect(ReactEditText view, #Nullable Boolean autoCorrect) {
// clear auto correct flags, set SUGGESTIONS or NO_SUGGESTIONS depending on value
updateStagedInputTypeFlag(
view,
InputType.TYPE_TEXT_FLAG_AUTO_CORRECT | InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER | InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD,
autoCorrect != null ?
(autoCorrect.booleanValue() ?
InputType.TYPE_TEXT_FLAG_AUTO_CORRECT : (InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER | InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD))
: 0);
}
It helps to understand that the method signature for updateStagedInputTypeFlag is the following:
updateStagedInputTypeFlag([view], [flagsToUnset], [flagsToSet]);
Update 2: There are lot's of "input type" flags you can use, see a full list here. Feel free to try others - you might stumble upon one that works. You should be able to modify the code from my first update above.
if anyone has this problem, setting autoCorrect=false and keyboardType="visible-password" hides the suggestions in android
You can set the TextInput to Set autoCorrect to false.
You would have to write your own Android TextView wrapper, that sets the correct input type. See this stack overflow post for more information on the android part.
My solution was using keyboardType={'visible-password'} when the password is visible
<TextInput
onChangeText={onChangeText}
label={label}
autoCapitalize='none'
value={password}
secureTextEntry={isPasswordVisibile}
keyboardType={this.state.isPasswordVisibile ? undefined : 'visible-password'}
/>
Our fix/hack was to simply change the input`s type from text to email and back to text.
I am currently updating the bootstrap source less files for a project and I have to modify the hover state for the buttons. The end goal is something along these lines:
.btn-primary {
.buttonBackground(#btnPrimaryBackgroundHighlight, #btnPrimaryBackground);
&.hover {
.buttonBackground( lighten(#btnPrimaryBackgroundHighlight, %20), lighten(#btnPrimaryBackground, %20));
}
}
However, that returns a compile error. Any thoughts on this issue? I'm sure it's something simple, but I'm at a loss. Thanks in advance.
P.S. - I will also be using the :hover pseudo-class, but for sake of example I'm using a simple class.
Put the percent sign after the number (20% instead of %20)