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());
};