Grid and filling out page

In the attached screenshot, the elements are placed using the following code.

Is there a way to push to the multiple select box all the way to right? Currently, it looks … less desirable and thinking of a way of making this look better (when a user clicks on one or more entries in the select box, all the entries A, B, Insng, Con and the last will get updated). Im open to alternative layouts !

Thanks again

const types_chooser = view(,{label: "Types",value:"ALL",multiple: 10}));

<div class="grid grid-cols-4">

  <div class='card grid-colspan-2'>
  <div class='card grid-colspan-2'>


<div class="grid grid-cols-3">
  <div class='card'>
  <div class='card' >
  <div class='card' style="max-width: 640px;padding-left: 5px;">

You can try

const types_chooser =[1, 2, 3, 4], {
  label: "Types",
  value: "ALL",
  multiple: 10,

// allow <form> to grow + setting how children are placed = "auto"; = "space-between";

// limit <select>'s width, otherwise it's "100%" by default
const select = types_chooser.querySelector("select"); = "200px";


Essentially Inputs.* returns a <form> element, and you can performs any kind of DOM manipulation on it to overwrite the default styles.

The outcome:

much thanks!

1 Like