Change Container Width

[rebx]

Hi,

I’m looking at the image component’s documentation on the image size. Is there a way to adjust the size of the container itself so it doesn’t take the full width of the page?

I’m keen to find a solution for this in UI Kit 2.

Many thanks

[mpaisley]

Hey rebx,

I think the best way to do this would be using <box> components to wrap the image. Let me see if i can create a little demo for you!

[mpaisley]

OK, I’ve used a box component to wrap around the image so I can control the size using xcss:

import React, { useEffect, useState } from 'react';
import ForgeReconciler, { Code, Text, Image, Box, xcss } from '@forge/react';
import { invoke } from '@forge/bridge';
import spaceCat from '../resources/5.png'

const containerStyles = xcss({
  width: '50%',
});

const App = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    invoke('getText', { example: 'my-invoke-variable' }).then(setData);
  }, []);
  return (
    <>
      <Text>Hello world!</Text>
      <Code>{`<Image size='small'src={spaceCat}/>`}</Code>
      <Image size='small' src={spaceCat}/>
      <Code>{`<Box xcss={containerStyles}><Image size='small' src={spaceCat}/></Box>`}</Code>
      <Box xcss={containerStyles}><Image size='small' src={spaceCat}/></Box>
    </>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

And here’s a screenshot of how the images appear:

I hope this helps. If it does, please do mark it as the solution! If not, please add additional information below in a reply.

Cheers!
Mel

[rebx]

Thanks for your reply @mpaisley. It wasn’t the exact answer, as the box with the borders on edit mode still spans the width of the page, but this gave me an idea for another challenge I’m trying to overcome.

[mpaisley]

Hey @rebx,
You mentioned

@rebx

as the box with the borders on edit mode still spans the width of the page

can you give a little more information? Do you mean the edit view for a Confluence Macro or Jira Dashboard Gadget or something else?

[rebx]

Hi @mpaisley,

Yes in edit mode, like how the box spans the length of the page in the snapshot below. Any way to change it so that the borders are closer to the image?

[rebx]

Or maybe I’m being a n00b and the container borders are supposed to span the width of the page by default, @mpaisley?