This code is working fine on iOS and Android, but not on a Windows 10 Mobile device (Microsoft Lumia 650, Version: 1511, Build: 10.0.10586.11):
public App()
{
var layout = new StackLayout
{
Orientation = StackOrientation.Vertical,
Padding = 0,
Children =
{
new Button { Text = "A" },
new Button { Text = "B" },
new Button { Text = "C" },
new Button { Text = "D" },
new Button { Text = "E" },
new Button { Text = "F" },
new Button { Text = "G" },
new Button { Text = "H" },
new Button { Text = "I" },
new Button { Text = "J" },
new Button { Text = "K" },
new Button { Text = "L" },
new Button { Text = "M" },
new Button { Text = "N" },
new Button { Text = "O" },
new Button { Text = "P" },
new Button { Text = "Q" },
new Button { Text = "R" },
new Button { Text = "S" },
new Button { Text = "T" },
new Button { Text = "U" },
new Button { Text = "V" },
new Button { Text = "W" },
new Button { Text = "X" },
new Button { Text = "Y" },
new Button { Text = "Z" },
},
};
var scrollView = new ScrollView { Content = layout };
// The root page of your application
MainPage = new ContentPage
{
Content = scrollView,
};
}
The scroll view is not scrolling at all. I can see the scrollbar, but it doesn't scroll. I tried to play with HorizontalOptions/VerticalOptions, but that didn't helped either. In the simulator it does work by scrolling with the mouse. The same problem also occurs with Label.
What is wrong here?
Has been fixed in Xamarin Forms 2.1.0.
Related
I'm trying to ask user informations in adaptive card. But the column size is varying because of which the card looks clumsy. How can I make it look good with uniform gap between each columnset columns. I tried using width as "Auto" and "Stretch" I even tried setting width with "50px" and "100px" but I didn't achieve.
Kindly help me on this.
Edit 1: Adding Code
I'm creating card in C#
Here is my code
AdaptiveCard card = new AdaptiveCard()
{
Body = new List<AdaptiveElement>()
{
new AdaptiveColumnSet()
{
Columns = new List<AdaptiveColumn>
{
new AdaptiveColumn()
{
Items = new List<AdaptiveElement>()
{
new AdaptiveTextBlock()
{
Text="*First Name",
Weight = AdaptiveTextWeight.Bolder
},
} ,
Width = AdaptiveColumnWidth.Auto
},
new AdaptiveColumn()
{
Width = AdaptiveColumnWidth.Auto,
Separator = true,
Items=new List<AdaptiveElement>()
{
new AdaptiveTextInput()
{
Id = "FirstName",
MaxLength = 300,
Style = AdaptiveTextInputStyle.Text,
},
}
}
}
}, // First Name
new AdaptiveColumnSet()
{
Columns = new List<AdaptiveColumn>
{
new AdaptiveColumn()
{
Items = new List<AdaptiveElement>()
{
new AdaptiveTextBlock()
{
Text="Middle Name",
Weight = AdaptiveTextWeight.Bolder
},
}
},
new AdaptiveColumn()
{
Width = "stretch",
Separator = true,
Items=new List<AdaptiveElement>()
{
new AdaptiveTextInput()
{
Id = "MiddleName",
MaxLength = 300,
Style = AdaptiveTextInputStyle.Text,
},
}
}
}
},
new AdaptiveColumnSet()
{
Columns = new List<AdaptiveColumn>
{
new AdaptiveColumn()
{
Items = new List<AdaptiveElement>()
{
new AdaptiveTextBlock()
{
Text="*Last Name",
Weight = AdaptiveTextWeight.Bolder
},
}
},
new AdaptiveColumn()
{
Width = "stretch",
Separator = true,
Items=new List<AdaptiveElement>()
{
new AdaptiveTextInput()
{
Id = "LastName",
MaxLength = 300,
Style = AdaptiveTextInputStyle.Text,
},
}
}
}
},
new AdaptiveColumnSet()
{
Columns = new List<AdaptiveColumn>
{
new AdaptiveColumn()
{
Items = new List<AdaptiveElement>()
{
new AdaptiveTextBlock()
{
Text="*Date Of Birth",
Weight = AdaptiveTextWeight.Bolder
},
}
},
new AdaptiveColumn()
{
Width = "stretch",
Separator = true,
Items=new List<AdaptiveElement>()
{
new AdaptiveDateInput()
{
Id = "DoB",
},
}
}
}
}, // Date Of Birth
}
};
first of all you could control your card a lot easier if you'd have a look at templating.
Creating cards in code like that is soooort of deprecated, you can still use it but using json directly and templating is way more convinient.
To answer your question, yes you can can set width of columns in either pixel, stretch, automatic or weighted. Similar to this example:
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 25,
"horizontalAlignment": "Center",
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "stretch"
}
]
You have to set all the label columns in your example to the same size. Easiest is by just setting them to a fixed width or weighted.
If this does not work, make sure the term is used correct, you have to use a lower case "stretch" and width when weighted has to be an integer, You can try this in the designer. Adaptive Cards as such doesn't really care about "Stretch" or "stretch" but webchat for example has some issues around that, also the card version has to match what your host supports.
Easiest way, and thats where templating comes in again, is to design and try your card in the designer. If its fine in the designer it usually is in the host you want to render the card.
Hope thats helpful for you
I'm using Adaptive Card version 1.2 and I'm trying to add style for Adaptive Column. The style is getting reflected in Adaptive Designer(Web Chat). But the same if I try to check in hosted Web Chat styles are not getting reflected. Also I would like to mention that I'm creating Adaptive card using C#.
But it is looking like this
The i'm using this for webchat (https://cdn.botframework.com/botframework-webchat/latest/webchat.js)
Here is my C# code
AdaptiveCard card = new AdaptiveCard(new AdaptiveSchemaVersion(1, 0));
card.Body.Add(new AdaptiveTextBlock()
{
Text = $"Hello User",
HorizontalAlignment = AdaptiveHorizontalAlignment.Center
});
card.Body.Add(new AdaptiveTextBlock()
{
FontType = AdaptiveFontType.Monospace,
Text = "Would you like to rate us",
Color = AdaptiveTextColor.Good,
Weight = AdaptiveTextWeight.Bolder,
HorizontalAlignment = AdaptiveHorizontalAlignment.Center,
Separator = true
});
card.Body.Add(new AdaptiveColumnSet()
{
Separator = true,
Columns = new List<AdaptiveColumn>()
{
new AdaptiveColumn()
{
Bleed = true,
Width = AdaptiveColumnWidth.Stretch,
Style = AdaptiveContainerStyle.Emphasis,
SelectAction = new AdaptiveSubmitAction()
{
Title = "1",
DataJson = "{ \"Type\": \"1\" }"
},
Items = new List<AdaptiveElement>()
{
new AdaptiveTextBlock()
{
Text = "1",
}
}
},
new AdaptiveColumn()
{
Bleed = true,
Width = AdaptiveColumnWidth.Stretch,
Style = AdaptiveContainerStyle.Accent,
SelectAction = new AdaptiveSubmitAction()
{
Title = "2",
DataJson = "{ \"Type\": \"2\" }"
},
Items = new List<AdaptiveElement>()
{
new AdaptiveTextBlock()
{
Text = $"2"
}
}
},
new AdaptiveColumn()
{
Bleed = true,
Width = AdaptiveColumnWidth.Stretch,
Style = AdaptiveContainerStyle.Good,
SelectAction = new AdaptiveSubmitAction()
{
Title = "3",
DataJson = "{ \"Type\": \"3\" }"
},
Items = new List<AdaptiveElement>()
{
new AdaptiveTextBlock()
{
Text = $"3"
}
}
},
new AdaptiveColumn()
{
Bleed = true,
Width = AdaptiveColumnWidth.Stretch,
Style = AdaptiveContainerStyle.Attention,
SelectAction = new AdaptiveSubmitAction()
{
Title = "4",
DataJson = "{ \"Type\": \"4\" }"
},
Items = new List<AdaptiveElement>()
{
new AdaptiveTextBlock()
{
Text = $"4"
}
}
}
}
});
Please help me on this
Can someone please help me how can I change the contents of Formats dropdown in richtexteditor ej2 syncfusion?
At the moment, default values are: Paragraph, Code, Quotation, Heading 1 etc.
I want to remove the Code, Quotation and add a new custom Format called "My Paragraph".
I have gone through the documentation and apparently, it is not listed.
Help will be appreciated.
Here is what my current configuration is:
#Html.EJS().RichTextEditor("table").ToolbarSettings(e => e.Items((object)ViewBag.tools)).Value((string)ViewBag.value).QuickToolbarSettings(e => { e.Table((object)ViewBag.table); }).InsertImageSettings(new RichTextEditorImageSettings() { Path = "/Uploads/", SaveUrl = "/Home/Save" }).ShowCharCount(true).MaxLength(2000).Created("created").Render()
Controller method return configuration in viewbag
var tools = new
{
tooltipText = "Custom Tools",
template = "<button class='e-tbar-btn e-btn' tabindex='-1' id='custom_tbar' style='width:100%'><div class='e-tbar-btn-text rtecustomtool' style='font-weight: 500;'> Custom Tools</div></button>"
};
ViewBag.tools = new object[] {
"Bold", "Italic", "Underline", "StrikeThrough",
"FontColor", "BackgroundColor",
"LowerCase", "UpperCase", "|",
"Formats", "Alignments", "OrderedList", "UnorderedList",
"Outdent", "Indent", "CreateTable","|",
"CreateLink", "Image", "|", "ClearFormat", "Print",
"SourceCode", "FullScreen", tools,"|", "Undo", "Redo"
};
ViewBag.table = new[] {
"tableRows","tableColumns","tableCellVerticalAlign","tableCellHorizontalAlign","backgroundcolor"
};
ViewBag.value="";
You can modify the existing “format” option using Format property as shown below.
[View]
#Html.EJS().RichTextEditor("default").Format((object)ViewBag.types).ActionBegin("onBegin").Render()
<script>
function onBegin(e) {
alert(e.element.textContent + " is Selected");
}
</script>
[Controller]
public ActionResult Index()
{
object format1 = new { text = "Paragraph", value = "P" };
object format2 = new { text = "My Paragraph", value = "BlockQuote" };
object format3 = new { text = "Heading 1", value = "H1" };
object format4 = new { text = "Heading 2", value = "H2" };
ViewBag.types = new { width = "40px",
types = new[] { format1, format2, format3, format4 }
};
return View();
}
If the newly added item has any predefined format, you can mention that format in value. Else if you want to perform custom action, then you can get the selected item through actionBegin event of RTE and perform required action there. Now the items will be displayed in toolbar as shown below
Sample
I try to put a ScrollView with a StackLayout between two StackLayouts but when I scroll the elements inside the ScrollView, the items always overlap the superior StackLayout as seen in the image:
The code I use is:
stackPrinc = new StackLayout()
{
Spacing = 0,
HorizontalOptions = LayoutOptions.FillAndExpand,
Children = {
ly_sup,
new ScrollView() { Content = ly_main, IsClippedToBounds = true, BackgroundColor = Color.Olive },
ly_inf },
};
I solved it, its a bug happends when the scrollview got a elemen over and under him. My new code is;
stackPrinc = new StackLayout()
{
Spacing = 0,
Children = {
ly_sup,
new StackLayout() { Children = { new ScrollView() { Content = ly_main, IsClippedToBounds = true, BackgroundColor = Color.Aqua, } } },
ly_inf,
},
};
I have a menu with values and I want to add a Key shortcut that will select that item.
I can demonstrate in this fiddle exactly what I am looking for
function onSelect(e) {
var item = $(e.item),
menuElement = item.closest(".k-menu"),
dataItem = this.options.dataSource,
index = item.parentsUntil(menuElement, ".k-item").map(function () {
return $(this).index();
}).get().reverse();
index.push(item.index());
for (var i = -1, len = index.length; ++i < len;) {
dataItem = dataItem[index[i]];
dataItem = i < len-1 ? dataItem.items : dataItem;
}
alert(dataItem.value);
}
$(document).ready(function() {
$("#menu").kendoMenu({
dataSource: [
{
text: "Item 1 (A)",
value: "A",
items: [
{
text: "Sub Item 1 (L)",
value: "L",
items: [
{
text: "Sub Sub Item 1 (D)",
value: "D"
},
{
text: "Sub Sub Item 2 (E)",
value: "E"
}
]
},
{
text: "Sub Item 2 (O)",
value: "O"
}
]
},
{
text: "Item 2 (F)",
value: "F"
},
{
text: "Item 3 (G)",
value: "G"
}
],
select: onSelect
});
$(document.body).keydown(function (e) {
var menu = $("#menu").kendoMenu().data("kendoMenu");
if (e.altKey && e.keyCode == 76) {
alert("select item with value L");
// Pseudocode:
// var item = find item with value L
// menu.select(item); (or trigger)
}
});
});
I couldn't find anywhere any resources that could accomplish that. Also I can't assign ids to the rendered "li" via the datasource which makes it hard to select a node of the menu.
Any ideas?
Not sure if Kendo API supports triggering select item but I was able to achieve click the menu items with keyboard shortcuts using JQuery.
Check this JSFiddle
function clickMenuSpan(keyCode){
var shortcut = String.fromCharCode(keyCode);
$('#menu span.k-link').each(function(){
var txt = $(this).text();
if(txt.substr(-3) === '(' + shortcut + ')')
{
$(this).click();
}
})
}
You can use the above function in your keydown event. And add some filters to call this only for your array of shortcuts.
$(document.body).keydown(function (e) {
var menu = $("#menu").kendoMenu().data("kendoMenu");
if (e.altKey) {
clickMenuSpan(e.keyCode);
}
});