DialogBox is in fact set of <div> elements. There is basically TitleBar, MainContent and the Footer. By default adding elements to DialogBox will throw them into main Content.
What I want is to throw something into footer. Its basically this div: <div class="dialogBottomCenterInner">
I made this method inside the class that inherits from DialogBox to wrap the footer:
public HTMLPanel getFooter() {
Element td = getCellElement(2, 1);
td.setId("footer"); //html at this point = <div class="dialogBottomCenterInner" id="footer"></div>
HTMLPanel panel = HTMLPanel.wrap(td);
return panel;
}
Unfortunatelly it fails at HTMLPanel.wrap(td);with
java.lang.AssertionError: null
There is no footer in a DialogBox. The element you refer to is a part of a border that surrounds the DialogBox.
Related
I'm struggling with plugging in the correct selector into jquery. When I plug in ".accordionButton" the entire div is clickable and the functionality works great. However, I want to make only the "h3.toggle a" clickable, but plugging that selector in doesn't work. Is there something else in the jquery I need to change here? Any advice is greatly appreciated. Thanks!
The HTML:
<div class="accordionButton">
<div class="case-top">
<div class="case-left"></div>
<div class="case-right">
<h3 class="toggle">Our Strategy and Results</h3>
</div>
</div><!--end case-top-->
</div><!--end button-->
<div class="accordionContent">sliding content here</div>
The JQUERY:
$(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton h3.toggle a').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton h3.toggle a').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
});
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$('.accordionButton h3.toggle a').mouseover(function() {
$(this).addClass('over');
//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass('over');
});
$('.accordionContent').hide();
});
You are using
$(this)
but you change the selector, you need to change all $(this) selectors to
$('.accordionButton')
FIDDLE
Ok, here is where I'm at... the buttons are now working correctly, but on click all the instances of .accordionContent open, not just next one. ( FYI, I removed the mouseover from this code snipped)
Jquery
$(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton h3.toggle a').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton h3.toggle a').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($('.accordionButton').next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON (correct)
$(this).addClass('on');
//OPEN THE SLIDE
$('.accordionButton').next().slideDown('normal');
}
});
I'm guessing the lines:
$('.accordionButton').next().slideDown('normal');
and
if($('.accordionButton').next().is(':hidden') == true) {
are the lines which need editing. I need these two lines to open and close just the "next" .accordionContent instances not all of the instances together.
I have a script that on click changes the class style but after he does that I want him to change the next TD or DIV style as well.
$('.can-select').click(function(e){
$(this).addClass("is-selected");
$(this).children('.can-select-text').addClass("is-selected");
});
can-select is a div and a image class that are clickable.
can-select-text its a div for text
next td or div is class is "nothing".
here is the fiddle defined as per your requirement.
JSFIDDLE
JS CODE
$('.can-select1').click(function (e) {
$(this).addClass("is-selected");
$(this).find('.can-select').addClass("is-selected");
$(this).children('.can-select-text').addClass("is-selected");
var nextTd;
nextTd = $(this).parent().find('.nothing1');
nextTd.find('.nothing').addClass("can-select1");
nextTd.addClass("can-select1");
nextTd.removeClass('nothing1')
});
I need to place several DatePicker widgets into the row. If there is not enough width to place all of them the rest widgets shift to the next row. It is the default HTML layout behavior. So I am trying to use FlowPanel. With any other widgets (Buttons, Labels, ...) everything ok, but DatePickers are placed one widget to the row. Here's the code
FlowPanel panel = new FlowPanel();
DatePicker picker1 = new DatePicker();
DatePicker picker2 = new DatePicker();
panel.add(picker1);
panel.add(picker2);
RootPanel.get().add(panel);
Any suggestions to solve this problem?
Thanks.
DatePicker's root element is a table so you'd have to give it a display: inline-table style, or put it in an element with display: inline-block style.
The following shouldn't break any other use of DatePicker, but won't work in IE 6 or 7; it's the Simplest Thing That Could Possibly Workâ˘:
.gwt-DatePicker { display: inline-table; }
If you really need IE 6/7 support, you could try the following, in a CssResource:
#if user.agent ie6 {
.gwt-DatePicker { display: inline; }
}
#else {
.gwt-DatePicker { display: inline-table; }
}
I am using GWT2.3 in my project.
I want to increase editableTextBox width when user click on editableTextCell.
Problem is My Column width is 200 Px. when user clicks on editableTextCell then that TextBox width is around 125px in EditableTextCell is less as compare to column width.
I added EditTextCell in Celltable's column
Column stringColumn = new Column(new EditTextCell()) {
// My Code
}
cellTable.addColumn(stringColumn, "MyColumn");
cellTable.setColumnWidth(checkBoxColumn, 200, Unit.PX);
I tried following way to increase TextBox width but problem is I cannot edit in textbox + focus not losses
#Override
public void onBrowserEvent(Context context, Element elem,Record object, NativeEvent event) {
String type = event.getType();
int editedTexBoxSize = (cellTable.getOffsetWidth()-100)/cellTable.getColumnCount();
if(elem.getInnerHTML().startsWith("<INPUT")){
String test = elem.getInnerHTML();
// test = <INPUT tabIndex=-1 value=P __eventBits="2048"></INPUT>
test= test.replace("value", " size="+editedTexBoxSize+" value");
// test = <INPUT tabIndex=-1 size=131 value=P __eventBits="2048"></INPUT>
elem.setInnerHTML(test);
}
super.onBrowserEvent(context, elem, object, event);
}
I want to Increase(set) TextBox width appear in EditTextCell is equal to column Width.
Any Solution ?
In my project I do that:
cellTable.getColumn(cellTable.getColumnIndex(column)).setCellStyleNames(CELL_CSS);
.edit-cell input {
width: 290px;
}
Finally the answer !
I tried this even simplier using UIBinder by adding :
.edit-cell input {
width: 30px;
text-align: right;
}
Then for the cell table I added
<c:CellTable
addStyleNames='{style.edit-cell}'
ui:field='itemTable' />
Wonderful !
You'll need to create a custom component. The out of the box EditTextCell does not allow you to set the size attribute of the input field, just the column width.
Have a look at the ValidateableInputCell impl here: In search of a GWT validation example... where art thou? for an example of how to craft a custom cell.
Admittedly the validation does not yet work but the ability to set the size on the input field within the cell does.
I'm using GWT 2.4. I have a view with some simple content ...
final Image ajaxImage = new Image("loading.gif");
final Grid grid = new Grid(1, 2);
grid.setText(0, 0, "Loading...");
grid.setWidget(0, 1, ajaxImage);
this.container = new FlowPanel();
this.container.add(grid);
rootPanel = new SimplePanel();
rootPanel.add(this.container);
I would like this content to be centered horizontally and vertically in the containing panel, which is a FlowPanel, if that matters. How do I do that?
Thanks, - Dave
I know how to do it in a verticalpanel.
VerticalPanel panelPrincipal3 = new VerticalPanel();//Esto es el panel central, donde se centra todo
panelPrincipal3.setWidth("100%");
panelPrincipal3.setHeight("100%");
panelPrincipal3.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
panelPrincipal3.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
panelPrincipal3.add(/*your panel*/);//here yo add whatever yo want, and should be centered
if you were to put your FlowPanel as a direct child of your RootPanel, you can try to set its height to 100%. so if you only have a grid as a child component for your container, you can set its alignments like this:
container.setCellHorizontalAlignment( grid, HasHorizontalAlignment.ALIGN_CENTER );
container.setCellVerticalAlignment( grid, HasVerticalAlignment.ALIGN_MIDDLE );
But if you ever change your mind and you'll switch to UiBinder, you can do something like this:
<g:VerticalPanel spacing="0" width="100%" height="100%" ui:field="mainPanel">
<g:Cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
<!-- content goes here -->
</g:Cell>
</g:VerticalPanel>
with css? margin:0 auto; and position:absolute; top:50%; ?