Inserting line breaks in content of kendo dialog service window. Kendo Angular 6 dialog in #rogress. line break characters are ignored.
tried html element br and \n, \n. e.g. It displays the character text "\n\n\n" in one continuous line
const dialog: DialogRef = this.dialogService.open({
title: alertTitle,
content: "Want multiple line breaks here-> \n\n\n so this appears 3 lines below on another line",
actions: a,
width: 400,
height: 205,
minWidth: 250
});
Fix was to override the Kendo styles for the class .k-dialog-content { // allow new lines and spaces in dialog popup white-space: pre-wrap; }
Related
I am using Architect 4.3.2.19, CMD 7.6.0.87 Modern framework.
I have a couple of xtypes for things like Ext.Panel - example:
Ext.define('Ext.PanelSection', {
extend: 'Ext.Panel',
xtype: 'panelsection',
alias: 'widget.panelsection',
config: {
shadow: true,
ui: 'panel-section-title',
layout: 'vbox',
header: {
height: 18,
minHeight: 18,
maxHeight: 18,
style: 'text-decoration:underline'
}
}
});
The source for the xtype is held in a common.js file that is in the resource section of the Architect project inspector.
So in the architect I add an Ext.Panel to the canvas and then I then add a process config
config.xtype = 'panelsection';
return config;
It works beautifully but the architect will still show the panel header full height which makes laying out the panel a bit tricky. Is there a way of creating an xtype so that the architect is aware of it's config.
There was something I just now thought about in reading your question. It could be the Theme's .css is overriding your settings, possibly.
Two things you can try:
Once you place your PanelSection you could go down the Theme Config panel and change the default height to 18px.
You could you add another resource file containing .css, I did this, and allow it to override the panel header height. I did it for my Tabs in a TabPanel, it worked like a charm. But you'd need to find out what css class to override. In searching the .arch-internal-preview.css file, I found references to:
x-panel.x-header-position-top > .x-max-height-el {
flex-direction: column
}
You could try to add a height variable of 18px under the flex-direction and see if that changes the height of the header.
Anyway below is what I've done to change my Tabs in a separate resouce file.
Ex:
.x-tabpanel {
font-size: 28px;
}
.x-tab{
width: 250px;
}
Hi I wanted to add some Arabic text to my Phaser game. I have the following in the update() function:
this.scoreText = this.add.text( this.world.centerX, this.world.height/5,
"",{nsize: "32px", fill: "#FFF", align: "center"});
this.scoreText.setText("تُفاحة");
This produces strange letters on the screen which are not Arabic. Any ideas?
First off, you shouldn't be adding text in the update() method - this would cause it to be added multiple times (once for each frame, ideally 60 times per second). Move it to the create() method so that it's only added once. You also have a typo in the parameters: nsize should be just size.
function create() {
this.scoreText = this.add.text( this.world.centerX, this.world.height / 5, "", { size: "32px", fill: "#FFF", align: "center" });
this.scoreText.setText("تُفاحة");
}
You can try something like
Import the font in the CSS part in index.html
#import url(https://fonts.googleapis.com/earlyaccess/amiri.css);
Then just declare the style as a variable
var style = { font: "32px Amiri", fill: "#333", align: "center" };
Then in the create function add the text like in this jsfiddle https://jsfiddle.net/albator2018/r2zLtoqd/
There is another manner to do it but like what i've just explained it works fine
I'm trying to understand how anchors work in QML (Qt Quick 2.0). I've got a simple Item like this:
AddButton.qml:
Item {
Button {
text: "ADD"
width: 100
height: 50
}
}
Which I add to the main QML file like this:
main.qml:
Item {
id: root
width: 800
height: 600
AddButton {
id: addButton
}
}
This works fine. However, as soon as I try to put the button in the bottom right corner using anchors, the button disappears:
main.qml:
Item {
.....
AddButton {
id: addButton
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}
It only comes back if I set a width and height at the main QML file level:
main.qml:
Item {
.....
AddButton {
id: addButton
width: 100
height: 50
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}
So I'm wondering, why does the button disappear when I set the anchors? And is there any way to make it work without setting the width and height in the main QML file (basically to make it use whatever size is set in AddButton.qml?)
The problem is that the encapsulating Item has not an explicit width height. In this case the engine refers to the "natural" witdh/height, i.e. the implicitWidth/implicitHeight properties. Such properties happen to be zero in most cases, even in this specific case. Hence, your custom type has zero dimension.
Therefore the AddButton.anchors.bottom is in fact at the very top of the encapsulated Button, which in turn protrudes the encapsulating Item
There are two things about this:
You don't need to encapsulate the Button with an Item unless you want to hide the internals of the Button.
If the latter is your desire, try this:
Item {
width: 100 //give the object a dimension!
height: 50
Button {
text: "ADD"
anchors.fill: parent
}
}
Now you can anchor it, and it won't be positionated somewhere else.
http://ramin.azerizone.net/qiymet.html
Here is my demo webiste. In right side if I click red button, it says "dialog is not function". Although I have included jquery, and jquery ui. My script as below:
$(document).ready(function() {
$('#order_services_button').on("click", function() {
$("#dialog-form").dialog({
height : 320,
width : 350,
modal : true
});
});
});
This is because you are including two jQuery/jQueryUI files.Remove the duplicate script tags and the dialog should work.
I have a jquery autocomplete and it works just fine. Now i want to add a default text in the dropdown like
Input box if the user types.. ja
It should display below
Select below category [should be there all the time]
java
javascript
Any suggestion on how to do it..
// Ajax Auto suggestion box
var options, a;
jQuery(function()
{
a = $('#txtOccupation').autocomplete({
serviceUrl: '/App_Handlers/GetAjaxSuggestions.ashx?datasets=occ',
minChars: 1,
delimiter: /(,|;)\s*/,
deferRequestBy: 0, //miliseconds
noCache: false,
width: 420,
onSelect: function(value, data){ alert('You selected: ' + value + ', ' + data); },
});
browser = jQuery.browser;
$('.autocomplete').css('padding-left','10px');
});
HTML
** <input type="text" class="placeholder-text" maxlength="100" value="Job title, Keyword or O*NET code" onfocus="if(this.value=='Job title, Keyword or O*NET code')this.value=''" onblur="if(this.value=='')this.value='Job title, Keyword or O*NET code'" id="txtOccupation" name="txtOccupations" autocomplete="off"></input>**
I am providing answer to:
But its adding at the end, i want it to be on top. in your comment.
Based on the below your fiddle jsfiddle.net/J5rVP/158, I forked new fiddle http://jsfiddle.net/a3Tun/ to add element at top.
I have changed ui.content.push to ui.content.unshift.
unshift is like push, but it insert value at top of array. For more info, refer http://www.w3schools.com/jsref/jsref_unshift.asp