Please help!
I cannot click the first item in the radlistview on IOS (onItemSelected is not triggered), however it is working fine on android.
My code:
<GridLayout class="p-x-10">
<RadListView
class="users"
loadOnDemandMode="Auto"
pullToRefresh="true"
selectionBehavior="Press"
[items]="userPaginator.docs"
(itemSelected)="onItemSelected($event)"
(loadMoreDataRequested)="onLoadMoreItemsRequested($event)"
(pullToRefreshInitiated)="onPullToRefreshInitiated($event)"
>
<ng-template tkListItemTemplate let-item="item">
<StackLayout orientation="vertical" class="users__card">
<Label class="users__card-name" [text]="item.name"></Label>
<Label class="users__card-username" [text]="item.username"></Label>
<Label class="users__card-userId" [text]="item.userId"></Label>
<Label class="users__card-email" [text]="item.email"></Label>
<Label class="users__card-phone" [text]="item.phone"></Label>
</StackLayout>
</ng-template>
</RadListView>
<ActivityIndicator
rowSpan="1"
[busy]="isPageLoading"
[visibility]="isPageLoading ? 'visible' : 'collapse'"
horizontalAlignment="center"></ActivityIndicator>
</GridLayout>
Instead of OnItemSelected you can use tap event of StackLayout
<StackLayout orientation="vertical" class="users__card" (tap)="onItemSelected($event)">
Related
I'm very new to nativescript, and I'm lost with the container layout. How can I set a webview in fullscreen with 2 floating bottoms, over the webview, fixed at the bottom of the app ?
!https://imgur.com/a/TMi3IQz
I tried at this time 2 solutions :
Can you help me please ?
https://play.nativescript.org/?template=play-js&id=QIXiNZ
With this, the second element is at 60px height, and in CSS, I tried to translate it to top (-60px)... But it disappears behind webview.
<GridLayout rows="*,60">
<WebView left="0" top="0" width="100%" height="100%" loaded="onWebViewLoaded"
id="webViewID" width="100%" src="https://www.stackoverflow.com" />
<AbsoluteLayout class="mywidget" row="1" orientation="horizontal">
<Button class="btn-promo" text="Promos" left="0" bottom="0" height="55" />
<Button class="btn-espacepro" text="Espace pro" right="10" bottom="0"
height="55" />
</AbsoluteLayout>
</GridLayout>
https://play.nativescript.org/?template=play-js&id=aPtpmB
I tried to tweak it with html, position relative for the parent, position obsolute with bottom:0px to the Stacklayout with absolut-it class.
<GridLayout class="relative-it" rows="*">
<ScrollView row="0">
<WebView left="0" top="0" width="100%" height="100%" loaded="onWebViewLoaded"
id="webViewID" width="100%" src="https://www.stackoverflow.com" />
</ScrollView>
<StackLayout class="absolute-it" row="1">
<Button class="btn-promo" text="Promos" left="0" bottom="0" height="55" />
<Button class="btn-espacepro" text="Espace pro" right="10" bottom="0"
height="55" />
</StackLayout>
</GridLayout>
Try this,
<GridLayout rows="*,auto" columns="*,*">
<WebView src="https://www.nativescript.org" colSpan="2" />
<Button row="1" col="0" text="Button 1" class="btn btn-primary" />
<Button row="1" col="1" text="Button 2" class="btn btn-primary" />
</GridLayout>
Updated Playground
I built a data grid using
Kendo Angular Grid in which i have given size to each columns and also has command button "Edit, Update, Cancel" as very last columns.
Due to size of columns, grid gets horizontal scroll bars.
Editing is allowed only in last two field columns.
When ever i click on "Edit" button the row scrolls to very left and my editable columns + command buttons ("update"&"cancel") hided this is something weird or not liking to user. Again user has to scroll to right and do the update/cancel operation.
Does any one has solution to this issue.
<kendo-grid [kendoGridBinding]="view" [height]="700" [pageSize]="25" [pageable]="true" [sortable]="true" [selectable]="true"
(dataStateChange)="onStateChange($event)" (edit)="editHandler($event)" (cancel)="cancelHandler($event)"
(save)="saveHandler($event)">
<!-- <kendo-grid-messages
noRecords="{{ this.noRecordMsg }}">
</kendo-grid-messages> -->
<kendo-grid-column title="View" width="60">
<ng-template kendoGridCellTemplate let-dataItem="dataItem">
<button kendoButton [icon]="'hyperlink-open'" [look]="'outline'" [routerLink]="['/detail', dataItem.ID]"></button>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="FILE_NAME" title="File Name" width="140"></kendo-grid-column>
<kendo-grid-column field="FILE_DATE" title="File Date" width="90">
<ng-template kendoGridCellTemplate let-dataItem>
{{ dataItem.FILE_DATE | date:"shortDate" }}
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="AMT" title="AMT" width="80"></kendo-grid-column>
<kendo-grid-column field="NAME" title="Name" width="90"></kendo-grid-column>
<kendo-grid-column field="ID" title="ID" width="80"></kendo-grid-column>
<kendo-grid-column field="PI" title="PI" width="110">
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<kendo-dropdownlist [data]="PIListItems" [value]="dataItem.PI" [(ngModel)]="dataItem.PI" name="PI"></kendo-dropdownlist>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="STATUS" title="Status" width="100">
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<kendo-dropdownlist [data]="statusListItems" [value]="dataItem.STATUS" [(ngModel)]="dataItem.STATUS" name="STATUS"></kendo-dropdownlist>
</ng-template>
</kendo-grid-column>
<kendo-grid-command-column title="command" width="180">
<ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem="dataItem">
<button kendoGridEditCommand class="k-primary">Edit</button>
<button kendoGridSaveCommand [disabled]="myForm.invalid">{{ isNew ? 'Add' : 'Update' }}</button>
<button kendoGridCancelCommand>{{ isNew ? 'Discard changes' : 'Cancel' }}</button>
</ng-template>
</kendo-grid-command-column>
<ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
<kendo-pager-prev-buttons></kendo-pager-prev-buttons>
<kendo-pager-numeric-buttons [buttonCount]="5"></kendo-pager-numeric-buttons>
<kendo-pager-info></kendo-pager-info>
<kendo-pager-next-buttons></kendo-pager-next-buttons>
<kendo-pager-page-sizes [pageSizes]="[25, 50, 100, 200]"></kendo-pager-page-sizes>
</ng-template>
</kendo-grid>
I don't see how exactly your edit handler looks like but Grid have (edit) emitter according to the documentation.
https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/
I believe if you add this in template:
<kendo-grid (edit)="onGridEdit($event)">...</kendo-grid>
And then in the component try add the following:
onGridEdit($event: any): void {
$event.preventDefault();
$event.stopPropagation();
}
It will help.
I need to create the following layout:
Initial:
After resizing:
So, Group 1 and Group 2 don't wrap.
But what I get is this:
Here is my code:
<div class="d-flex flex-md-row flex-column">
<div class="mr-auto p-2">
<input type="button" value="Group 1"/>
<input type="button" value="Group 1"/>
</div>
<div class="p-2">
<input type="button" value="Group 2"/>
<input type="button" value="Group 2"/>
</div>
</div>
Codeply
Thanks for the help.
Update.
If I add flex-column to the top div I kinda get what I need but then when I resize Group 2 goes into the new row way too early. There is still plenty of space between Groups there is no need for two rows.
Add flex-wrap to
<div class="d-flex flex-md-row">
so it becomes
<div class="d-flex flex-md-row flex-wrap">
Fiddle demo
I have this HTML code
<div id="nodate" style="display:none">
<span id="A">
<input type="submit" value="Close" onclick="toggle();" a href=”#”>Text</input>
</span>
There are no dates here. Select another.
</div>
<input type="submit" value="Fri Nov 8th, 2013" onclick="toggle();"></input>
I have an input for the close function which shows a button. But I want to assign this onclick action to an image or text instead of an input button. I have tried many ways but cant seem to get it.
For an image:
<input type="image" src="Image.jpg" onclick="toggle();" />
You could also use:
<button onclick="toggle();"><img src="Image.jpg" /></button>
Note, if you don't want the form to submit when you click on the button, you'd want to have:
<button type="button" onclick="toggle();"><img src="Image.jpg" /></button>
For text, you could just use a hyperlink:
Text
Or:
Text
Using Jquery you can do that
$("#imgclick").click(function (e) {
toggle();
//even better //$("#idtarget").toggle();
});
<img src="..." id="imgclick">
I need to lay out 4 buttons in 2x2 grid. All buttons must have the same size and change it when window changes it's size.
I use the following FXML now but buttons don't change their size.
<GridPane xmlns:fx="http://javafx.com/fxml">
<Button fx:id="btnLogin" text="Login" GridPane.rowIndex="0" GridPane.columnIndex="0"/>
<Button fx:id="btnLibrary" text="Library" GridPane.rowIndex="0" GridPane.columnIndex="1"/>
<Button fx:id="btnRegister" text="Register" GridPane.rowIndex="1" GridPane.columnIndex="0"/>
<Button fx:id="btnHelp" text="Help" GridPane.rowIndex="1" GridPane.columnIndex="1"/>
</GridPane>
That's how I managed to do it.
<GridPane xmlns:fx="http://javafx.com/fxml">
<columnConstraints>
<ColumnConstraints percentWidth="50"/>
<ColumnConstraints percentWidth="50"/>
</columnConstraints>
<rowConstraints>
<RowConstraints percentHeight="50"/>
<RowConstraints percentHeight="50"/>
</rowConstraints>
<Button fx:id="btnLogin" text="Login" GridPane.rowIndex="0" GridPane.columnIndex="0" maxWidth="10000" maxHeight="10000"/>
<Button fx:id="btnLibrary" text="Library" GridPane.rowIndex="0" GridPane.columnIndex="1" maxWidth="10000" maxHeight="10000"/>
<Button fx:id="btnRegister" text="Register" GridPane.rowIndex="1" GridPane.columnIndex="0" maxWidth="10000" maxHeight="10000"/>
<Button fx:id="btnHelp" text="Help" GridPane.rowIndex="1" GridPane.columnIndex="1" maxWidth="10000" maxHeight="10000"/>
</GridPane>
I had the same problem with a ComboBox and solved it this way:
<ComboBox hgrow="ALWAYS" maxWidth="Infinity" />