CSS Absolute Positioning

[LincMitch]

I am Lincoln Mitchell

I'm Reporting a bug or issue with adding 'position:absolute' within the "styled-components" example.

Expected behaviour: To be able to select and move rendered Sketch elements.

Observed behavior: You cannot select and move rendered elements in sketch that have the style 'position:absolute'. You can however click any other element to select the group and move.

How to reproduce: const SwatchTile = styled.View height: 250px; width: 250px; border-radius: 4px; margin: 4px; background-color: ${props => props.hex}; justify-content: center; align-items: center; position:absolute; left:100px; bottom: 100px; ;

Sketch version: 46.2

[larsonjj]

@LincMitch, Have you tried this with v1.0.0?

[erikdotdesign]

I've experienced this before. It happens when the absolute element has a parent without explicit height/width set.

Parent without height/width example:

// You cannot interact with the red rectangle without selecting it from the layer list

import React from 'react';
import { View, render } from 'react-sketchapp';

const TestComponent = () => (
  <View>
    <View
      style={{
        width: 50,
        height: 50,
        backgroundColor: 'red',
        position: 'absolute'
      }} />
  </View>
);

export default () => {
  render(<TestComponent />, context.document.currentPage());
};

Parent with height/width example:

// You can interact with the red rectangle like normal

import React from 'react';
import { View, render } from 'react-sketchapp';

const TestComponent = () => (
  <View 
    style={{
      width: 50, 
      height: 50
    }}>
    <View
      style={{
        width: 50,
        height: 50,
        backgroundColor: 'red',
        position: 'absolute'
      }} />
  </View>
);

export default () => {
  render(<TestComponent />, context.document.currentPage());
};