As the title says, I would like the message of Ext.Msg.alert() to in center align. I tried this:
Ext.Msg.alert({
title: 'Success',
msg: 'Deleted',
buttons: Ext.Msg.OK,
baseCls: 'msgbox'
});
CSS:
.msgbox {
text-align: center;
}
It is still on left align. How do I do this?
The displayed text is a displayfield component that has the same size that its text then, even when it is centered, you cannot see it aligned as you want.
So, the solution is to make it bigger. In my example i do it using a css class. Take a look at it:
var w = Ext.Msg.alert({
title: 'Success',
msg: 'Deleted',
buttons: Ext.Msg.OK,
autoShow: false,
cls: 'msgbox'
});
w.down('.displayfield' ).addCls('displayfield-fullsize');
and the class is, as you can imagine:
.displayfield-fullsize{
width: 100% !important;
}
See it working here: http://jsfiddle.net/lontivero/F7HE3/3/
Related
How do I configure Angular UI-grid to center the columns so both lines are centered?
I define the headerCellClass: text-c and width: 98, in grid.columnDefs like this:
{
name: 'TotalOutstanding',
displayName: 'Total Outstanding',
width: 98,
type: 'number',
cellClass: 'text-c',
headerCellClass: 'text-c'
}
and text-c in css file like this:
.text-c {
text-align: center;
}
But I get the result in image attached.
I really need both words to be centered. How do I do that?
Seems that the class .ui-grid-cell-contents has set white-space: nowrap;
If you change that to normal it will work, so your css should look like this:
.text-c .ui-grid-cell-contents {
text-align: center;
white-space: normal;
}
According to your setup (cellClass: 'text-c', headerCellClass: 'text-c'), this css will affect the header as well as the cells..
--- EDIT ---
According to comments by the OP, that the original answer did not work for him, I added a comment that did help him. I'm adding that comment to the answer here below:
I think that the sorting icon position is affecting you.
I took the Plunker from UI-Grid's tutorials (Tutorial: 115 HeaderCellClass), and edited it to fit your scenario.
I used the header cell class ui-grid-header-cell-label to change the display to inline-block so it will "push" the sort icon to the next line: plunker here
This should probably be pretty straighforward but I haven't been able to figure it out. I'm just trying to show a loadmask on a component without the spinner image. Everything else I want to look exactly the same.
I've set up a jsfiddle with a regular loadmask applied. Again, just trying to figure out how to exclude the spinner image.
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
height: 500,
width: 500,
autoShow: true,
title: 'Loadmask example',
html: 'adsfa',
listeners: {
boxready: function (win) {
var lm = new Ext.LoadMask(win, {
msg: 'loadmask msg'
});
lm.show();
}
}
});
});
jsfiddle
Add a custom css class to the LoadMask object. You need to override background of this class.
.custom-mask .x-mask-msg-text {
background: transparent !important;
padding: 5px !important
}
Demo
When using datatables with jquery mobile, I can not seem to get a horizontal scroller going. I have tried every combination of sScrollX and sScrollY I can think of.
To see an example of the lack of vertical scroller, please try the webapp example I put up here.
On an iphone or some other small screen try the following:
1) Switch the slider from Graph to Table
2) Hit the favorites button
3) Scroll down the left panel and select "MSFT".
You will see only the first few columns. You can scroll up and down but not to the right.
I tried sScrollX and sScrollY but the scrolling is then inconsistent and buggy. At the moment I've disabled both and at least vertical scrolling works ok.
Any help would be much appreciated as I've now been fighting this for a week!
Please find the current datatables code below:
var table = $('#table_container').dataTable( {
"symbol": symbol,
"exchange": exchange,
"aoColumns": columnData,
"aoColumnDefs": [
{ "aTargets": [0], "mRender": function (data, type, full) {return dateFormat(data)} },
{ "aTargets": [1], "mRender": function (data, type, full) {return volumeNumber(data)} },
{ "aTargets": [8], "mRender": function (data, type, full) {return volumeNumber(data)} },
{ "aTargets": [14], "mRender": function (data, type, full) {return volumeNumber(data)} },
{ "aTargets": ["_all"], "mRender": function (data, type, full) {return numberWithCommas(parseFloat(data).toFixed(2))} },
],
"aaSorting": [[ 0, "desc" ]],
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bAutoWidth": false,
"bProcessing": true,
//"sScrollX": "100%",
//"sScrollY": "100%",
//"sDom": 'r<"H"lf><"datatable-scroll"t><"F"ip>',
"bScrollCollapse": false,
"bServerSide": true,
"sAjaxSource": str,
"bDeferRender": true,
"fnServerData": function( sUrl, aoData, fnCallback ) {
$.ajax( {
"url": sUrl,
"data": aoData,
"success": fnCallback,
"dataType": "jsonp",
"cache": false
} );
}
} );
Try like this
$(document).ready(function() {
$('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
} );
} );
Refer this Fiddle Demo
Wrap the table in a div.
You can set the overflow value to auto.
<div class="table-container">
<table>
...
</table>
</div>
CSS
.table-container{
overflow: auto
}
another way is to set the overflow to hidden, and then set the overflow-x (horizontal scrolling) to scroll. This has the benefit of also allowing you to set the -webkit-overflow-scrolling to touch, which will allow for momentum scrolling on mobile devices.
CSS
.table-container{
overflow: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
I have inspected the CSS of your APP from the link you provided.
To get the table to scroll in any direction independently you will need to set a desired width and height in your .dataTables_wrapper class. Vertical scrolling works in your APP because the Table is not actually scrolling itself but the Whole Page is. If your APP will not have any other content below the table then the table height can be set all the way to the bottom of the Page or else you will need to have a small Gap at the bottom so a user can touch and scroll further down the Page. Also If you are aiming your app on different mobiles then you need some jquery code to calculate screen size and update the width and height in the .dataTables_wrapper class on the fly so the table will fit the screen from left and right and to the bottom. Any excess width and height will be scrolled if the table contents are longer than the size. If the APP is just for one mobile then its easy to play around with the width and height in the class to get the desired size of the table.
Example
.dataTables_wrapper {
position: relative;
clear: both;
height: 400px;
width: 400px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
Your main_container css should be like this, so delete the rest. Otherwise you will have another horizontal scroll bar that does nothing.
#main_container {
overflow: hidden;
}
Although scroll bars are usually hidden from mobile browsers unlike desktop browsers, if you want add this css trick to hide them from view. This trick only works for webkit browsers such as Google/Safari/Native Android etc.
::-webkit-scrollbar {
width: 0px;
}
It may be a good idea to you have Fixed Table Header so a person can see what data relates to the columns when they are scrolling. There are lots of ways to achieve this, below i added a link i found
http://fixedheadertable.com/
I have a panel in Sencha Touch defined as so:
var albumContainer = Ext.create('Ext.Panel', {
id: 'album_container',
html: '',
flex: 1,
scrollable: 'vertical',
padding: 0,
});
Everything works, however since adding the scrollable property the panel has had a white background, which I'm trying to get rid off, however just setting the background of #album_container, even as !important, does nothing. Any help? Thanks in advance.
Best regards,
Damir H.
For me, I had to change the background color of the items.
items: [{
style: 'background-color:#F00',
layout: 'hbox', padding: '5',
// some other stuff
I have an item that looks like this:
items: [{
xtype: 'box',
html: '<img src="http://chart.apis.google.com/chart?mychart" alt="" style="text-align:center" />',
name: 'first',
id: 'first',
align:'center',
style:
{
float:'left',
padding: '0px 0px 10px 0px',
},
width:'100%'
}]
I am trying to get it aligned center, I have tried putting in a custom style (underneath padding:) but it says unrecognized character in "text-align". I've also tried putting align:'center' which isn't doing anything at all, but its not causing any errors.
Last thing I did (getting desperate) I added in an inline-style for text align but the box that its inside needs the style not the actual html.
I've tried looking through the documentation and couldn't find text-align under the style doc.
Thanks!
Using text-align without quoting it isn't valid syntax for an object literal. c.f. "JSON syntax for property names".
style: {
...
text-align: 'center'
...
}
... should instead be ...
style: {
...
"text-align": 'center'
...
}
It also sounds like you're likely to have more luck with vertical-align or line-height than text-align.
text-align only works on child elements, you have a couple of choices here:
Use the deprecated html properties valign="middle" and align="center", which work on the current element.
Put a div around the img and then put style="text-align:center", just remember that text-align only works on inline elements. (img is inline).
You can write a css class in Main.scss file ,declare all the aligning properties in that and apply class in your component where you're using it in js file,using
cls:"align-Items",
in scss file
.align-Items{
vertical-align: top;
}