Somewhere in materialize.min.css the slider class is getting its height assigned. I am simply not able to override this.
What I tried is to set the height in the constructor of my widget:
public class HomeViewImpl extends Composite implements HomeView {
public HomeViewImpl() {
initWidget(uiBinder.createAndBindUi(this));
int height = Window.getClientHeight();
slider.getElement().getStyle().setHeight(height, Unit.PX);
}
}
I also tried to overwrite it in my own css file and I also tried to override Widget.onLoad() with the same result. I can resize the slider afterwards but not on when its actually loaded. Since I want it to use up the entire available space it has to be resized "on load".
Please note that setting fullscreen="true" is not an option since this would mess up the arrangement of my parallax effect I am using here as well.
<m:MaterialSlider ui:field="slider" fullscreen="false">
<m:MaterialSlideItem height="100%">
<m:MaterialImage url="http://mayastepien.nl/googlecalendar/google-drinks.jpg" />
<m:MaterialSlideCaption textAlign="CENTER">
<m:MaterialTitle title="This is our big Tagline" description="Here's our small slogan." />
</m:MaterialSlideCaption>
</m:MaterialSlideItem>
<m:MaterialSlideItem height="100%">
<m:MaterialImage url="http://dreamatico.com/data_images/car/car-1.jpg" />
<m:MaterialSlideCaption textAlign="CENTER">
<m:MaterialTitle title="This is our big Tagline" description="Here's our small slogan." />
</m:MaterialSlideCaption>
</m:MaterialSlideItem>
</m:MaterialSlider>
According to the source code in
https://github.com/GwtMaterialDesign/gwt-material/blob/master/gwt-material/src/main/java/gwt/material/design/client/ui/MaterialSlider.java
..you can set the height attribute on MaterialSlider too (in your UiBinder xml).
You probably know this, but relative height only works when the height of parent elements is set too.
See for instance
Make div 100% height of browser window
Related
Demo
I have 2 + 5 blocks here, in small screen, each panel in blocks are in full width.
But in large screen, blocks are in 3:3:3 or 6:3. I want them all in a single row.
each section is contained in <div class="sapUiRespGridSpanL4 sapUiRespGridSpanM6 sapUiRespGridSpanS12 sapUiRespGridSpanXL3">
How to change it to class="sapUiRespGridSpanL12 sapUiRespGridSpanM12 sapUiRespGridSpanS12 sapUiRespGridSpanXL12" ?
I've tried to add layout in Panel, but not working.
Refrence:
sap.uxap.ObjectPageLayout Documentation
layout of blocks, blocks are in the same color, hard to specify
Finally after 1.5 hours figured out
Reason: Blocks will have to be extended from BlockBase to apply columnLayout.
Extending the BlockBase:
sap.ui.define(["sap/uxap/BlockBase"], function (BlockBase) {
"use strict";
var BlockPanel = BlockBase.extend("sap.uxap.sample.ObjectPageSubSectionSized.blocks.BlockPanel", {
metadata: {
/* no additional views provided */
}
});
return BlockPanel;
});
Then create a view and controller using the above new ui5 extended control. Use that in your page with columnLayout
xmlns:sample="sap.uxap.sample.ObjectPageSubSectionSized.blocks"
...
...
<uxap:blocks>
<sample:BlockPanel columnLayout="4"/>
</uxap:blocks>
columnLayout can't be applied if you don't extend block base. (which is really pathetic design). Nevertheless, values range from 1-4 and "auto".
Created working plnkr here
How to build custom SAPUI control?
You can wrap the target controls up with sap.uxap.BlockBase[API]. BlockBase controls are intended to be used inside sap.uxap.ObjectPageSubSection (hence the name <blocks>) and support customizing the grid spans with the property columnLayout.
Here is a demo: https://embed.plnkr.co/lSrDk9/?show=view%2FHome.view.xml,preview
<uxap:ObjectPageSubSection>
<block:MyBlock columnLayout="4"/>
<block:MyBlock columnLayout="4"/>
</uxap:ObjectPageSubSection>
Provide a not elegant, but very fast way: Overwrite CSS
<uxap:ObjectPageSubSection class="fullWidthPanel">
/* CSS specificity */
.fullWidthPanel .sapUiRespGrid.sapUiRespGridHSpace1 > div {
width: 98.88888889%;
width: -webkit-calc(100% - 1rem);
width: calc(100% - 1rem)
}
If we use Text for the header then it may take some space, so I want the Header have an icon(like Delete Icon) so I can save some space for the Header.
I tried
myCellTable.addColumn(deleteColumn,new SafeHtmlHeader(SafeHtmlUtils.fromSafeConstant
("<img width=\"30px\" height=\"30px\" src=\"image/icon/delete.png\">")));
It showed the image but the Image is very small about (10px - 10px) and it has a ugly border around the image.
SOmeone said using CUstom Header, but I couldn't override getHeaderStyleNames(). Ex:
class DeleteHeader extends Header{
#Override
public String getHeaderStyleNames(){
return "css style";
}
}
It said i have to override supertype something....!!
So how to fix it?
Try this:
header.setHeaderStyleNames("deleteHeader");
Do not render image in this header. You can use a standard TextHeader, for example.
In CSS define this style with image as a background.
Edit
Since no one has responded to my original question I think it is worthwhile adding a description of what I am attempting to accomplish, in addition to the existing description of how I have attempted to achieve my goal:
My objective is to create a DataGrid that will resize according to any change in size of its container. This is not difficult to do, but I have an additional requirement, which is to have Panel widgets above and below the DataGrid; these two Panel widgets will contain widgets that are fixed in size (e.g., a row of buttons or text input widgets). My expectation was that a HeaderPanel would be perfect for this, but this doesn't seem to work (as can be seen in my original question, below). So ... an alternative to my original question ("why doesn't this work") is: what is the best way to implement this requirement?
My original question:
I have a DataGrid in the content area of a HeaderPanel, but the detail lines in the DataGrid are not being displayed (the DataGrid column headings are showing, however). Is there an issue with using a DataGrid in the content area of a HeaderPanel? Or is this a simple misuse of the widgets? I'm adding the HeaderPanel to the RootLayoutPanel, which should provide the necessary resize notification (I think). Here is my UiBinder code:
<ui:UiBinder
xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:c='urn:import:com.google.gwt.user.cellview.client'>
<g:HeaderPanel>
<g:SimplePanel/>
<g:ResizeLayoutPanel>
<c:DataGrid ui:field='dataGrid'/>
</g:ResizeLayoutPanel>
<g:HorizontalPanel>
<g:Button
ui:field='addRecordButton'
text='Add Record'/>
<g:Label ui:field='numberOfRecordsLabel'/>
</g:HorizontalPanel>
</g:HeaderPanel>
</ui:UiBinder>
and here is the Java code:
public class TempGWT implements EntryPoint {
#UiField
Button addRecordButton;
#UiField
DataGrid<Record> dataGrid;
#UiField
Label numberOfRecordsLabel;
private ArrayList<Record> _recordList;
interface TempGWTBinder extends UiBinder<Widget, TempGWT> {
}
private static class Record {
private String _field1;
}
#Override
public void onModuleLoad() {
_recordList = new ArrayList<Record>();
TempGWTBinder binder = GWT.create(TempGWTBinder.class);
Widget widget = binder.createAndBindUi(this);
Column<Record, String> field1Column = new Column<Record, String>(new TextInputCell()) {
#Override
public String getValue(final Record record) {
return record._field1;
}
};
dataGrid.addColumn(field1Column, "Field 1");
RootLayoutPanel.get().add(widget);
}
#UiHandler("addRecordButton")
public void onAddRecordButtonClick(final ClickEvent event) {
Record record = new Record();
record._field1 = "Record " + (_recordList.size() + 1);
_recordList.add(record);
dataGrid.setRowData(_recordList);
numberOfRecordsLabel.setText("Records:" + _recordList.size());
}
}
I've attempted to trace the execution and, although I'm not certain, it looks as though the following happens when I change the size of the browser window and the "resize" request is received by the DataGrid (I've skipped some of the "unimportant" methods):
DataGrid#onResize
HeaderPanel#forceLayout
ScrollPanel#onResize
The DataGrid object contains a HeaderPanel, which contains the headings for the DataGrid and a ScrollPanel. I don't know whether this is the key to the problem, but the ScrollPanel in the DataGrid's HeaderPanel contains a DataGrid$TableWidget object, and TableWidget does not implement RequiresResize; the ScrollPanel#onResize method only sends the resize to its child if the child implements RequiresResize.
The Tables and Frames section of the GWT Developer's Guide makes it clear that I just needed to use a width/height of 100% for the DataGrid! Like so:
<c:DataGrid
ui:field='dataGrid'
width='100%'
height='100%'/>
I little speak english :( (i use gtranslate...)
I create GWT2.5(with requestfactory)+GXT3 MVP application
My Main View is a BorderLayout
west: shortcut panel(verticalLayoutContainer)
south: toolbar (status)
north: toolbar (menu)
my codes:
DesktopView.ui.xml (Main view):
http://pastebin.com/xbeUzDwi
DesktopView.java
http://pastebin.com/WguE6CVf
DesktopActivity.java
http://pastebin.com/adejJwu0
about grid view:
http://pastebin.com/nFPrGpd1
my MVP auto call createGrid()
error image(pagingToolbar)
if i replace in gridView
verticalLayoutContainer.add(grid, new VerticalLayoutData(1, -1)); => verticalLayoutContainer.add(grid, new VerticalLayoutData(1, 1));
error image(do not show grid)
what is the problem my code ? ???
but if i add code to DesktopActivity:
public void onEvent(....){
.
.
DesktopActivity.getContentPanel().setWidget(event.getWidget());
if (event.getWidget() instanceof VerticalLayoutContainer) {
((VerticalLayoutContainer) event.getWidget()).onResize();
}
direct call onResize, then there is no problem if you add...
this GXT3 bug or I make a mistake on something
Thank you in advance for your help
The BorderLayoutContainer does not automatically find the size of the edge components. You will have to define the sizes of these areas manually.
<ui:with type="com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData"
field="northData">
<ui:attributes size="30" />
</ui:with>
This section says that the north section of the container should be 30 pixels high. The same can be done for all edges.
Here is a miminal UI demonstrating my problem. It is the usual UIBinder boilerplate, plus the three widgets: TabLayoutPanel, ScrollPanel, TextArea. I want the TextArea to take up all the available space of the tab, and I want it to have a scroll bar if it can't fit. But this code yields a TextArea that is two lines tall. How do you fix this? Why is it ignoring the height?
In the ui.xml file:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
.scrollPanel {
height: 100%;
}
.textArea {
height: 100%;
}
</ui:style>
<g:TabLayoutPanel barHeight="20" barUnit='PX'>
<g:tab>
<g:header>Text Area</g:header>
<g:ScrollPanel styleName='{style.scrollPanel}'>
<g:TextArea ui:field='textArea' styleName='{style.textArea}'></g:TextArea>
</g:ScrollPanel>
</g:tab>
</g:TabLayoutPanel>
</ui:UiBinder>
And in the Java file:
package com....client;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.ResizeComposite;
import com.google.gwt.user.client.ui.TextArea;
import com.google.gwt.user.client.ui.Widget;
public class BugDemoLayout extends ResizeComposite {
private static BugDemoLayoutUiBinder uiBinder = GWT.create(BugDemoLayoutUiBinder.class);
interface BugDemoLayoutUiBinder extends UiBinder<Widget, BugDemoLayout> {}
#UiField TextArea textArea;
public BugDemoLayout() {
initWidget(uiBinder.createAndBindUi(this));
StringBuilder junk = new StringBuilder();
for (int i=1; i<300; i++) {
junk.append("Line " + i + "\n");
}
textArea.setText(junk.toString());
}
}
The module file simply adds the ui to the root:
public void onModuleLoad() {
BugDemoLayout bd = new BugDemoLayout();
RootLayoutPanel.get().add(bd);
TabLayoutPanel and ScrollPanel both implement the RequireResize interface and automatically resize to the available space using absolute positioning.
You specified a relative height (100%) for the content inside the ScrollPanel. This doesn't work because the size in the parent isn't explicitly set (see here for more details).
So you can either:
Set an explicit size in the ScrollPanel in pixel and then set the Textarea height to 100%.
Extend the TextArea and implement the RequiresResize interface (implement the onResize() method where you set the height/width of the TextArea
The second approach is the cleaner recommend one as it also resizes the TextArea when you resize the browser window.
It would look something like that:
TextArea:
public class ResizableTextArea extends TextArea implements RequiresResize {
public void onResize() {
int height = getParent().getOffsetHeight();
int width = getParent().getOffsetWidth();
setSize(width+"px",height+"px");
}
}
You have to put your TabLayoutPanel into a RootLayoutPanel. This will ensure that there is an unbroken chain of LayoutPanels or Widgets that implement RequiresResize/ProvidesResize interfaces all the way down to your custom TextArea.
You're placing a TextArea inside of a ScrollPanel, but the ScrollPanel isn't necessary as the TextArea already has scrollability built-in. If you take out the ScrollPanel, it should work fine (in my testing it works).
I'm going to skip the sizing part of this question, but answer the scrolling part (as that never seemed to be resolved?).
I had the same problem, so I placed a ScrollPanel inside the tab, and nested an HTMLPanel within it, sized to 100% the width and height of that parent ScrollPanel. Then, I used panel.add( new HTML("my text" ) ); to populate it.
I also replaced "\n" with "<br />" in my actual long text string. (That was applicable for my needs).
Now, that's not quite the same thing as a TextArea, of course, but it does allow you to display long running scrolling text inside of a TabLayoutPanel.