I have an angular 5 application with the library Kendo UI.
In this application I have a Kendo UI Grid and I want to customize it with some borders.
This is my grid:
I have blue border-left when the row are on hover or when they are expanded.
But in want to have a little space between the two blue lines of two different row when the two are expanded.
So, in fact, I want to put the grey border on the bottom over the blue border on left or add a little white space a the bottom or top of the blue border.
This is the code of my grid :
<kendo-grid
id="myGrid"
#grid
[kendoGridBinding]="listOfSolution"
[resizable]="false"
[pageSize]="10"
[pageable]="true"
[sortable]="true"
[sort]="sortByNbTransit"
[filterable]="false"
[groupable]="false"
[reorderable]="false"
[selectable]="false"
[scrollable]="'none'"
[rowClass]="rowCallback()"
(detailCollapse)="onCollapse($event)"
(detailExpand)="onExpand($event)"
(sortChange)="onSort($event)"
style="border: none;">
<kendo-grid-column [width]="90" field="serviceName" title="SERVICE" [style]="{'min-width':'90px','margin-left':'18px !important'}" [sortable]="false">
<ng-template kendoGridCellTemplate let-dataItem>
<span>{{ dataItem.routingDetails[0].service.name}}</span>
</ng-template>
</kendo-grid-column>
<kendo-grid-column width="110px" field="vesselName" title="VESSEL" [style]="{'min-width':'110px'}" [sortable]="false"></kendo-grid-column>
<ng-template [kendoGridDetailTemplateShowIf]="displayOrHideDetails" kendoGridDetailTemplate let-dataItem class="expandDetails">
<div style="width: 100%; display: table;margin-top:15px;margin-bottom: 10px;">
<div *ngFor="let data of dataItem.routingDetails" style="display: table-row">
<div class="detailsCell" style="min-width: 90px">
<span class="detailText">{{ data.service.name }}</span>
</div>
<div class="detailsCell" style="min-width: 110px;">
<span class="detailText">{{ data.vessel.name }}</span>
</div>
</div>
</div>
</ng-template>
</kendo-grid>
Do you know how I could do that ?
Related
I'm using Vuetify and i've created a row with three columns, but for the love of me i can't properly align the icons above the input fields, like the screenshot below the code.
The icons behave like block elements and are placed next to the input fields, rather then above.
Here's an image of what i've achieved so far:
Can someone help me out, or atleast point me in the right direction? Thanks in advance!
<v-row>
<v-col cols="4">
<v-icon>arrow_drop_up</v-icon>
<input type="text" />
<v-icon>arrow_drop_down</v-icon>
<span>:</span>
<v-icon>arrow_drop_up</v-icon>
<input type="text" />
<v-icon>arrow_drop_down</v-icon>
</v-col>
<v-row>
You can align this using flex classes.
<v-col cols="4">
<div class="d-flex flex-row align-center">
<div class="d-flex flex-column align-center">
<v-icon>arrow_drop_up</v-icon>
<input type="text" />
<v-icon>arrow_drop_down</v-icon>
</div>
<span class="mx-2">:</span>
<div class="d-flex flex-column align-center">
<v-icon>arrow_drop_up</v-icon>
<input type="text" />
<v-icon>arrow_drop_down</v-icon>
</div>
</div>
</v-col>
I have added below css to size input boxes.
input{
width: 20px;
height:20px;
border: solid thin blue
}
Can't you just place those elements like
v-icon {
position: absolute;
top: 0; //or bottom, left, right ro align
}
?
Basically I have this mat-card:
<mat-card>
<mat-card-content>
<div *ngFor="let siteSource of siteSources | paginate: { itemsPerPage: 5, currentPage: page};">
<site-details [site]='siteSource'></site-details>
</div>
</mat-card-content>
</mat-card>
And for each element I have this HTML:
<div *ngIf="site" class="col-xs site-details">
<div>
<tr>
<td class="col-sm-6"><label>http://www.{{site._source.url}}.com.br</label></td>
<td class="col-sm-2">
<a routerLink="editSite/{{site._id}}" style="text-decoration: none; color: white"
routerLinkActive="active">
<button mat-raised-button color="primary">
Editar
</button>
</a>
</td>
<td class="col-sm-2"><button mat-raised-button color="warn"
(click)="openConfirmationDialog('excluir',site._source.url)">Excluir
</button></td>
<td class="col-sm-2"> <a target="_blank" href="http://www.{{site._source.url}}.com.br" title="Ir ao site"><button
mat-raised-button>Ir ao site</button></a>
</td>
</tr>
</div>
<hr>
</div>
<router-outlet></router-outlet>
The problem is that when I change to the mobile vision my buttons get out of the mat-card:
Is there a way to keep the content inside the mat-card equally responsive?
There are a few things going on
you're using table (tr, td) which is not responsive, for responsiveness, you'd have to use divs
the classes you use are bootstrap classes, which will work with <div> if you include the Bootstrap CSS (which i did in index.html)
the col-sm-6 or col-sm-2 combinations (from Bootstrap) wouldn't work with Angular-material card because the card has a maximum width of 400px... whilst, the col-sm grid classes are applied when the the width is between 576px - 768px
so we apply the col-[99] classes, since width is less than 576px
we can override the padding & default min-width for very small screens (card-fancy-example.css) but such designing will be unlike standard angular-material design
check the demo here - note: I removed the router-outlet just to avoid setting up routing for the sample;
I'm having a button and angular js material date picker in a row. Date picker is not aligned correctly. I tried adding a margin too. Without using an additional CSS file ,(adding in line css) please help me to align these components.
<div>
<md-button class="md-raised md-button job-export-jobs md-ink-ripple">Export Jobs Date</md-button>
<md-input-container>
<label for="jobDate">Export date</label>
<md-datepicker
ng-model="model.exportJobsDate">
</md-datepicker>
</md-input-container>
You can use layout="row" and then flex by giving the distribution,
<div class='calendarDiv' layout="row">
<div flex=40>
<md-icon style="position:absolute;margin-top:15px; left:20px" md-svg-src="calendar.svg"></md-icon>
<md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
</div>
<div flex=60>
<md-button class="md-raised md-button job-export-jobs md-ink-ripple">Export Jobs Date</md-button>
</div>
</div>
DEMO
I know similar questions have been asked earlier, but I have tried them and they aren't working. I have a dialog box, with some text and a button, which I need to position in the center of the box. My HTML is given below:
<div id='step3' class='item'>
<div class='row span9'>
<div class="text center"><button id='loginButton' class='btn btn-success' onClick='window.location.reload()'>Login again</button></div>
<small>using your new credentials.</small>
</div>
</div>
I tried placing the button inside a div and used <div style="text-align:center"> but it didn't work. Does anyone know how I could place the button in the center, preferably without adding an external CSS class?
Your class="text center" should be class="text-center", and you also don't need the row tag (it breaks the responsiveness).
<div id="step3" class="item">
<div class="span12">
<div class="text-center">
<button id="loginButton" class="btn btn-success" onClick="window.location.reload()">Login again</button>
<br> <small>using your new credentials.</small>
</div>
</div>
Also you have single quotes '' on most of your markup. Keep in mind this is with an old version of Bootstrap so depending on how wide the viewport is it might not be perfectly center.
Is it possible to have multiple modals attached to seperate buttons on the same page? I am having problems that when I click one of the buttons both modals are popping up. These modal have forms in them, that is why I have them set to not closable.
MAIN HTML CODE:
<table class="ui violet compact celled table">
.
.
.
<tfoot class="full-width">
<tr>
<th colspan="5">
<div class="ui right floated small primary labeled icon billboard button">
<i class="plus icon"></i> Add Slide
</div>
<div class="ui right floated small primary labeled icon button">
<i class="minus icon"></i> Delete Slide(s)
</div>
</th>
</tr>
</tfoot>
</table>
<table class="ui violet compact celled table">
.
.
.
<tfoot class="full-width">
<tr>
<th colspan="4">
<div class="ui right floated small primary labeled icon campaign button">
<i class="plus icon"></i> Add Slide
</div>
<div class="ui right floated small primary labeled icon button">
<i class="minus icon"></i> Delete Slide(s)
</div>
</th>
</tr>
</tfoot>
</table>
MODAL HTML:
<div class="ui standard billboard modal" style="margin-top: -197.5px; display: block !important;">
.
.
.
</div>
<div class="ui standard campaign modal" style="margin-top: -197.5px; display: block !important;">
.
.
.
</div>
MODAL JS:
$('.billboard.modal')
.modal({
closable : false
})
.modal('attach events', '.billboard.button', 'show')
;
$('.campaign.modal')
.modal({
closable : false
})
.modal('attach events', '.campaign.button', 'show')
;
I believe I found an answer. In the class for the modal I just added 'transition hidden' and that seems to solve the problem.