I am trying to insert a kendo listview in each of the panels but it seems to mess up because my listview items have css float:left
I have simplified the problem to the following.. which does not show any items in the panelbar because the div has floating style
#(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Multiple)
.Items(panelbar =>
{
panelbar.Add().Text("Images")
.Expanded(true)
.Content(#<text>
<div style="float:left;">one</div>
<div style="float:left;">two</div>
</text>);
panelbar.Add().Text("Movies")
.Expanded(true)
.Content(#<div>movies</div>);
panelbar.Add().Text("Images")
.Expanded(true)
.Content(#<div>flash</div>);
})
)
This is a very simplified version of what am trying to do which does not next a listview.
Thank you
(Old question, but just to help the next person searching for this).
Add this to the bottom of your Content block containing the floated divs.
<div style="clear: both;"></div>
Related
i want to hover on a svg element inside div element with class main. this svg element has title tag "Header element"
below is the code
<div class="main">
<div class="box">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell">
<div>
<svg></svg>
<span> //want to hover on this element
<svg>
<title>Header element</title>
</svg>
</span>
</div>
</div>
</div>
</div>
as seen from code above, i want to hover on span element that contains svg with title Header element.
i have tried using below
cy.get(`.main>div`)
.contains('svg', 'Header element')
.trigger('mouseover')
but this is not working
could someone help me locating this span element using cypress. thanks.
You are selecting the svg but want to hover the span, so add a parent selector
cy.get(`.main>div`)
.contains('svg', 'Header element')
.parent('span')
.trigger('mouseover')
I think you are missing . (class selector)
cy.get(`.main>div`)
.contains('svg', 'Header element')
.triggers('mouseover')
how to get rounded corners in the popup of the dropdown list?
<div class="example-wrapper">
<p>T-shirt size:</p>
<kendo-dropdownlist [data]="listItems"
[popupSettings]="{
popupClass:'[border-round]'
}">
</kendo-dropdownlist>
</div>
where border round is defined in the css as
.border-round
{
border-radius:20px;
}
i tried this and it does not work
In Kendo UI for jQuery, you can override the Kendo CSS class like below:
.k-list-container.k-state-border-up {
border-radius: 15px;
}
If the Kendo UI for Angular uses the same CSS class name, then the above should work.
My issue is similar to the one here: paper-menu-button's dropdown (paper-menu) not overlaying other iron-list items, but no adequate solution is proposed there.
The problem is that I have a <paper-dropdown-menu>, which opens up correctly inside the <iron-list> item it is in, but goes underneath the following <iron-list> items:
I have a simple <paper-dropdown-menu> like this:
<paper-dropdown-menu-light class="custom" label="Languages" no-label-float>
<paper-listbox class="dropdown-content" selected="1">
<paper-item>Spanish</paper-item>
<paper-item>English</paper-item>
<paper-item>French</paper-item>
<paper-item>Sinhala</paper-item>
</paper-listbox>
</paper-dropdown-menu-light>
which is inserted into another element with an <iron-list> (which loads a JSON file with <iron-ajax>):
<iron-list id="list" items="[[bookList.books]]" as="item">
<template>
<div>
<div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]" style="z-index: 1;">
<div class="avatar">[[item.id]]</div>
<div class="pad">
<div class="primary">[[item.titleen]]</div>
<div class="shortText">[[item.slug]]</div>
<div class="longText">[[item.blurb]]</div>
<div class="languagedrop">
<language-drop></language-drop>
</div>
</div>
</div>
</div>
</template>
</iron-list>
I tried setting the z-index for each <iron-list> item to 1, but that did not work. I tried working with <iron-overlay>, but I did not manage to get that done. I'm very new to Polymer, so if anybody has a solution or workaround that would be great.
That's because iron-list is using transform: translate3d for each list item.
The workaround that I have found is working is to add z-indexto the current list item (<div class="item"></div>) on which you have the dropdown expanded, or to all items from top to bottom in descending order, programatically.
I am trying to implement a list where I should pick an item from it, I am trying to use a ListPicker:
<StackLayout verticalAlignment="top">
<ListPicker id="inquiryType" items="{{ inquiryTypeItems }}" />
</StackLayout>
Is there any way to make the ListPicker modal, and show it by clicking on a readonly TextField?
I am using Javascript on Nativescript.
Thanks!
Put ListPicker to modal dialog wont be good idea as u need to create platform dependend creating and processing that picker
So first approach would be dialogs actions and on tap open dialog with options,
array of options, only strings
http://docs.nativescript.org/cookbook/ui/dialogs#action
Example (taken from link above if it happens it wont work for u and little rewrited for your case):
var options = {
title: "Inquiry Type",
message: "Choose inquiry type",
cancelButtonText: "Cancel",
actions: inquiryTypeItems
};
dialogs.action(options).then((result) => {
console.log(result);
});
or as second approach,
U can set ListPicker as hidden on load of page after tapping on something(definitely not TextField, as u can get problem with showing keyboard, either Label or Button) show ListPicker with animation or visibility property and on change or maybe on Done button which would be together with ListPicker it would let people to choose from list of items :)
If u have other data together with other properties better for second approach but if u have some simple array of strings u can use first one
I am not sure how you would do this in plain NativeScript, however, if you are using Angular2, then you can use an angular modal and then nest the nativescript ListPicker inside that.
So the README of the Angular2 Modal Project describes creating ui agnostic modals very thoroughly. Then in its content, you would do something like:
<div class="container-fluid custom-modal-container">
<div class="row custom-modal-header">
<div class="col-sm-12">
<h1>A Custom modal design</h1>
</div>
</div>
<div class="row" [ngClass]="{'myclass' : shouldUseMyClass}">
<div class="col-xs-12">
<div class="jumbotron">
<h1>Pick Something:</h1>
<ListPicker id="inquiryType" items="{{ inquiryTypeItems }}" />
</div>
</div>
</div>
</div>`
Here shows how the components might fit together.
You can see the issue which track supporting this in NativeScript.
I have a editor template for my kendo grid defined as
<script id="my-editor-template" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="ContactName">Contact</label>
</div>
<div data-container-for="ContactName" class="k-edit-field">
<input type="text" class="k-input k-textbox" name="ContactName" data-bind="value:ContactName">
</div>
<!-- more fields, etc -->
</script>
In my grid definition, I definte editable like this:
editable =
{
mode: 'popup',
template: kendo.template($('#my-editor-template').html()),
confirmation: 'Are you sure you want to delete rec'
};
But I would like to make the popup window wider. I tried wrapping the contents of my template in a
<div style="width: 800px;"></div>
but the popup window stayed the same with, and made the contents scrollable (i.e., 800px content inside a 400px window).
I know I can do a
$(".k-edit-form-container").parent().width(800).data("kendoWindow").center();
after the window is opened, but all the content of the window is formatted for like 400px, and it feels a little hackish. Is there not a way I can dictate teh size in the template markup?
Kendo grid popup window is using kendo window, so you can set the height and width like this
editable: {
mode: "popup",
window: {
title: "My Custom Title",
animation: false,
width: "600px",
height: "300px",
}
}
Here is dojo for you, but since i did not define a custom template it still use default one so as the result the window size already 600 x 300 but the content is not.
After an hour+ long research following code fixed my issue. I had to put this code in the edit event.
$(".k-edit-form-container").attr('style', "width:auto");