I have two labels, two datepickers, and a submit button within a DockLayoutPanel. I'm trying to just get the button to show up in the center of the panel.
Here is the code I am trying to get just to get the button centered:
Button b = new Button("Submit", new ClickListener()
{
public void onClick(Widget sender)
{
getAwards(text.getText(),text2.getText());
}
});
b.setWidth("80px");
b.addStyleName("gwt-Button");
and within my css:
.gwt-Button{
margin-left:auto;
margin-right:auto;
}
What edits or method do I have to take to actually get this to work?
Edit: For extra information, this button is being added to a DockLayoutPanel
Try:
.gwt-Button{
position:absolute;
left:50%;
margin-left: -40px; /* Width Button /2 */
}
Try disabling the loading of whatever default GWT theme you are using (such as clean) in your gwt.xml file, it may be messing with things, since you're using the same class name.
Alternatively, just use a CSS class name other than "gwt-Button" here.
Related
I have a VerticalLayout filled with components in Vaadin. PLease i will to print this layout exactly as it is to an A4 paper. Any Idea how to do this, Code Sample will be great.
Straight out of the Vaadin doc…
Printing the Browser Window
Vaadin does not have special support for launching the printing in browser, but you can easily use the JavaScript print() method that opens the print window of the browser.
Button print = new Button("Print This Page");
print.addClickListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
// Print the current page
JavaScript.getCurrent().execute("print();");
}
});
The button in the above example would print the current page, including the button itself. You can hide such elements in CSS, as well as otherwise style the page for printing. Style definitions for printing are defined inside a #media print {} block in CSS.
There's no "built-in" API for printing in Vaadin.
You have to use the browser's native printing API.
I've created a suggest box and generated HTML page with huge text, so I can scroll.
1. Show suggest list
2. Scroll page
The popup box with suggestion list moves with scrolled page, but I want that it will neither hide when page scrolls nor move with page.
As I understand that suggest popup has absolute position. But is there some non css solution.
Answer to:
I've tried add scroll handler to Window, but I've found out that handle only event when I have and right of them moves, only in this case. If I have one scroll to scroll page like in case with large text - nothing invokes
When constructing a SuggestBox you can provide your own SuggestOracle, TextBox and SuggestionDisplay. DefaultSuggestionDisplay can be used to hide suggestion list. You can do it in Window.scrollHandler.
Here is the code:
MultiWordSuggestOracle oracle = new MultiWordSuggestOracle();
oracle.add("one");
oracle.add("two");
oracle.add("three");
TextBox box = new TextBox();
final DefaultSuggestionDisplay display = new DefaultSuggestionDisplay();
SuggestBox suggestBox = new SuggestBox(oracle, box, display);
Window.addWindowScrollHandler(new ScrollHandler() {
#Override
public void onWindowScroll(ScrollEvent event) {
display.hideSuggestions();
}
});
Note, that you need to use DefaultSuggestionDisplay - see documentation on deprecated hideSuggestionList method.
I hope that the example explains it all.
I've also checked that if you don't use own SuggestionDisplay it uses DefaultSuggestionDisplay anyway. So you can do it even simpler.
((DefaultSuggestionDisplay) suggestBox.getSuggestionDisplay()).hideSuggestions();
EDIT:
If not the whole window is scrolled but only content of some panel, you can add a ScrollHandler to the panel:
panel.addDomHandler(new ScrollHandler() {
#Override
public void onScroll(ScrollEvent event) {
((DefaultSuggestionDisplay) suggestBox.getSuggestionDisplay()).hideSuggestions();
}
}, ScrollEvent.getType());
I have a wicket bootstrap DateTextField on a panel inside modal. When datepicker is shown from click, datepicker is attached to the root page, not the modal.
That causes a problem: without adding some z-index to datepicker, I cannot see it on top of modal.
When I blur from the picker, it should close. Somehow, due the fact the picker is not child of modal, clicking outside datepicker closes it only, if it is clicked outside the modal. Inside modal nothing happens.
I can tweak this by autoclose, but when you go to input and manually use backSpace to clear the value, there is no a way to close datepicker by clicking somewhere inside the modal.
Some html to make it clear:
<html>
<panel>
<modal>
<input>datefield is here</input>
</modal>
<panel>
<datepicker comes here>
</html>
How to get datepicker attached to modal, or somehow else fix the issue of blur inside the modal?
I have tried to attach the panel a click event that hides datepicker, but it hides the datepicker right away when it opens.
Edit:
Click to modal does nothing, although html is moved artificially there and is placed correctly in DOM tree. Thanks to #Gavriel about insight to moving stuff between DOM elements, though.
Edit2:
Code to reproduce situation:
class MyPanel extends Panel {
DateTextField field = new DateTextField("foo");
(...)
add(field);
}
class MyPage extends WebPage {
(...)
ModalWindow modal = new ModalWindow("modal");
modal.add(new MyPanel());
(...)
}
html for the panel, containing the dateTextField
<html>
..
<input wicket:id="foo"></input>
..
</html>
As you see from snippet, java code generates the jQuery part.
Edit3:
I speak about this creature:
[DateTextField sources] https://github.com/l0rdn1kk0n/wicket-bootstrap/blob/master/bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/form/DateTextField.java
Edit4:
Hmm.. I added in Javascript a blur event listener inside the input in modal and that blur even did not work. So it turns out that the real question in hand is how to get onblur work inside modal. Because that is what is broken!!
Edit5:
Sorry, cannot give fiddle. From Edit3 you see sources I use for picker and what I really call is this function:
protected CharSequence createScript(final DateTextFieldConfig config) {
return $(this).chain("datepicker", config).get();
}
which is inside java class, so not JavaScript at all although syntax is looking so similar. For my understanding fiddles take no java code inside them. Wicket needs the java part, I am sorry about it.
For fiddle askers I found similar situation on this fiddle: http://jsfiddle.net/VytfY/227/ - works 100% ok, similar technologies I mention here, no use to my problem.
Last edit:
$('html').on('click',function(e){
if(e.target.className.indexOf('datepicker') == -1 &&
e.target.className != 'next' && e.target.className != 'prev' &&
e.target.className != 'year' && e.target.className != 'month'){
if ($('.datepicker').get(0) != undefined){
$('.datepicker').get(0).remove();
}
}
});
Thanks #Mathew you made my day, above is what it ended to be. I added to input element a class datepickerContainer so clicking it does not hide picker.
Thanks folks, this is done!
One more: for IE, use:
var canvas = $('.datepicker').get(0);
canvas.parentNode.removeChild(canvas);
instead of direct remove. Remove not yet supported, even IE11.
The idea is to move the div created by datepicker.
Use http://api.jqueryui.com/datepicker/#option-beforeShow You can see an example how it is used in a slightly different use case: How to add a custom class to my JQuery UI Datepicker
When you append an element to the DOM that was already inside the DOM, it is removed from the original place, in other words if you use $("#dst").append("#src"), then src element is moved to dst.
Update: I think there's a more straightforward way: You provide the id of the div you want it to use. This way you can have this div inside your modal dialog.
$("#button").on('click', function(){
$("#datepicker").datepicker();
});
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button id="button">choose date</button>
<div id="datepicker"></div>
<div>footer</div>
$("#button").on('click', function(){
var dt=$("#datepicker").show();
dt.datepicker().on('change', function (ev) {
$(dt).hide();
});
$('html').on('click',function(e){
if(e.target.id !='button'){
$(dt).hide();
}
});
});
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button id="button">choose date</button>
<div id="datepicker"></div>
<div>footer</div>
I m a newbie in Vaadin and I am using a TabSheet where I attach some tabs. I was wondering if I could get some more functionality from their captions.
For instance, when a tab is selected and the user clicks its caption then a dropdown menu can appear.
I have already experimented with the existing listeners of TabSheet and I concluded that I have to make a custom listener. The thing is that I cannot find a way to fire the event when I click on the selected tab caption...
You could use SelectedTabChangeListener on a TabSheet. It would fire the event when the caption is clicked, and you could reselect your current tab, etc.. It would be cumbersome.
Why not use the MenuBar? Isn't it exactly what you want? https://demo.vaadin.com/valo-theme/#!menubars
I had the same problem (Vaadin 7.4), what you can do is you can surround the tab caption with a <div onclick="...">captionText</div> and add a JavaScript callback function:
final TabSheet sheet = new TabSheet();
sheet.setTabCaptionsAsHtml(true); // don't forget this!
// This is the callback
JavaScript.getCurrent().addFunction("clickedTab", new JavaScriptFunction() {
#Override
public void call(JsonArray arguments) {
LOGGER.info(arguments.getString(0)); // this is 'some identifier'
}
});
final TabSheet.Tab tab = sheet.addTab(component, "<div onclick=\"clickedTab('some identifier');\">captionText/div>");
I've tried using the new FileDownloader in Vaadin7. Unfortunately, it needs an AbstractComponent for the "extend" component (where it listens for the clicks)
Is there a way to use it with combobox items? As they are not AbstractComponents and thus do not fit with the "extend" method.
The Vaadin forums have discussed this a lot, and there is no scheme now using FileDownloader or the similarly functioning BrowserWindowOpener. They all only work on AbstractComponents, and thus don't work on Action handlers for Table and Tree, or row click handlers on Table, or MenuItem in Menu, etc. The same applies to selected elements in their various select boxes.
You have to revert to the popup window style (so browsers will need to allow popups for it to work) using a regular click/valuechange listener, creating a Resource and passing it to the deprecated, but still working, Page.getCurrent().open(Resource...) method.
Here is my work-around. It works like a charm for me. Hope it will help you.
This example is for the MenuItem, but you can modify for ComboBox.
Create a button and hide it by Css (NOT by code: button.setInvisible(false))
final Button downloadInvisibleButton = new Button();
downloadInvisibleButton.setId("DownloadButtonId");
downloadInvisibleButton.addStyleName("InvisibleButton");
In your theme, add this rule to hide the downloadInvisibleButton:
.InvisibleButton {
display: none;
}
When the user clicks on menuItem: extend the fileDownloader to the downloadInvisibleButton, then simulate the click on the downloadInvisibleButton by JavaScript.
menuBar.addItem("Download", new MenuBar.Command() {
#Override
public void menuSelected(MenuBar.MenuItem selectedItem) {
FileDownloader fileDownloader = new FileDownloader(...);
fileDownloader.extend(downloadInvisibleButton);
//Simulate the click on downloadInvisibleButton by JavaScript
Page.getCurrent().getJavaScript()
.execute("document.getElementById('DownloadButtonId').click();");
}
});