I'm trying to set vertical alignment of the text inside the grid to middle with css:
.myGrid .x-grid3-cell {
vertical-alignment: middle !important;
}
but it doesn't work! I already tried with other properties, like row, body, inner, etc. What can I do?
You may try this if this is available in GXT 2 -
----- Options
HasVerticalAlignment.ALIGN_TOP
HasVerticalAlignment.ALIGN_MIDDLE
HasVerticalAlignment.ALIGN_BOTTOM
--- implementation
ColumnConfig<StateTestModel, String> column =
new ColumnConfig<StateTestModel, String>(gridProperties.name(), 150, "Name");
column.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
Related
I am creating a table with expandable rows in JavaFX based on this example:
http://codemonkeycorner.com/post/expandable-table-rows-in-javafx
I am also adding a CheckBoxTableCell in the simplest possible manner:
TableColumn<Person, Boolean> checkBoxCol = new TableColumn<>("check");
checkBoxCol.setCellFactory(CheckBoxTableCell.forTableColumn(itemId -> {
BooleanProperty visibleProperty = new SimpleBooleanProperty();
return visibleProperty;
}));
table.getColumns().addAll(expandCol, firstNameCol, lastNameCol, emailCol, checkBoxCol);
This works well for adding the CheckBoxes, however when I expand the table rows the checkbox will be vertically aligned to the center of the expanded row instead of stying at the top which is the behavior of the text cells.
Is there a way to change this behavior using CSS or Java code? How can I set the vertical alignment of the CheckBox within the CheckBoxTableCell?
I found a solution, setting
-fx-alignment: top-center;
in CSS worked.
You can apply in the CSS for the checkbox element cell the property "vertical-align:middle;"
I am using Fullcalendar Scheduler, and the problem is when i have many resources, it becomes not good, like this:
The live demo with litle resources: http://fullcalendar.io/js/fullcalendar-scheduler-1.3.3/demos/vertical-resource-view.html
I have an idea, it's adding an horizontal scroll, but i don't know the way, can you guys help me out ?
Thank you very much and have a great day.
.fc-view-container {
overflow-x: scroll;
}
.fc-view.fc-agendaDay-view.fc-agenda-view{
width: 500%;
}
/* **For 2 day view** */
.fc-view.fc-agendaTwoDay-view.fc-agenda-view{
width: 500%;
}
Use the combination of this configure options :
dayMinWidth: 150,
stickyFooterScrollbar : true,
dayMinWidth : guarantees your horizontal titles are visible.
stickyFooterScrollbar : guarantees horizontal scrollbar is visible.
Paresh's answer works for views with many columns, but has the limitation that views with few columns will have very wide columns.
Fullcalendar's render algorithm calculates equal column widths based on the view width, and there doesn't appear to be a simple way of setting the column widths using CSS.
Instead we need to enable scrolling on the x-axis:
.fc-view-container {
overflow-x: scroll;
}
then use jQuery to calculate the overall width of the view. Here I am using a minimum column width of 100px:
var columnCount = $('.fc-agendaDay-view th.fc-resource-cell').length;
var viewWidth = $('.fc-view-container').width();
var minViewWidth = 18 + columnCount * 100;
if (minViewWidth > viewWidth) {
$('.fc-view.fc-agendaDay-view.fc-agenda-view').css('width', minViewWidth + 'px');
}
We only change the width of the view and enable scrolling if it exceeds the current width of the view. This has the effect of setting a minimum column size of 100px.
The jQuery needs to run after the calendar.render(); call.
My CSS file has an overflow-y property but this property is not supported in 2.1 as it's a CSS3 property.
Please let me know an alternative for this property in 2.1
The following is the code:
else if (multiselectbox)
{
LiteralControl divStart = new LiteralControl("<div class='multiselectDiv'>");
cell.Controls.Add(divStart);
cell.Controls.Add(childControl);
LiteralControl divEnd = new LiteralControl("</div>");
cell.Controls.Add(divEnd);
}
and In css
.multiselectDiv
{
overflow-y: scroll;
height: 400px;
}
You can't address both axis on their own in CSS2.1.
There is only normal overflow without -x or -y.
So if you want to allow only vertical scrolling you have to adjust your width in order that there is no horizontal overflow.
I have a class that extends FlowPanel. I add a DataGrid widget and a Grid widget like this:
dataGrid.setWidth("100%");
dataGrid.setHeight("100%");
grid.setWidth("100%");
grid.setHeight("100%");
this.add(dataGrid);
this.add(grid);
this.setWidth("100%");
this.setHeight("100%");
Only the DataGrid widget appears. I've tried both switching from FlowPanel to VerticalPanel and wrapping the Grid in a FlowPanel, with no joy. I tried putting the DataGrid and the Grid into a 2 row, 1 column Grid and that didn't display anything. This is GWT 2.6.0 on Safari.
I suspect that I have a misunderstanding of what setHeight() and setWidth() are doing in this case, but I'm not sure. Is there any way to see what GWT thinks it's doing in terms of layout?
Thanks.
You tell DataGrid to take all available space inside the FlowPanel. Then you tell Grid widget to do the same. The result is that your Grid has a height of zero, since there was no space left for it after the DataGrid took 100% of the FlowPanel height.
You either have to use "50%" for heights, or make your DataGrid fixed size ("100px") and then tell the Grid to take the rest. The easiest way to achieve that is to use a LayoutPanel, and then, for example:
layoutPanel.setWidgetTopHeight(dataGrid, 0, Unit.PX, 100, Unit.PX);
layoutPanel.setWidgetTopBottom(grid, 100, Unit.PX, 0, Unit.PX);
EDIT:
This is the code that I use to resize the DataGrid:
public void resize(final boolean addHeader, final boolean addFooter) {
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
#Override
public void execute() {
// 37 is the height of header and footer based on my CSS
int height = addHeader ? 37 : 0;
if (addFooter) {
height += 37;
}
for (int i = 0; i < getRowCount(); i++) {
height += getRowElement(i).getOffsetHeight();
}
setHeight(height + "px");
}
});
}
If you use this approach, simply add your DataGrid to the FlowPanel, and then add your Grid to the FlowPanel. Call resize() on the DataGrid, and do not set any height or width on your DataGrid or Grid.
For a finer control look at the flex-box layout model. It is supported in all modern browsers.
#Patrick, regarding your comment, I use DockLayoutPanel to take care of resizing for me:
DockLayoutPanel gridPanel = new DockLayoutPanel(Unit.PCT);
gridPanel.addNorth(dataGrid, 60); //datagrid will take 60% of the panel
gridPanel.add(grid); //grid will take the remaining space
In my page, I have the below divs
<div><h2>Test</h2></div>
<div id="chart_div" style="width: 1200px; height: 600px;"></div>
I don't have any style, other than the default provided by bootstrap 3.
But the google chart is rendered with so much empty space at left (see the screenshot)
is there a way to fix this?
Fix Update :
As per davidkonrad suggestion, I added the below option in my chart
chartArea : { left: 30, top:30 }
Now it works
It is not caused by bootstrap - can easily reproduce the behaviour in a "fresh" bootstrap 3. It is caused by the enormous width of the container.
When chartArea is not defined, then chartArea.left, top, width and height is per default set to auto, which means the chart tries to center itself inside the container, both vertically and horizontally. You can observe that yourself by setting a border around the container. Set chartArea.left to force the chart-position where you want it, for example :
var options = {
chartArea : { left: 80 }
};
or
var options = {
chartArea : { left: "10%" }
};