In this StackBlitz I have a Kendo for Angular grid with cell templates. The background color doesn't cover the entire cell, how to make it cover? Note that if I increase the span font size from 9px to 12px, the background is expanded but I need it to work even with small fonts.
#Component({
selector: 'my-app',
encapsulation: ViewEncapsulation.None,
styles: [`
.k-grid .no-padding {
padding: 0;
}
.whole-cell {
display: block;
width: 100%;
height: 100%;
padding: 8px 12px; /* depends on theme */
}
`],
template: `
<kendo-grid [data]="gridData">
<kendo-grid-column field="ProductName" title="Product Name">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" width="230">
</kendo-grid-column>
<kendo-grid-column field="code" title="Code" width="230" class="no-padding">
<ng-template kendoGridCellTemplate let-dataItem>
<span class="whole-cell"
style="font-size: 9px;"
[style.backgroundColor]="colorCode(dataItem.code)">
{{ dataItem.code }}
</span>
</ng-template>
</kendo-grid-column>
</kendo-grid>
`
})
export class AppComponent {
public gridData: any[] = products;
constructor(private sanitizer: DomSanitizer) {}
public colorCode(code: string): SafeStyle {
let result;
switch (code) {
case 'C1' :
result = '#FFBA80';
break;
case 'C2' :
result = '#B2F699';
break;
default:
result = 'transparent';
break;
}
return this.sanitizer.bypassSecurityTrustStyle(result);
}
}
You can just call the background-color on the cell itself:
#Component({
selector: 'my-app',
encapsulation: ViewEncapsulation.None,
styles: [`
.k-grid .no-padding {
padding: 0;
}
.whole-cell {
display: block;
width: 100%;
height: 100%;
padding: 8px 12px; /* depends on theme */
}
`],
template: `
<kendo-grid [data]="gridData">
<kendo-grid-column field="ProductName" title="Product Name">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" width="230">
</kendo-grid-column>
<kendo-grid-column let-dataItem field="code" title="Code" width="230" class="no-padding" [style.backgroundColor]="colorCode(dataItem.code)">
<ng-template kendoGridCellTemplate>
<span class="whole-cell"
style="font-size: 9px;">
{{ dataItem.code }}
</span>
</ng-template>
</kendo-grid-column>
</kendo-grid>
`
})
export class AppComponent {
...
}
Related
In my app, I have the right slide bar that contains Vue components that represent system notifications. By default, the right bar is hidden (out of the screen) and when the user opens it the bar is blank(meaning no components displayed). In DevTools, I can see that Vue components weren't rendered
However, if I put the same code from right.blade.php to any normal view then every notification will be displayed.
My assumption so far, the Vue cannot render components in hidden HTML. Am I correct?
Here is the screenshot that demonstrates the presents of PHP code and the absence of Vue component, and the code itself:
right bar screenshot
rightbar.blade.php
<div id="rightbar" class="rightbar">
<div class="mt-2">
<ul class="nav nav-tabs2">
<li class="nav-item"><a class="nav-link active show" data-toggle="tab" href="#notifications">Notifications</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#channels">Channels</a></li>
</ul>
<hr>
<div class="tab-content">
<div class="tab-pane show active" id="notifications">
#foreach(auth()->user()->unreadNotifications as $key => $notification)
<p>here</p> //<---------------------------this works
<notification props_id="{{$notification->id}}"
props_route="{{route('item.show',$notification['data']['item']).'#documents'}}"
props_title="New item uploaded"
props_body="User {{$notification['data']['name']}} uploaded {{$notification['data']['item']}}"
props_date="{{$notification->created_at}}">
</notification> //<------------------------- this doesn't works
#endforeach
</div>
<div class="tab-pane" id="channels">
<p>channel 1</p>
<p>channel 2</p>
<p>channel 3</p>
</div>
</div>
</div>
</div>
Notification.vue
<template>
<transition name="slide-fade">
<div class="card" v-show="showNotification" >
<div class="header">
<h2 v-text="title"></h2>
<ul class="header-dropdown dropdown">
<li><i class="fa fa-close"></i></li>
</ul>
</div>
<div style="cursor:pointer" #click="openSubject()">
<div class="card-body">
<p class="card-text" v-text="body"></p>
</div>
<div class="card-footer">
<small class="text-muted" v-text="date"></small>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
props: {
props_id: String,
props_route: String,
props_title: String,
props_body: String,
props_date: String,
},
name: "Notification",
data(){
return{
id: this.props_id,
route: this.props_route,
title: this.props_title,
body: this.props_body,
date: this.props_body,
showNotification: true,
}
},
methods:{
openSubject(){
location.href = this.route;
this.markAsRead()
},
markAsRead(){
axios
.put("/notifications/"+this.id)
.then(response => {
this.deleteNotification()
})
.catch(error => console.log(error))
},
deleteNotification(){
this.showNotification = false;
},
},
mounted() {
console.log('Vue notification')
}
}
</script>
<style>
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
transform: translateX(1000px);
opacity: 0;
}
</style>
app.js
Vue.component('notification', require('./components/Notification.vue').default);
rightbar.scss
.rightbar{
#include box-shadow(0 5px 10px 0px rgba($dark,.3));
#include transition(all .3s ease-in-out);
background: $body-color;
position: fixed;
top: 0;
right: -500px;
width: 500px;
height: 100vh;
overflow-y: scroll;
z-index: 13;
padding: 8px 20px;
&.open{
right: 0;
}
#include max-screen($break-medium) {
width: 450px;
}
#include max-screen($break-small - 1px) {
width: 340px;
}
.chat_detail{
display: block;
position: relative;
.chat-widget{
height: calc(100vh - 200px);
overflow-y: auto;
}
.input-group{
position: fixed;
bottom: 10px;
width: 460px;
#include max-screen($break-medium) {
width: 410px;
}
#include max-screen($break-small - 1px) {
width: 300px;
}
}
}
}
Your DevTools screenshot shows <notification> instead of the component's rendered elements, indicating that the component is not actually registered.
I would check the component registration in your view.
Hey I'm trying to create my own bottom nav in nativescript with vue, but I can't get the buttons to fill up the entire space. Any ideas why it isn't working? I have the buttons in a gridlayout component, and I set both height/width properties to 100% but there's still some space between buttons.
<template>
<GridLayout rows="*" columns="*,*,*" horizontalAlignment="stretch">
<Button
row="0"
col="0"
text="Potty Logger"
:class="{ active: active == 0, '-primary': active != 0 }"
#tap="goTo(0)"/>
<Button
row="0"
col="1"
:class="{ active: active == 1, '-primary': active != 1 }"
:isEnabled="active != 1"
text="Walk Tracker"
#tap="goTo(1)"/>
<Button
row="0"
col="2"
:class="{ active: active == 2, '-primary': active != 2 }"
text="History"
#tap="goTo(2)"
/></GridLayout>
</template>
<style lang="scss" scoped>
label {
vertical-align: center;
text-align: center;
}
button {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: none;
}
</style>
Try setting
button {
border-width: 1;
border-color: your-background-color;
}
I'm restyling my cross-platform app made with NativeScript + Angular and I want to change the border color of a textfield when I'm putting data on it.
I've tried this but it doesn't work
TextField {
margin-bottom: 10;
border-radius: 4;
background: #FFFFFF;
border-width: 0.5;
border-color: #C4C4C4;
box-sizing: border-box;
}
TextField:focus{
border-color: red;
}
This is a part of login.component.html:
<label text="Email"></label>
<TextField
hint="mario.rossi#gmail.com"
keyboardType="email"
autocorrect="false"
autocapitalizationType="none"
[(ngModel)]="user.email"
class="input"></TextField>
<label text="Password"></label>
<TextField
hint="Password"
secure="true"
[(ngModel)]="user.password"
class="input"></TextField>
How can I do?
Here is the Playground
NativeScript doesn't support any pseudo-selector while text field is focused. But you could simply listen to focus and blur events, add / remove a class for changing border color.
Since you are using Angular, a simple directive could solve this problem once in for all TextFields in your app.
HTML
<ScrollView class="page">
<StackLayout class="form">
<TextField appHighlightBorder class="m-10 input input-border"
hint="First Name"></TextField>
<TextField appHighlightBorder class="m-b-10 m-x-10 input input-border"
hint="Last Name"></TextField>
<TextField appHighlightBorder class="m-b-10 m-x-10 input input-border"
hint="Email"></TextField>
</StackLayout>
</ScrollView>
CSS
.form .input-border.focus {
border-color: red;
}
Directive
import { Directive, ElementRef, OnDestroy, Renderer2 } from '#angular/core';
import { TextField } from 'tns-core-modules/ui/text-field';
#Directive({
selector: '[appHighlightBorder]'
})
export class HighlightDirective implements OnDestroy {
private removeFocusEvent: () => void;
private removeBlurEvent: () => void;
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
this.removeFocusEvent = this.renderer.listen(elementRef.nativeElement, TextField.focusEvent, () => {
renderer.addClass(elementRef.nativeElement, 'focus');
});
this.removeBlurEvent = this.renderer.listen(elementRef.nativeElement, TextField.blurEvent, () => {
renderer.removeClass(elementRef.nativeElement, 'focus');
});
}
ngOnDestroy() {
this.removeFocusEvent();
this.removeBlurEvent();
}
}
Playground Sample
Now you can use the focus event from css and change the border color.
if this is your TextField:
<TextField class="input"></TextField>
the css rule will be:
.input:focus{
border-color: blue;
}
Unfortunately, it is not there by default. However, you could implement it by yourself with focus and blur events.
For example:
<some-page>.xml
...
<TextField class="input-field"
text="{{ email }}"
keyboardType="email"
autocapitalizationType="none"
autocorrect="false"
focus="onTextFieldFocus"
blur="onTextFieldBlur" />
...
<some-page>.ts
...
const focusedPseudoClass = "focused";
export function onTextFieldFocus(args: EventData) {
const textField = <TextField>args.object;
textField.addPseudoClass(focusedPseudoClass);
}
export function onTextFieldBlur(args: EventData) {
const textField = <TextField>args.object;
textField.deletePseudoClass(focusedPseudoClass);
}
...
<some-page>.css
...
.input-field {
border-bottom-color: gray;
border-bottom-width: 1;
}
.input-field:focused {
border-bottom-color: red;
}
...
textarea {
margin-bottom: 10;
border-radius: 4;
background: #FFFFFF;
outline:0;
border-width: 0.5;
border-color: #C4C4C4;
box-sizing: border-box;
}
textarea:focus{
border-color: red;
}
<textarea></textarea>
just removed outline from textarea!
Add this to your css file. Hope it works.
TextField:focus {
outline: none !important;
border-color: red;
}
The validation is currently happening correctly.The only issue is that I would like to show the error message in the tooltip only and not through a span next to the input element. How do I hide the default display?
My CSS:
<style scoped>
.k-textbox {
width: 11.8em;
}
.demo-section {
width: 700px;
}
#tickets {
width: 710px;
height: 323px;
margin: 0 auto;
padding: 10px 20px 20px 170px;
background: url('../content/web/validator/ticketsOnline.png') transparent no-repeat 0 0;
}
#tickets h3 {
font-weight: normal;
font-size: 1.4em;
border-bottom: 1px solid #ccc;
}
#tickets ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#tickets li {
margin: 7px 0 0 0;
}
label {
display: inline-block;
width: 90px;
text-align: right;
}
.required {
font-weight: bold;
}
.accept, .status {
padding-left: 90px;
}
.valid {
color: green;
}
.invalid {
color: red;
}
span.k-tooltip {
margin-left: 6px;
}
</style>
My HTML:
<div id="example">
<div class="demo-section k-header">
<form id="tickets">
<h3>Book Tickets</h3>
<ul>
<li>
<label for="fullname" class="required">Your Name</label>
<div style="display:inline-block">
<input type="text" id="fullname_1" name="fullname" class="k-textbox" placeholder="Full name" required style="width: 200px;" />
</div>
</li>
<li>
<label for="fullname" class="required">Your Name</label>
<div style="display:inline-block">
<input type="text" id="fullname_2" name="fullname" class="k-textbox" placeholder="Full name" required style="width: 200px;" />
</div>
</li>
<li class="accept">
<button class="k-button" type="submit">Submit</button>
</li>
<li class="status">
</li>
</ul>
</form>
</div>
My JavaScript:
<script>
$(document).ready(function () {
var status = $(".status");
var validator = $("#tickets").kendoValidator({
rules: {
customRule1: function (input) {
if (input.is("[name=fullname]")) {
return input.val() === "peter" || input.val() === "john";
}
return true;
}
},
messages: {
required: "Field is required",
customRule1: "User name must be either Peter or John"
}
});
var tooltip = $("#tickets").kendoTooltip({
filter: ".k-invalid",
content: function (e) {
var errorMessage = $("#tickets").find("[data-for=" + e.target.attr("name") + "]");
return '<span class="k-icon k-warning"> </span>' + errorMessage.text();
}
});
$("form").submit(function (event) {
event.preventDefault();
if (validator.validate()) {
status.text("Hooray! Your tickets have been booked!")
.removeClass("invalid")
.addClass("valid");
} else {
status.text("Oops! There is invalid data in the form.")
.removeClass("valid")
.addClass("invalid");
}
});
});
</script>
Why not use css? Just add this rule to your styles
.k-widget.k-tooltip-validation {
display: none !important;
}
I'm attempting to use Kendo-Validator and Kendo-ToolTip to show validation messages as a tooltip. The problem I currently have is that multiple validation error messages appear against the HTML element. How do you stop that from happening?
Here's the HTML:
<div id="example">
<div class="demo-section k-header">
<form id="tickets">
<h3>Book Tickets</h3>
<ul>
<li>
<label for="fullname" class="required">Your Name</label>
<div style="display:inline-block">
<input type="text" id="fullname_1" name="fullname" class="k-textbox" placeholder="Full name" style="width: 200px;" />
<!--<input type="text" id="fullname_1" name="fullname" class="k-textbox" placeholder="Full name" required validationmessage="Enter {0}" style="width: 200px;" />-->
</div>
</li>
<li>
<label for="fullname" class="required">Your Name</label>
<div style="display:inline-block">
<input type="text" id="fullname_2" name="fullname" class="k-textbox" placeholder="Full name" style="width: 200px;" />
<!--<input type="text" id="fullname_2" name="fullname" class="k-textbox" placeholder="Full name" required validationmessage="Enter {0}" style="width: 200px;" />-->
</div>
</li>
<li class="accept">
<button class="k-button" type="submit">Submit</button>
</li>
<li class="status">
</li>
</ul>
</form>
</div>
Here's the CSS:
<style scoped>
.k-textbox {
width: 11.8em;
}
.demo-section {
width: 700px;
}
#tickets {
width: 510px;
height: 323px;
margin: 0 auto;
padding: 10px 20px 20px 170px;
background: url('../content/web/validator/ticketsOnline.png') transparent no-repeat 0 0;
}
#tickets h3 {
font-weight: normal;
font-size: 1.4em;
border-bottom: 1px solid #ccc;
}
#tickets ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#tickets li {
margin: 7px 0 0 0;
}
label {
display: inline-block;
width: 90px;
text-align: right;
}
.required {
font-weight: bold;
}
.accept, .status {
padding-left: 90px;
}
.valid {
color: green;
}
.invalid {
color: red;
}
span.k-tooltip {
margin-left: 6px;
}
</style>
Here's the JavaScript:
<script>
$(document).ready(function () {
var status = $(".status");
$(".k-textbox").blur(function (event) {
var tooltip = $("#tickets").kendoTooltip({
filter: ".k-invalid",
content: function (e) {
var errorMessage = $("#tickets").find("[data-for=" + e.target.attr("name") + "]");
return '<span class="k-icon k-warning"> </span>' + errorMessage.text();
}
});
var validator = $("#tickets").kendoValidator({
rules: {
required: function (input) {
var value = input.val();
if (value != null && value.length > 0)
return true
else return false;
},
customRule1: function (input) {
if (input.is("[name=fullname]")) {
return input.val() === "peter" || input.val() === "john";
}
return true;
}
},
messages: {
required: "Field is required",
customRule1: "User name must be either Peter or John"
}
});
if (validator.validate()) {
status.text("Hooray! Your tickets have been booked!")
.removeClass("invalid")
.addClass("valid");
} else {
status.text("Oops! There is invalid data in the form.")
.removeClass("valid")
.addClass("invalid");
}
});
});
</script>
</div>
The following line was causing the duplicate message display:
$(".k-textbox").blur(function (event) {
The reason is because the kendo validation is fired as the element loses focus (onBlur) by default. Wiring the blur event, as shown above was causing the validation to happen again.