I'm trying to style the Raddataform type="multilinetext". This works perfectly fine for Android by setting the height. However, the height is not affecting the style in iOS.
How can I create a multi-line field in RadDataForm for iOS with a specified height?
The same issue holds for type="text" by the way.
<TKEntityProperty tkDataFormProperty name="myname">
<TKPropertyEditor tkEntityPropertyEditor type="MultilineText"></TKPropertyEditor>
</TKEntityProperty>
RadDataForm DataFormEditorCore {
height: 50;
}
RadDataForm PropertyEditor[type='MultilineText'] DataFormEditorCore {
height: 80;
}
Both styles don't affect iOS.
Related
Well going through {N} tutorial I want to achieve this :
But I have trouble showing this delete button.
There is no problem with the image it shows well somewhere else and I also tried putting a Label instead but same result.
Rad Listview component :
<RadListView row="1" [items]="groceryList"
swipeActions="true" (itemSwipeProgressStarted)="onSwipeCellStarted($event)">
<ng-template let-item="item">
<Label [text]="item.name" class="p-15"></Label>
</ng-template>
<GridLayout *tkListItemSwipeTemplate columns="*, auto">
<StackLayout id="delete-view" col="1" (tap)="delete($event)" class="delete-view">
<Image src="~/images/delete.png" ></Image>
</StackLayout>
</GridLayout>
</RadListView>
CSS :
.delete-view {
background-color: #CB1D00;
padding: 20;
}
.delete-view Image {
color: white;
height: 25;
}
TS
onSwipeCellStarted(args: ListViewEventData) {
var swipeLimits = args.data.swipeLimits;
var swipeView = args.object;
var rightItem = swipeView.getViewById<View>("delete-view");
swipeLimits.right = rightItem.getMeasuredWidth();
swipeLimits.left = 0;
swipeLimits.threshold = rightItem.getMeasuredWidth() / 2;
}
delete(args: ListViewEventData) {
let grocery = <Grocery>args.object.bindingContext;
this.groceryService.delete(grocery.id)
.subscribe(() => {
let index = this.groceryList.indexOf(grocery);
this.groceryList.splice(index, 1);
});
}
Deletion feature works well but all what i am getting when swiping is this :
What am I getting wrong here ?
I spent several days earlier this month wrestling with similar issues with RadListView, especially on iOS. It seems to defy logic. I ended up using a negative padding to get to where I could see my labels and icons. If that doesn't help, try removing height: from your css.
I'm using react-bootstrap button and fortawesome/react-fontawesome for the icon. I'm setting the button height and width using this code
#button-size{
height: 1vh;
width: 1vw;
}
then I'm inserting the icon inside the button using this code
<Button id="button-size">
<FontAwesomeIcon icon={faFacebookF} />
</Button>
but my problem is the icon goes outside of the button. How can I center the icon inside the button
Using viewport measurements for height and width on the Button to control its size won't work well in this setup especially when you are using font icons (also, apparently, in the library you are using they generate the output as svg). I suggest you control the size of the button through padding or pixel measurements.
Example:
#button-size {
padding: 6px 20px;
}
In addition, If you need to adjust the size of the font icon you can do that using the size prop or you can use CSS font-size
<Button id="button-size">
<FontAwesomeIcon icon={faFacebookF} size={"5x"}/>
</Button>
CodeSandBox: https://codesandbox.io/s/angry-drake-5pexo?file=/src/App.js
If you absolutely must use the viewport measurements on your project, which I highly discourage, you can opt to assign position-relative to the button and style the font-icon component as necessary to center.
Example:
export default function App() {
const customFontIconStyle = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)"
};
return (
<Container>
<Button id="button-size" className="position-relative">
<FontAwesomeIcon icon={faFacebookF} style={customFontIconStyle} />
</Button>
</Container>
);
}
I'm trying to apply a transparent Linear Gradient on an image.
I'm using Angular 7.2.0, tns-core-modules 5.3.1
Html:
<Image src="https://mdn.mozillademos.org/files/15525/critters.png" class="imgGrad"></Image>
Css:
.imgGrad{
height:80;
width:150;
background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1));
}
This code works fine with IOS but not with Android.
It's actually expected, iOS supports multiple layers so there will be one separate layer to hold the background gradient above the image. With Android, it's just the background, the background won't be visible when you have the image on top of it.
The solution is to use a separate view above image for gradient.
HTML
<GridLayout class="container">
<Image src="https://mdn.mozillademos.org/files/15525/critters.png"></Image>
<StackLayout class="gradient"></StackLayout>
</GridLayout>
CSS
.container {
height:80;
width:150;
}
.gradient {
background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1));
}
I'm using the NativeScript StackLayout component to layout my elements.
What is the best approach to create a gap between the child elements of a StackLayout?
You can use margin in the css for that layout.
In you XML:
<StackLayout>
<Label text="Hey there,"></Label>
<Label text="world!"></Label>
</StackLayout>
In your css:
StackLayout Label {
margin: 10;
}
I am trying to create a border-radius and border-color around a StackLayout but for some reason the styles doesn't get applied... I am using the Nativescript core-light theme, not sure if that can override my inline styles? Any idea what i'm doing wrong?
my code:
<StackLayout borderRadius="5px" borderColor="blue">
<Label class="body" [text]="'Description: ' + product.Description"></Label>
<Label class="body" [text]="'POS Description: ' + product.POSDescription"></Label>
<Label class="body" [text]="'POS price: R' + product.POSPrice"></Label>
<Label class="body" [text]="'Stock On Hand: ' + product.StockOnHand"></Label>
</StackLayout>
You need to set explicitly borderWidth and your code will work.
e.g.
<StackLayout borderRadius borderWidth="2" borderRadius="15" borderColor="blue">
Notice that I am using DPs (device independent pixels) instead of px which in the mobile world with different screen densities and resolutions should be the better approach.
You can also use CSS for your borders
e.g.
.borders {
border-width: 2;
border-color: red;
border-radius: 20;
}