CODEWITHSUNDEEP
qooxdoo
Christian Regli
Christian Regli

Reputation: 2246

CSS position sticky behavior in QooxDoo

In CSS I can make an element sticky (not moving when scrolled), using 'position: sticky'. I would like to get this behavior in Qooxdoo.

See Playground for code example. The element that is supposed to be sticky is moving when scrolled horizontally. How can I make it sticky in Qooxdoo?

The question is not about CSS, but about Qooxdoo.

My code:

var container = new qx.ui.container.Composite(
    new qx.ui.layout.Grid()
  ).set({
    padding: 20,
  });

  this.getRoot().add(container, { edge: 0 });

  var sticky = new qx.ui.basic.Label("sticky").set({
    padding: 30,
    backgroundColor: 'yellow',
    
  });
  
  sticky.getContentElement().setStyle({position: 'sticky'});
  
  var label2 = new qx.ui.basic.Label("Label 2 ").set({
    padding: 30,
    backgroundColor: 'green',
    width: 500
  });

  container.add(sticky, { row: 0, column: 0 });
  container.add(label2, { row: 1, column: 0 });

Upvotes: 1

Views: 38

Answers (1)

Christian Regli
Christian Regli

Reputation: 2246

The solution was the use of 'allowShrinkX' property.

Upvotes: 1

Related Questions