How to reduce the height of list item in Sencha touch 2? My list showing large numbers of single word name/value pair. As each item taking extra height, list is becoming too long. So i want to reduce each item height to exact content height. I tried using css like this but no luck. Any help?
var tabPanel=Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'top',
defaults: {
styleHtmlContent: true
},
items: [
{
title: 'DETAILS',
xtype: 'list',
cls: 'myList',
....
itemTpl: '<table><tr><td>{fieldName}</td><td>{fieldValue}</td></tr></table>',
.............
.myList .x-list-item {
max-height: 30px;
}
Each list item has a min-height of 2.6em. So, you can reduce that and add a overflow property. Use this:
.my-list .x-list-item .x-list-item-label{
min-height: 0.8em !important;
overflow : auto;
}
And it is not a good practice to use Html tables inside itemTpl. Use plain DIV elements with -webkit-box CSS3 property.
You can use itemHeight config of list. http://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List-cfg-itemHeight
in addition to that you can also use CSS like this to control padding:
.my-list .x-list-item .x-list-item-body{
min-height: 0.5em !important;
padding-top: 0.3em;
padding-bottom: 0.3em;
}
use a property called as
itemHeight: [*Height of the item you need*],
i.e
itemHeight: 40
Read it from the Component's JS file
Related
I'm using datatables with the bootstrap 4 styling framework. I'd like to make the filter input take up the full width of the page. Currently I'm doing this by overriding the dom configuration to remove the pagination div, then applying styles to the label and input elements (code below) but this feels like a bit of a hack. Is there a better way of doing it?
$("#table").dataTable({
"dom":
"frtip",
...
"paging": false
});
#table_filter label {
width: 100%;
}
#table_filter input {
display: block;
margin-left: 0;
width: 100%;
}
I have a list which contains main menu of my mobile app and is visible when user swipes to right or clicks on menu icon. I want to have the background of this list and hence main menu to be blurred.
I checked out the css filter:blur property and it can be done using that but you need to have an extra div under the div which has your content and apply filter:blur to it as shown in this Codepen
Below is my list code for sencha touch
Ext.define('MobileApp.view.SlideList', {
extend: 'Ext.List',
xtype: 'slidelist',
config: {
cls: 'slide1',
variableHeights: true,
onItemDisclosure: true,
store: 'SlideListStore',
itemTpl: ['<div class="slideImg" style="background-image:url(resources/images/{img});"></div>',
'{title}',
'<div class="settingImg" id="settingImg" style="background-image:url(resources/icons/nw-icons/settings.png);"></div>'].join(''),
listeners: {
initialize: function (comp, eOpts) {
comp.element.on(
'swipe',
function (event, node, options, eOpts)
{
/*send event as a argument to get direction of swipe*/
this.fireEvent('swipe', event);
},
comp
);
}
}
}
});
I cant figure out where to place the extra div and apply filter:blur to it. Any pointers will be helpful.
Is this what you were trying to achieve https://fiddle.sencha.com/#fiddle/4tb
Here is how you can accomplish this
Add an empty div as html property of the list
remove the background of the list
add css to blur the image
.setMyBackground {
position: fixed;
left: 0;
right: 0;
display: block;
background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
width:100%;
height: 100%;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
z-index:-1;
}
.slide1{ background:none;}
I am having one "selectfield" component in my container.
I am opening floating panel for options.
I want to apply some specific CSS on that floating panel.
I have referred sencha touch doc . I have got one option (i.e. floatingCls).
I have tried to apply that also.
But it is not working.
Please guide me how do I apply Cls.
Thank You in advance.
Yeah, even I have tried using floatingCls, it ain't working. So I have tried by overriding its sencha's css class.
here it's working code shown below:
App.js file code:
Ext.application({
name: 'StackOverFlowDemo',
launch: function() {
var demo = Ext.create("Ext.form.Panel", {
fullscreen: true,
scrollable:false,
items: [
{
xtype: 'selectfield',
label: 'Choose one',
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
]
}
]
});
Ext.Viewport.add(demo);
}
});
here its index.css code which you need to set in your html file.
index.css
.x-floating{
background-color: darkslateblue;
}
.x-panel.x-floating, .x-msgbox, .x-form.x-floating{
background-color: grey;
}
.x-innerhtml {
background-color: lightpink;
}
.x-inner x-size-monitored x-paint-monitored x-scroll-scroller{
background-color: dodgerblue !important;
}
.x-anchor{
background-color: grey !important;
}
.x-webkit .x-anchor.x-anchor-right{
background-color: grey !important;
}
.x-panel.x-floating .x-panel-inner .x-list{
background-color: lightblue !important;
}
.x-list .x-list-item.x-item-selected.x-list-item-tpl{
color:darkred;
}
.x-list-label{
}
Or you can also do it by using CSS Vars (i.e Themeing).
You can use the "cls" config of the Panel to add a custom CSS class to the panel.
Alternatively you can use the "styles" config to apply styles directly to it (although this isn't recommended - equivalent of inline styles in HTML).
How is it possible to make a dGrid instance take up 100% of the height of its container? I can use CSS to make the ".dgrid" classed div a specific height but when I set it to 100% it doesn't display.
Got it.
.dgrid {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
}
(With position absolute/relative on container, of course)
I think the supported way to do this is with the .dgrid-autoheight css class.
require([
"dgrid/List",
"dgrid/OnDemandGrid",
"dgrid/Selection",
"dgrid/Keyboard",
"dojo/_base/declare",
"dgrid/test/data/createAsyncStore",
"dgrid/test/data/smallColorData",
"dojo/domReady!"
], function(List, Grid, Selection, Keyboard, declare, createAsyncStore, smallColorData){
window.grid = new (declare([Grid, Selection, Keyboard]))({
className: "dgrid-autoheight",
collection: createAsyncStore({ data: smallColorData }),
columns: {
col1: "Color",
col5: "R",
col6: "G",
col7: "B"
}
}, "grid");
});
This is from the test examples.
#voidstate's answer is good. Another way to do it is like this:
HTML:
<div class="containsDGrid">
<div data-dojo-attach-point="dgrid"></div>
</div>
CSS:
.containsDGrid {
height: 500px;
width: 500px;
}
.dgrid {
height: 100%;
width: 100%;
}
The key is that if you set the height of the dgrid to 100%, the dgrid's parent must have its hight set. For example if we don't set the height of the .containsDGrid div then it will look like this (notice the height of 2px):
For another example see Dojo Dgrid - Use remaining space in block
The titles on the table view have ellipsis although the horizontal space is huge. I see it in the default-style.css under .x-title .x-innerhtml. What is the proper way to adjust when it ellipses? and also if your feeling frisky the method I should use to find the answer in a situation like this would be helpful. For example, I went to the API doc for sencha and found Ext.String.ellipsis, Ext.util.Format.ellipsis, and Global_CSS.ellipsis. I see the documentation but am not sure how to approach actually changing the way ellipsis are handled.
items: [
{
xtype: 'container',
title: 'Bla Mobile',
layout: {
type: 'vbox',
pack: 'start',
align: 'center'
},
EDIT:
I added this to my style.css to fix it:
.x-title { padding:0 .3em; }
.x-title .x-innerhtml { padding: 0; }
This seems to ba a bug in webkit, I came up with this solution:
.x-title .x-innerhtml:after {
content: '';
display: inline-block;
width: .3em; /* equal to the amount of padding on the element */
}