I'm working on a signature pad feature to my app using szimek/signature_pad. When a user presses "add signature" button, the overlay container pops up. This container is used to sign and accept/clear the signature.
The problem is that I want to align control buttons in a specific way using sap.m.FlexBox, but when I add my FlexBox object to the content of the overlay object, the FlexBox object is not rendered (but the myhtml part of the oOverlayContainer's content is rendered and works fine).
Here is the code of the relevant function: LINK.
What am I missing here? Thanks!
FlexBox control doesn't have content aggregation, but items:
var oButtonContainer = new sap.m.FlexBox({
justifyContent: sap.m.FlexJustifyContent.SpaceAround,
alignItems: sap.m.FlexAlignItems.Center,
items: [oCloseButton, oSubmitSignatureButton, oClearButton],
fitContainer: true,
});
Here is a working example
Related
I am adding menu buttons to a tinymce editor. In this interface there are multiple tinymce editors loaded on the page at once. The menu buttons I am adding all do some custom styling either using the formatter or by applying custom css classes to selected elements. As part of one of the items I need to also "remove all formatting" from the selection as well as add some text around the selection. There is already a built-in plugin that does this, so I would like to just call that function from my plugin.
I got this working by using jQuery to click the "remove all formatting" button, however since there are multiple editors on the page, this makes the page scroll from where the user is at, depending on which button actually gets clicked by jQuery.
I would rather not use this approach because i feel like it would be much cleaner and provide a better result to execute the remove formatting code from my plugin, but I am unsure how to access the function I need to call.
{
type: 'menuitem',
text: 'Sample Answer',
onAction: function() {
$('button[title|="Clear formatting"]').click(); //I would like to call this function here instead of jQuery clicking a button.
editor.formatter.apply('sample_answer');
}
},
So after some more digging, it appears that a certain amount of tinymce commands can be executed using editor.execCommand RemoveFormat is one of the commands you can use, so they made it easy on me for what I need to do.
It would still be nice to know if there was a way to execute other functions if I wanted to, but the execCommand function definitely solves this issue.
{
type: 'menuitem',
text: 'Sample Answer',
onAction: function() {
editor.execCommand('RemoveFormat');
editor.formatter.apply('sample_answer');
}
},
I would like to add a button in the titlebar of a Chrome app. Most of my research has lead me to believe that the only way to do this is by disabling the default titlebar and making my own. Is there a way to simply add a button to the existing titlebar? If not, is there a resource that has detailed tutorials or examples of removing the default titlebar and making a custom titlebar?
Nope, there isn't a way to add buttons to "default" titlebars. That wouldn't be portable anyway.
What you can do is create a frameless app window:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 400,
'height': 500
},
'frame': 'none' // It will be a rectangle filled with your HTML
});
});
There is a sample app that implements this and also a draggable title bar.
You can use any kind of framework to make an area that looks like a title bar on your page's top, like Bootstrap's navbar, and implement actions like close/maximize/minimize using chrome.app.window API - get a reference to the current AppWindow and use its methods.
i have button and want to set an icon to it along with the text inside it. their is no property to add icon to button like in smartGwt .. any idea how to achieve it please help.
There are many ways of achieving this.
Way 1 : Easy way
Just set the background image via code.
myButton.getElement().getStyle().setBackgroundImage("path");
Way 2: Another easy way
Set your own html
myButton.setHtml("Pass the html string");
Way 3: Easy but gives more control
myButton.addStylename("buttonStyle")
Use css to style this
.buttonStyle{
color : red;
}
Way 4: Best way according to me
Create your own split button wrapping it around a flowpanel or horizontalPanel, with image as your first widget and button as your another widget. This gives you additional control on image and as well as button. You can have your click handler on image as well as button and you can style each one of them individually.
This is how I achieved setting an icon in my get:button.
Add an extra style class hook, mine below is btn-fa-group to your gwt button. If you use the attribute 'addStyleNames' you can define them in your stylesheet and have multiple classes.
<g:Button text=" Post Your Answer" enabled="false" ui:field="showPostButton" addStyleNames="btn btn-default btn-fa-group" />
Now in your CSS define the following declaration:
btn-fa-group:before {
color: #333333;
content: "\f0c0";
display: inline-block;
font-family: "fontawesome";
}
Some important things to note; don't forget the before selector, make sure the unicode starts with a slash and have fontAwesome installed. Alternatively you can use another glyph icon if you have the font installed.
You can set innerhtml with image in button i.e.
Button button=new Button("<image src='abc.jpg' width='200px' height='300px' />Ok");
Button bt = new Button();
bt.getElement().getStyle().setBackgroundImage("url('path/to/ur/image/imagename.extention')");
also set size of background image wrt to the size of button
bt.getElement().getStyle().setProperty("backgroundSize","30px");
Add a Css Class to your Button is probalby the best solution.
button.addStyleName("ButtonIcon");
How to define the CSS and HTML you can read here.
Yes ,you can .Gwt have a SmartGwt type button called push buttopn
com.google.gwt.user.client.ui.PushButton
You can pass Image object to it as below
Image image = new Image(GWT.getModuleBaseURL() + "/images/search-arrow.png");
RootPanel.get().add(new PushButton(image));
I have a modal jQuery dialog with a number of text fields. The text fields are affected by the standard IE 8 autocomplete (which is desired). However, when the host page is scrolled to any position but the top (either before or after the dialog has been opened), the auotocomplete div is offset by the distance of the scroll (e.g. it appears well below the associated textbox). Effectively, the dialog follows the scroll of the host page, but the autocomplete does not follow. This effect is seen even when the host page has been scrolled before opening the dialog.
$("#InterestsDetailModalContainer").dialog({autoOpen: false});
$("#InterestsDetailModalContainer").dialog("option", "title", "Additional Interests Detail");
$("#InterestsDetailModalContainer").dialog("option", "height", 600);
$("#InterestsDetailModalContainer").dialog("option", "width", 1000);
$("#InterestsDetailModalContainer").dialog("option", "modal", true);
I'm having a hard time finding anything out there that isn't talking about the jQuery autocomplete feature, which I am NOT using here.
Thanks!
You can mention the options in a single line of selector like the following:
$("#InterestsDetailModalContainer").dialog({
autoOpen: false,
title: "Additional Interests Detail",
height: 600,
width: 1000,
modal: true,
});
Try this, It's not a solution, but try this and let know weather solved.
I am designing a checkbox for a for and I absolutely cannot have the checkbox to toggle when the user clicks on its label, as this label contains a link to open a small infobox where the user gets to know what he or she is accepting by selecting the checkbox.
How can I disable checkbox toggle when clicking on its label?
The code looks simply like this (this element is inside a FormPanel items list:)
{
xtype:'checkbox',
id: 'privacyCheck',
fieldLabel: 'I have read, understood and accepted the privacy policy of ABCDE'
}
Instead of using the boxLabel property or field label on the checkbox, create a separate label object next to the checkbox. This should make it easier to manipulate your handler for the label. Otherwise, you will need to dig through the appropriate DOM element for the boxLabel (not pretty) to get at it.
I know, this topic is rather old, but I found it, searching for a solution to the exact same problem. So I'd like to share.
I needed to modify the browsers behaviour to mimick the behaviour of a legacy site, while making said site "accessible". (The for-attribute of the label tag is needed and a label without a for-attribute can not be used.)
I don't know about ExtJS, but since the legacy site uses jQuery in the frontend, I solved the problem this way:
//[...]
$(document).ready(function () {
$('.donotToogleCheckbox').click(function (event) {
event.preventDefault();
// do other stuff like displaying a dialog or something
})
});
//[...]
<label class='donotToogleCheckbox' for='myCheckbox'>DaLabel</label>
<input id='myCheckbox' name='myCheckbox' type="checkbox">
//[...]