Ext.Msg.alert and Ext.Msg.show not showing "message" field - sencha-touch

Im using Ext.Msg.alert() and 'Ext.Msg.show()' to show my message box. But so far only the Title is displayed with an OK button, but the message field is not shown. There's no error when I run the code. Anything that I miss?
Below is my code when using Ext.Msg.alert(),
Ext.Msg.alert('Title', 'Why you no display!?', Ext.emptyFn);
and when using Ext.Msg.Show(),
Ext.Msg.show({
title:'Title',
message: 'Why you no display!?',
buttons: Ext.MessageBox.OK,
fn:Ext.emptyFn
});
Update on 27th August 2013
I found that the message box works when running on IOS Devices, but not on Android and on Desktop Browsers.

After digging trough the web, I finally found the solution. It turns out the fix is in the sass file in base folder.
The original post is here.
In short,
Go to touch\resources\themes\stylesheets\sencha-touch\base\mixins, open the _Class.scss file and replace the whole block of #mixin st-box with the code below, and then re-compile your css (e.g. use compass watch)
#mixin st-box($important: no) {
#if $important == important {
display: flex !important;
display: -webkit-box !important;
display: -ms-flexbox !important;
} #else {
display: flex;
display: -webkit-box;
display: -ms-flexbox;
}
}

Related

Emmet missing semicolon inside css media query in Sublime Text 4

Emmet autocomplete doesn't add semicolon after css rules inside media query.
div {
display: none;
}
#media (max-width: 991.98px) {
div {
display: none
}
}
Outside media query
Inside media query
This is a bug in the plug-in which is under investigation. Keep track of it here: https://github.com/emmetio/sublime-text-plugin/issues/173
UPDATE: This has now been fixed.

How do I make ion-menu-button larger?

How do I make the ion-menu-button (hamburger menu button) larger?
The ion-menu-button component creates an ion-icon with font-size set to 26px. There is no attribute to set size and CSS seems to have no impact.
[UPDATE]
I reported this as a bug to the Ionic team and they "fixed" it here: https://github.com/ionic-team/ionic/issues/18667 although i still don't see how to modify the size.
setting:
ion-icon {
--font-size: 100px !important;
font-size: 70px;
}
does nothing
Sorted it out on my own. There was a
.sc-ion-buttons-md-h {
display: flew;
}
wrapper that was limiting the size of the button. Once i removed that:
.sc-ion-buttons-md-h {
display: block !important;
}
and used ion-grid to place button on the left side of my header, i could then use:
ion-menu-button {
font-size: 50px !important;
}
to set the size of my menu button.

Changes in Shopware5 less-file has no effect

I've installed Shopware
inherited from the responsive theme and
adjusting the colors (less-files).
This worked well with the header and a few other components like container.less but not offcanvas-menu.less.
In Detail:
finding the color to change:
For this I first made all colors of the entire shop unique. So I can easily tap the color value over the current shop via a pipette tool.
Then I find the color value in the source code and copy the corresponding less source code components into my new theme. Only then do I change the color.
copied inside themes/Frontend :
a) /Responsive/frontend/_public/src/less/_components/offcanvas-menu.less too
b) /MyNewTheme/frontend/_public/src/less/_components/offcanvas-menu.less
the following part :
.sidebar--navigation {
.border-radius();
background: #0492d6;
.navigation--entry {
&:last-child {
border-bottom: 0 none;
}
}
.navigation--link {
overflow: hidden;
text-overflow: ellipsis;
}
}
and changed background: #0492d6; to background: #003E7e; inside b)
Complete result: gist MyNewTheme offcanvas-menu.less
But if i reload and grap the color i got again #0492D6.
As doppelcheck i changed the color in a) to background: black; and its black.
As another doppelcheck i changed the color in themes/Frontend/MyNewTheme/frontend/_public/src/less/_components/container.less to background: red; And red is visible.
Please check if you also imported it.
Please enter in your themes\Frontend\MyNewTheme\frontend_public\src\less\all.less
#import "_components/offcanvas-menu";

Bootstrap nav justified odd responsive issue

The nav starts out great once you lower the bowser width the nav becomes stacked, this is great. Once you open the window back up the nav items are in two rows. Here's a pic.
This is how it starts out:
http://reggi.myshopify.com/pages/about#
FWIW, I found that forcing a redraw of the .nav-justified element in question helps WebKit understand. Obviously, how you chose to do this is up to you—I opted for the fadeIn(), 'cause when life hands you lemons...
$(window).bind('resize', function(){
var w = $(this).width(),
threshold = 768;
if(w < threshold){
$('.nav-justified').hide().fadeIn();
}
});
Both answers seem to be lacking. The JS solution causes a lot of flicker, and the CSS solution doesn't seem to keep the integrity of the designed tabs. Here's what I came up with.
If you're not using less with your bootstrap styles just replace #screen-sm with 768px
#media (min-width: #screen-sm) {
.nav-tabs.nav-justified > li {
display: block;
float: left;
width: 32.9999%
}
}
The problem is display: table-cell; instruction in the .nav-justified class.
Let's take a look at the bootstrap.css file, I believed that you are using Bootstrap version 3.0, at line 4109.
#media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
You must change it to :
#media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: inline-block;
float: left;
margin-left: 100px;
}
}
This will solve your problem.
This is a known bug with Bootstrap.
This has been fixed in Chrome Since 2013, but is still an open bug in WebKit and occurs in Safari.
Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the justified nav example.
— cvrebert
I recommend to not use .nav-justified or be ok with it not working properly in Safari.

remove 'Processing' instead of hide

When we start sorting or other things datatables has option to show 'Process' message. All is fine , only when it hides 'Processing' there is still stay space where 'Processing' is placed. So html table jumping down when Processing showing then when data have been loaded Processing hidding but html table isn't jumping back up so there is stay visible place for it.
Question, how to make datatable to remove Processing tag instead of just hide. Thanks
EDIT. I add html code
<div id="search_table_processing" class="dataTables_processing" style="visibility: hidden;">Processing...<img alt="< <" src="/themes/third_party/linkedin_search/img/165.gif"></div>
Well drat, I just ran into this and had to dig into it myself.
In version 1.9.0 you can search for this snippet:
an[i].style.visibility = bShow ? "visible" : "hidden";
(Found after searching for visibility.)
In the minified version it's currently this (using the NuGet package):
c[d].style.visibility=b?"visible":"hidden";
The problem is we neglected to style .dataTables_processing, as per the sample CSS files. Here's what one of the samples has for styling:
.dataTables_processing {
position: absolute;
top: 0px;
left: 50%;
width: 250px;
margin-left: -125px;
border: 1px solid #ddd;
text-align: center;
color: #999;
font-size: 11px;
padding: 2px 0;
}
Once it's styled (or bProcessing is set to false), there shouldn't be an issue.
If you're comfortable changing the functionality of the plug-in (if you think you can remember to change it back), then you could switch it to use display instead of visibility.
In case you are using Internationalisation - "oLanguage" attribute in your datatables constructor
replace the old sProcessing value with this in your localization file in order to place a custom image while processing :
"sProcessing": "<img src='/themes/third_party/linkedin_search/img/165.gif'/>",
and here is how you link your datatables to a localization file (which can be downloaded from the datatables website Internationalisation of datatables)
.
.
.
"oLanguage": {
"sUrl": "../../jQuery/dataTables/media/MyLanguageFilesFolder/en_US.txt"
}
.
.
.
If you not using the Internationalisation of datatables you can always set the "sProcessing" value with the suggested above...
here an example :
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sProcessing": "<img src='/themes/third_party/linkedin_search/img/165.gif'>"
}
} );
} );
Changing
an[i].style.visibility = bShow ? "visible" : "hidden";
to
an[i].style.display = bShow ? "block" : "none";
didn't work for me. However, I accomplished it by changing the statement to
if (bShow == false) {
an[i].style.display = "none";
}
else {
an[i].style.display = "block";
}
Hope this helps anyone who doesn't want to add any css code and just go right to the source!
For the Datatables version 1.9.4, just edit the file jquery.dataTables.js line 3005, and change the following:
an[i].style.visibility = bShow ? "visible" : "hidden";"block" : "none";
to
an[i].style.display = bShow ?
Worked for me!
If you want the text to go away while the backdrop should be there, why not just add:
div.dataTables_processing{ color: transparent; }