I used http://fabricjs.com/ library am having this problem I need to fix In Internet Explorer the text I add take place beside the selected area but in Chrome and Firefox wit work probably.
IE snapshot.
Chrome snapshot.
var text_bottom = new fabric.Text(text_bottom, {
originX: 'center',
left:270,
top: 490,
fontFamily:'AsmaaFont',
fill:"#C0C0C0",
fontSize: 50,
textAlign: 'center'
});
What should I do?
Please remove:
textAlign: 'center'
So your code will be:
var text_bottom = new fabric.Text(text_bottom, {
originX: 'center',
left:270,
top: 490,
fontFamily:'AsmaaFont',
fill:"#C0C0C0",
fontSize: 50
});
Related
I'm an HTML novice, but here goes...
When zoomed way in, this is what I see at the center of various text line insertions:
You can see this live here: https://becketbroadband.org/fsa-map%2Fstatus
The apparently-responsible code looks like this:
addOverlay(Map, FSA05_Border, '49d834', 0.3, 'FSA-05', { lat: 42.305200, lng: -73.058500}, 'Service Available Now');
Ideas? Thanks!
I see this in the code for addOverlay, at fsa-map/status on your site:
new google.maps.Marker({
position: labelPoint,
map: BecketMap,
icon: {
path: google.maps.SymbolPath.CIRCLE, // anything, required
fillOpacity: 0, // hide the symbol leaving just the label
},
label: {
text: FSAlabel,
color: '#000000', // black
fontSize: '20px',
fontWeight: 'bold',
},
});
What happens if you don't supply an icon property at all?
The guy who wrote the original code came up with the answer. (He didn't have any ideas till I pointed out the icon property details addressed in this thread.)
The "fillOpacity" value addresses the inside of the circle. This new line of code addresses and hides the circle itself:
"strokeOpacity: 0,"
Thank you, AakashM, for getting me on the path to a solution! :) You da man!
I have learned react native and started developing a basic payment app . I am using flex to arrange elements inside the screen. Flex layout is consistent across all devices, but if I apply style to some components inside flux , it is not consistent across devices.
For example I have added a drop down component (Expiry Month) inside a view which is inside flex and added margin top as 25 px . If I open the app in Iphone 8 plus, it is displaying as expected, but if I open it in Iphone 8 it is touching the component above it (Even I tried changing the unit to percentage instead of pixels but still the same behavior) . I am not sure why the style is not responsive across multiple devices , can someone please guide me on how to make the styling responsive.
Please take a look at the below screenshots and code snippet . Thank you !!!
Iphone 8 Plus
Iphone 8
Code Snippet of the element
<View
style={{
flex: 0.1,
flexDirection: "row",
}}
>
<RNPickerSelect
items={CardExpiryMonth.getMonth()}
style={{
...pickerSelectStyles1,
placeholder: { color: "grey", fontSize: 15, fontFamily: myFont },
iconContainer: {
top: 35,
},
}}
placeholder={{
label: "Exp Month",
color: "green",
}}
placeholderTextColor="red"
useNativeAndroidPickerStyle={false}
textInputProps={{ underlineColor: "yellow" }}
Icon={() => {
return <Ionicons name="md-arrow-down" size={24} color="gray" />;
}}
/>
</View>
const pickerSelectStyles1 = StyleSheet.create({
inputIOS: {
fontSize: 16,
height: 50,
paddingVertical: 12,
paddingHorizontal: 10,
borderWidth: 1,
borderColor: "gray",
borderRadius: 4,
color: "black",
paddingRight: 30, // to ensure the text is never behind the icon
width: 130,
top: 25,
left: 8 }
I think the easiest way to do is give margin to your parent view. So the code would be.
<View
style={{
marginTop: 25, // For only iOS (Platform.OS === 'ios') ? 25 : 0,
flex: 0.1,
flexDirection: "row",
}}
>
<RNPickerSelect
// your code
/>
</View>
If you want to do changes in RNPickerSelect's style SO as you can check given example here you are using it wrong you are putting inputIOS into styles that become something like below code.
<RNPickerSelect
style={{ inputIOS: {...your style} }} // this is wrong
/>
inputIOS properties should be direct properties of style.
Also find one more thing that you used top: 25, for giving margin top top property use in case of absolute position. So, Please confirm RNPickerSelect using absolute position otherwise use marginTop: 25, instead.
Let me know If you have any more query.
Using Material UI #next v1.0.0 beta 32:
Tabs labels wrap as expected on smaller devices.
But the wrapping makes them change font-size, which in turn, in some screen width removes the need for the text to wrap.
So I end up with this: tabs with non-wrapped labels and different font sizes.
sandbox example: https://codesandbox.io/s/o7worrr32q
In order to see the described result make the window narrow enough for at least 1 tab label to wrap, but not all.
I' have overriddeen the wrapped styles this way:
<Tab
value={value}
label='my label'
classes={{
root: classes.tab,
rootPrimarySelected: classes.selected,
labelWrapped: classes.labelWrapped
}}
/>
and my style:
labelWrapped: {
fontSize: '0.875rem'
},
The problem as illustrated in this gif animation, is that as you click on other tabs, the text wraps and unwraps alternatively, seemingly without reason.
My guess is that a padding changes somewhere, but I can't figure it out.
It was easier than I thought in the end:
I only had to use the MUI provided css override labelWrapped, as documented in the MUI API:
<Tab
aria-label="aria description"
label="Wrapping Label"
icon={<Icon />}
value={x}
classes={{
root: classes.root,
labelContainer: classes.labelContainer,
rootInheritSelected: classes.rootInheritSelected,
labelWrapped: classes.labelWrapped,
}}
component={Link}
to={{
pathname: '/my/router/url',
search: this.props.location.search,
}}
/>
and my overriding styles:
const styles = theme => ({
root: {
minWidth: 60,
height: '100%',
color: 'rgba(255,255,255,0.5)',
alignItems: 'flex-start',
paddingBottom: 5,
wordWrap: 'break-word',
flex: 1,
overflowWrap: 'break-word',
textAlign: 'center',
},
labelContainer: {
paddingLeft: 0,
paddingRight: 0,
},
rootInheritSelected: {
color: '#FFF',
},
labelWrapped: {
fontSize: '0.875rem',
},
})
I am trying to use FontAwesome icon on FabricJs text object but can't get it to render the icon. It works with regular canvas on the same page.
My code:
const text = new fabric.IText('\uf0c2',{
left: this.centerX, //Take the block's position
top: this.centerY,
fill: 'white',
originX: 'center', originY: 'center',
fontSize:60,
fontFamily:'FontAwesome',
selectable: false
});
The result is a white rectangle (should be a cloud icon).
Is there a way to use FontAwesome icons with fabricJS?
The below is my code ...
var textField = Ti.UI.createTextField({
left: 20,
width: 280,
height: 40,
top: 20,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
keyboardType: Ti.UI.KEYBOARD_NUMBER_PAD,
});
win.add(textField)
var button = Ti.UI.createButton({
title:'Submit',
left: 200,
width: 100,
height: 40,
top: 70
});
win.add(button)
button.addEventListener('click', function(){
textField.blur();
});
When I click on the button, the NUMPAD Keyboard is still there, it doesn't go away, anyone know why?
Need Advice.
Sorry for posting -> problem solved
I copy pasted this code and its working fine.. On button click NUMPAD keyboard is not visible any more..
try cleaning you project and then build it ..
missing this in your textfield "returnKeyType : Ti.UI.RETURNKEY_DONE,"