I am trying to align my shortcut icon in the center. However, I have not found a way to do it yet. Below is my code:
Shortcut sh = new Shortcut();
sh.setSize(String.valueOf(BUTTON_SIZE), String.valueOf(BUTTON_SIZE));
sh.setText("Shortcut Name");
sh.setIcon(ICONS.desktop());
sh.setIconStyle("bottomPanelShortcut"); // (1) this does not work.
mLeftToolbar.add(sh);
.bottomPanelShortcut {
margin-left: auto;
margin-right: auto;
}
The issue is that without the (1) statement, it shows the desktop image, but not centered.
If I include the (1) statement, then the image disappears.
Thank you for help!
Peter
Related
I'm working on a simple tic-tac-toe application and building it in CodePen. When the user loses or forces a draw (designed to be unbeatable), a jquery UI dialog box pops up informing the user of said result. Issue I'm having, is that when this happens, a large empty space appears causing a scroll bar to appear at the right of the page. This is a small detail - but I'd like to fix. I cannot put overflow: hidden on the body because then users won't be able to scroll on small screens or in resized browser windows. I've already tried the following to no avail:
adjusting position of dialog to very top of screen
putting overflow: hidden rule just on .ui-dialog
adjusting the height of the dialog box
adjusting the margin-bottom of .ui-dialog
messing with other dialog options to see if they were the cause
Some of these seemed far-fetched but I wanted to try everything I could think of before coming here. Research has turned nothing up either. I'm running Chrome and the pen in question can be found here: http://codepen.io/no_stack_dub_sack/pen/YGNRxO.
Any help on this would be much appreciated! Thanks in advance.
Again, this is a small detail, but since the app fits all on one page without scroll on most screens, I'd like to keep it looking as clean as possible.
Here's the code:
// DIALOG BOXES
$('body').append('<div id="draw" class="gameOver"><p>It\'s a Draw!</p></div>');
$('body').append('<div id="loser" class="gameOver"><p>You Lose!</p></div>');
$('.gameOver').dialog({
autoOpen: false,
resizable: false,
height: 120,
dialogClass: 'no-close',
buttons: {
'Play Again?': function() {
$('.gameOver').dialog('close');
setNewGame();
}
}
});
Somewhere in the dialog creation process, the position is set to relative on your dialog, which causes the height of your game to calculate the dialog, which gives the empty gap. You can simply set ui-dialog position to absolute in the css, and it'll solve the problem:
.ui-dialog {
position: absolute;
box-shadow: 1px 1px 30px 5px;
background: #04A777;
border-radius: 10px;
outline: none;
overflow: hidden;
margin-top: none;
}
http://codepen.io/anon/pen/EgmoGZ
How to change the application font size in brackets?
I want to change the font size of the side menu, menu bar, bottom bar and title bars of the editor which is very small. [ctrl] + [+] will only change the editor font size.
Temporary fix
File -> Extension Manager -> search for "UI too small" and add an extension to make the font larger.
Find more details on - https://github.com/adobe/brackets/issues/8059.
Work is in progress to fix this issue and it will be fixed in the next release. Track the progress - https://trello.com/c/WRhZ0xvj/969-high-dpi-support-on-windows-and-linux.
This has worked out for some people in my case the UI is not much responsive. Therefore waiting for the new release.
As Shanika suggested, "UI too small" allows you to control the size of the side/Menu fontSize, but it doesn't answer to Ctr + or -.
Nevertheless, you can still do it manually by changing directly the main.js under Brackets->extensions->user->ui-too-small->main.js Or by clicking on the menu Help then Show Extensions Folder, and click on main.js under user/ui-too-small.
Open main.js and change the fontSize you want in font-size: 22px
It's 5/2019 and still this is a problem.
Issue was opened at 2014.
Think about, there is kind a populer code editor and even if you want to increase font size of file tree which is really small, you can't without an extension (UI too small).
Weird.
You can change the setting for the ui-too-small plugin For windows trough:
Help > Show Extensions Folder > Navigate to user > Navigate to ui too small > open main.js
I personally like the following settings (Material design):
define(function (require, exports, module) {
"use strict";
ExtensionUtils.addEmbeddedStyleSheet("#sidebar *, #main-toolbar *, #titlebar *, #problems-panel *,"+
"#find-in-files-results *, #e4b-main-panel *, #status-bar *,"+
"#main-toolbar *, #context-menu-bar *, #codehint-menu-bar *,"+
"#quick-view-container *, #function-hint-container * { font-size: 16px !important;"+
" line-height: 30px !important; }"+
".sidebar li { min-height: 30px !important;}"+
".sidebar-selection, .filetree-selection { min-height: 30px !important; margin-top: 5px;}"+
""+".jstree-icon{margin-top:10px !important} .filetree-selection-extension{margin-top: 5px; height: 30px !important;} .jstree-rename-input{ margin-top: 2px !important; height: 30px !important; padding-bottom: 0px !important;} "
);
});
I have a div styled to truncate centered text with an ellipsis, with some padding on each side. It works when using a desktop browser, but on iPad the text seems to ignore the right padding and becomes centered incorrectly.
I'm using this for the styling:
div {
text-overflow: ellipsis;
width: 120px;
padding: 0 38px;
overflow: hidden;
white-space: nowrap;
border: 1px solid black;
text-align: center;
}
An example can be seen here. View on iPad to see the problem. http://jsfiddle.net/35Lyk9yp/
I'm thinking this might be some bug with the mobile browsers? It didn't work on iOS Safari or Chrome, but it's ok on Windows Safari and Chrome and Firefox. Is there a simple workaround for it?
Edit:
I found a workaround by using an inner div with the content that I used to do the ellipsis, and then used the outer div to set the padding. If there is a way around it with one element though, please let me know.
In order to get your code to work you need to have CSS overflow, width and display.
You are probably missing the display.
So we're building an app using Phonegap & Jquery Mobile and we're having an issue on one of the JQM pages. The issue comes in when you're using the ios keypad's "next" button to navigate between the fields. When you come to the last input text field and you press the "Done" button, some of the page elements appear behind the "header" bar as opposed to having all the page elements in view once the "Done" button has been pressed.
On the Android version, the page's full elements are in view but the Footer bar is now gone and only when I tap the body the footer appears.
Any idea what might be happening here?
I sorted out the issue after a full day of scratching around. A minor change was made to the jquery.mobile.css global configuration file which created the issue. The minor change was made to the following setting...
.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0; }
The actual change made was "! important" was inserted next to the min-height: 100% which resulted in the issue. I simply removed the "! important" and it worked.
I have attached two pictures, the first shows the "desktop" of the webapp I work on, some of the icons you see open dialogs made of a <div/> containing an <iframe/>, but while on a normal pc it all works properly, on the iPad it seems there is a problem with the z-index of some elements, as shown in second picture.
The small red rounds with number inside are defined as follows:
.countComunicazioni {
position: relative;
background: url(/images/admin/menu_sgs/counter.gif) no-repeat center center;
height: 35px;
width: 35px;
color: #FFF;
top: -105px;
left: 120px;
z-index: 0;
font-weight: bold;
display: none;
}
.countComunicazioni p {
margin-top: -5px;
padding-top: 10px;
}
The markup is a <div class="countComunicazioni"/> tag and a <p/> tag inside.
I also noticed that now the problem also appears in Google Chrome V22, the numbers in red circles are always on top even if they have z-index == 0 and the dialogs have z-index > 1000.
As per this bug report ( http://code.google.com/p/chromium/issues/detail?id=144518 ), the change seems to be intended, even if I would bet it'll broke many layouts, not only ours.
This problem was not present in previous versions of Google Chrome, nor is present on Firefox V15 or Internet Explorer V9, where everything is rendered problem.
How can this problem be solved? I'm no CSS expert, so I must admit I have tried little, if anything, so far... And also, who is "right" here? Is our markup incorrect, or does the problem lie in google chrome new rendering strategy?
EDIT
It seems I've been able to solve the issue shown in the two pics: all the dialogs generated from my web app are placed inside a <div/> with position:fixed placed on the very top of the body, now I tried to move the div to the very bottom of the page, and the layout seems now correct.
There is one more problem though: when opening a modal dialog, the opaque layer that is supposed to be created between the dialog and the below content, is actually created above it, see new screenshot.
How could this problem be solved? Does it require modifying our javascript or is it an issue with jquery ui itself?
Just found out myself that the way that chrome 22+ handles z-index has been altered.
Check out this awesome explanation here that I didn't write here...
http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
Basically the way I understand it is that elements which have
position: fixed
now get counted with their own z-index layer so you'll have to adjust your pages accordingly to suit.
Hope that helps!