How can I render a grid column as multiline grid column using GXT 3 grids.
e.g
ColumnConfig<ExceptionEntry, String> name = new ColumnConfig<ExceptionEntry, String>(props.name(), 50, "Name");
name.setColumnStyle(new SafeStyles(){
#Override
public String asString() {
return // what styles to use for multiline rendering;
}
});
name.setCell(new AbstractCell<String>() {
#Override
public void render(com.google.gwt.cell.client.Cell.Context context,
String value, SafeHtmlBuilder sb) {
??? what needs to be done to render the column as multiline column
}
});
You can do that the easy and the hard way.
The easy one:
name.setCell(new AbstractCell<String>() {
#Override
public void render(com.google.gwt.cell.client.Cell.Context context, String value, SafeHtmlBuilder sb) {
sb.appendHtmlConstant("<div style=\"white-space: normal;\" >" + value + "</div>");
}
});
The hard (but much better) way:
1) Create custom GridAppearance to be used instead of default one from your theme:
import com.google.gwt.core.client.GWT;
import com.sencha.gxt.theme.base.client.grid.GridBaseAppearance;
public class YourGridAppearance extends GridBaseAppearance {
public interface YourGridStyle extends GridStyle {
}
public interface YourGridResources extends GridResources {
#Source({ "com/sencha/gxt/theme/base/client/grid/Grid.css", "YourGrid.css" })
#Override
YourGridStyle css();
}
public YourGridAppearance() {
this(GWT.<YourGridResources> create(YourGridResources.class));
}
public YourGridAppearance(YourGridResources resources) {
super(resources);
}
}
2) Copy /theme-you-use/client/grid/Grid.css to YourGrid.css and put it in the same folder where you've created YourGridAppearance class. Here is an example based on Grey theme:
#CHARSET "UTF-8";
.rowHighlight {
border: 1px dotted #535353;
}
.rowAlt .cell {
background-color: #FAFAFA;
}
.rowOver .cell {
background-color: #EEEEEE;
}
.cell {
border-color: #FAFAFA #EDEDED #EDEDED;
border-right: 0 solid #EDEDED;
font: 14px tahoma,arial,verdana,sans-serif;
}
.cellSelected {
background-color: #C9C9C9 !important;
color: #000000;
}
.cellInner {
white-space: normal;
line-height: 15px;
}
.columnLines .cell {
border-right-color: #EDEDED;
}
.rowOver .cell,.rowOver .rowWrap {
border-color: #DDDDDD;
}
.rowWrap {
border-color: #FAFAFA #EDEDED #EDEDED;
border-right: 0 solid #EDEDED;
border-style: solid;
border-width: 1px;
overflow: hidden;
}
.rowSelected .cell,.rowSelected .rowWrap {
background-color: #DFE8F6 !important;
border-color: #A3BAE9;
}
.footer {
background: #F7F7F7 none repeat scroll 0 0;
border-top: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
display: block;
overflow: hidden;
position: relative;
}
The most important part of it is this one:
.cellInner {
white-space: normal;
}
3) Replace default grid appearance with your custom one. To do that you have to add the following lines to your-project.gwt.xml:
<replace-with class="package.name.of.your.custom.theme.class.YourGridAppearance">
<when-type-is class="com.sencha.gxt.widget.core.client.grid.GridView.GridAppearance" />
</replace-with>
Related
I want the color of the bars in the menu icon to change on mouse hover. So far I'm only able to change the background color. Any suggestions?
Fiddle: https://jsfiddle.net/Walter69/nwczmdah/5/
.container {
display: inline-block;
cursor: pointer;
}
.container:hover {
color: #fff!important;
background: #FF0000;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #000;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
transform: rotate(-45deg) translate(-9px, 6px);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
transform: rotate(45deg) translate(-8px, -8px);
}
You need to add the color when hover the container:
.container:hover .bar1, .container:hover .bar2, .container:hover .bar3 {
background: #FFF;
}
https://jsfiddle.net/nwczmdah/6/
When first loading the slick-carousel while using flex-boxes, the width of the slick-slide and the slick-track are set to 0 which hides the first slide until it triggers the next slide. If there is only one slide, it's hidden and will never show unless the window is manually resized.
First wrap your carousel with a container:
.myContainer {
position: fixed;
top: 0;
left: 0;
height: 100%;
width:100%;
}
<div class="myContainer">
<div class="myCarousel" (click)="navigate()"></div>
</div>
Next, be sure is to have min-height & min-width set to 0 for the .slick-slider.
CSS:
note the changes from the default slick-carousel styles are commented
// new definition
.slick-slider {
min-height: 1px;
min-width: 1px;
}
.slick-slide {
float: left;
[dir="rtl"] {
float: right;
}
img {
display: block;
}
&.slick-loading img {
display: none;
}
display: none;
&.dragging img {
pointer-events: none;
}
.slick-initialized {
display: block;
// set height and width
height: 100%; // helps to fix the loading issue when using flex-box - stretches slide vertically
width: 100% !important; // helps to fix the loading issue when using flex-box - shows slide upon load
}
.slick-loading {
visibility: hidden;
}
.slick-vertical {
display: block;
height: auto;
border: 1px solid transparent;
}
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
// set height
width: 100% !important; // helps to fix the loading issue when using flex-box
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
.slick-loading {
visibility: hidden;
}
}
.slick-initialized {
display: block;
// set height and width
height: 100%; // helps to fix the loading issue when using flex-box - stretches slide vertically
width: 100% !important; // helps to fix the loading issue when using flex-box - shows slide upon load
}
.slick-loading {
visibility: hidden;
}
.slick-vertical {
display: block;
height: auto;
border: 1px solid transparent;
}
Finally, make sure you have defined the responsive setting when initializing your slick-slider:
// initialize carousel
private initializeCarouselSettings(){
this.carousel.slick({
accessibility: false,
autoplay: false,
arrows: false,
slidesToShow: 1,
pauseOnHover: false,
pauseOnFocus: false,
draggable: false,
swipe: false,
touchMove: false,
centerMode: true,
fade: this.isTransitionTypeFade(),
autoplaySpeed: this.getSlideInterval(),
speed: this.getSpeedValue(),
responsive: [ // fixes the loading issue when using flex-box
{
breakpoint: 1024,
settings: {
mobileFirst: false,
infinite: true,
speed: this.getSpeedValue(),
slidesToShow: 1,
centerMode: true,
variableWidth: false,
focusOnSelect: false
}
}
]
});
}
Hello I have some less code and I'm trying to leverage less to get the following:
What I'm expecting:
#media only screen {
#testphone {
display: block;
background-color: blue;
}
}
My code:
#testPhone {
.testPhone({
& {
display: block;
background-color: blue;
}
});
}
.testPhone( #rules ){
.startQuery();
.screenOnly( #myQuery );
.create( #newQuery; #rules );
}
.create( #newQuery; #rules ){
#{newQuery} {
#rules();
}
}
.screenOnly( #myQuery ){
#newQuery: "#{myQuery} only screen";
}
.startQuery(){
#myQuery: "#media";
}
What I'm getting:
#testPhone "#media only screen" {
display: block;
background-color: blue;
}
What I think is going wrong:
In the .create mixin when I call #{newQuery} to interpolate #newQuery variable, it isn't removing the string off of that variable.
..................................................
Existing mixins:
.mixin_1 {
height: 1px;
}
.mixin_2 {
height: 2px;
}
.mixin_3 {
height: 3px;
}
.function(#get) {
#get();
}
CALL:
.a{
.function(mixin_1);
}
.b{
.function(mixin_2);
}
.c{
.function(mixin_3);
}
RESULT:
.a{
height: 1px;
}
.b{
height: 2px;
}
.c{
height: 3px;
}
Question: how to do this? It's possible with current language specifications?
You cannot currently do a dynamic call to a mixin based off a variable directly. You can make your function() mixin into a "caller" or "getter" mixin in which you register the mixins that can be called by your function() mixin, like so (which utilizes pattern matching):
LESS
.function(#get) {
.-(#get); //call for mixin
//register mixins you want to call with function
.-(mixin_1) { .mixin_1; }
.-(mixin_2) { .mixin_2; }
}
.mixin_1 {
height: 1px;
}
.mixin_2 {
height: 2px;
}
#block {
.function(mixin_1);
}
Outputs
.mixin_1 {
height: 1px;
}
.mixin_2 {
height: 2px;
}
#block {
height: 1px;
}
Of course, if you want the mixins invisible to the css, then change them to this:
LESS change (added parenthesis)
.mixin_1() {
height: 1px;
}
.mixin_2() {
height: 2px;
}
New Output
#block {
height: 1px;
}
Do you need it?
That level of abstraction can be useful at times, but often simply a pattern matching on the mixins will suffice. You would have to determine that. So with this simple example, it would be better to reduce to something like this:
.setHeight(1) {
height: 1px;
}
.setHeight(2) {
height: 2px;
}
#block {
.setHeight(1);
}
More complex examples of mixins may not be so easily reduced, and then a mixin like what you want may be useful.
I think your code do same thing like this:
.mixin_1() {
height: 1px;
}
.mixin_2() {
height: 2px;
}
#block {
.mixin_1();
}
And output will be:
#block {
height: 1px;
}
I was asking about little different thing. However I found solution:
.function(#get) {
.-(#get); //call for mixin
//register mixins you want to call with function
.-(mixin) { .mixin; }
}
#block {
.mixin() {
height: 1px;
}
.function(mixin);
}
#block {
.mixin() {
height: 2px;
}
.function(mixin);
}
It outputs exactly what i wanted:
#block {
height: 1px;
}
#block {
height: 2px;
}
Overall, thanks for help.
I'm looking for a solution to use a mixin for browser-specific CSS hacks.
I'm using JavaScript to add the browser tag in the HTML class. Like .ie .ie7 .ie8 .ie9
I would like to use the mixin like:
.box-test {
margin: 10px;
#include browser(ie7) {
margin: 20px;
}
}
DESIRED OUTPUT:
.box-test {
margin: 10px;
}
.ie7 .box-test {
margin: 20px;
}
the mixin i tried to make:
#mixin browser($browserVar) {
#if $browserVar == ie7 {
.ie7 { #content }
}
#else if $browserVar == ie8 {
.ie8 { #content; }
}
#else if $browserVar == ie9 {
.ie9 { #content; }
}
}
the problem is the output is:
.box-test {
margin: 10px; }
.box-test .ie7 {
margin: 20px; }
The absolute simplest mixin would be like so:
#mixin legacy-ie($ver: 7) {
.ie#{$ver} & {
#content;
}
}
Output:
.baz {
background: #CCC;
#include legacy-ie {
background: black;
}
}
If you wanted to emit styles that work for multiple IE versions at once without duplication, then this would be one way to do it:
$default-legacy-ie: 7 8 9 !default;
#mixin legacy-ie($versions: $default-legacy-ie) {
$sel: ();
#each $v in $versions {
$sel: append($sel, unquote('.ie#{$v} &'), comma);
}
#{$sel} {
#content;
}
}
.foo {
background: red;
#include legacy-ie {
background: green;
}
}
.bar {
background: yellow;
#include legacy-ie(7 8) {
background: orange;
}
}
Output:
.foo {
background: red;
}
.ie7 .foo, .ie8 .foo, .ie9 .foo {
background: green;
}
.bar {
background: yellow;
}
.ie7 .bar, .ie8 .bar {
background: orange;
}
If you want to be able to suppress all of the IE kludges all you need to add is one variable and an #if block:
$enable-legacy-ie: true !default;
#mixin legacy-ie($ver: 7) {
#if $enable-legacy-ie {
.ie#{$ver} & {
#content;
}
}
}
Set $enable-legacy-ie to false at the top of the file you don't want to have the IE specific styles, set it to true if you do want the styles included. You could easily write a reverse mixin to hide styles that old IE can't make use of so that the IE specific file stays nice and small.
You're overcomplicating things. :) It could be as simple as that:
.box-test {
margin: 10px;
.ie-7 & {
margin: 20px; } }
Result:
.box-test {
margin: 10px;
}
.ie-7 .box-test {
margin: 20px;
}
I have tried adding mixin for "#-moz-document url-prefix()" FF hack but it was not recognized by SASS and SASS was throwing error. so I think better solution is to create _hack.sass file and add css hacks which will not be compiled by SASS. I include this file whenever required.
#import "hack";
I am adding answer this as I feel it will be useful to someone who is struggling to get mozilla/safari hack works.