How to increase input element width in @adobe/plugin-toolkit

Adobe XD UXP Plugin API
,
#1

Hi, I’m trying to increase a prompt input width. I’m using the following lib: https://github.com/AdobeXD/plugin-toolkit
I have looked into the code and looks like the prompt input is using id="prompt", setting CSS on this id does nothing for me so I’m lost.

screenshot of the input: https://jmp.sh/nFhk5Nx

here’s the relevant code snippet:

      const res = await prompt(
        "Main title",
        "This is prompt heading..",
        "placeholder",
        ["Cancel", "Submit"],
        false
      );
#2

setting CSS should do make it work. If not, try the inline style tag.

#3

Can you share where you’re adding this CSS, and what CSS you’re adding?

#4

at the root of my project, i have a styles.css file.

I am doing
main.jsx

require("../src/styles.css");

styles.css

#prompt {
  width: 200 !important;
}
#5

Do you have a

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ]
  }

in your webpack.config.js? Otherwise that require won’t do the right thing.

(Sorry if this is a dumb question and that’s obvious.)

#6

I believe nothing is ever a dumb question.

module.exports = {
  entry: "./src/main.jsx",
  output: {
    path: __dirname,
    filename: "main.js",
    libraryTarget: "commonjs2"
  },
  devtool: "none", // prevent webpack from using eval() on my module
  externals: {
    application: "application",
    uxp: "uxp",
    scenegraph: "scenegraph",
    interactions: "interactions"
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          plugins: ["transform-react-jsx", "transform-object-rest-spread"]
        }
      },
      {
        test: /\.png$/,
        exclude: /node_modules/,
        loader: "file-loader"
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};

here’s my webpack config, it does have the css rules and css itself works when i try other stuff.
Just unable to increase width of the input that is created via @adobe/plugin-toolkit

#7

Could it be the length type is missing? In newer versions of XD you have to provide the type of the value:

#prompt {
    width: 200px !important; 
}
2 Likes
#8

Yeah, unit-less lengths won’t do anything if your host.minVersion is >= 21.

1 Like
#9

That solved the issue for me. Thank you

#10

Thank you that worked

1 Like