0

I'm using vue-grid-layout: https://github.com/jbaysolutions/vue-grid-layout

They use a placeholder item to show where the tile is being dragged. By default it's red. I was able to style it to a different color by overriding the css class using /deep/ in my vue component's style block. I now need to add text that is positioned in the middle of the drag placeholder. Is there a way I can position absolute an html element that I only know the css class name of? It doesn't have an id.

I'd like to avoid including the library's code base in and editing it if possible.

EDIT: Looks like I can use a pseudo element like below, but is there a way to add in the text dynamically? Attr() won't work because I don't have access to the element to add an attribute on it. Using CSS to insert text

.OwnerJoe:before {
  content: "Joe's Task:";
}

EDIT2:

<grid-layout :layout.sync="coords"
                       :col-num="4"
                       :row-height="150"
                       :is-draggable="true"
                       :is-resizable="true"
                       :is-mirrored="false"
                       :auto-size="true"
                       :use-css-transforms="true"
                       @layout-updated="autoSave"
          >
              <grid-item class="exit"
                         v-for="coord in coords"
                         :i="coord.i"
                         :x="coord.x"
                         :y="coord.y"
                         :w="coord.w"
                         :h="coord.h">
                  <my-tile-component /> 
              </grid-item>
          </grid-layout>

So that's how my dashboard looks. And in their src code they have: https://github.com/jbaysolutions/vue-grid-layout/blob/master/src/components/GridLayout.vue#L4

It looks like they use one placeholder item and translate its position depending on which gridItem in the v-for is being dragged. Below is how i overrided that placeholder item to have a blue background.

 <style scoped>
        /deep/.vue-grid-item.vue-grid-placeholder {
            background-color:blue;
        }
    </style>
user6728767
  • 1,123
  • 3
  • 15
  • 31
  • Probably, and I have an idea how it might be solved, but can you include a code example that will both show the problem and let someone answer it in context? Otherwise it's mostly guesswork. – Popnoodles Jul 03 '19 at 17:35
  • Have you tried editing `i` to include the text? – imvain2 Jul 03 '19 at 17:39
  • @Popnoodles I added an example. @imvain2 i am actually using text in the `i` field, but the issue is that the library only creates one placeholder item for `all` the grid-items. I'd still have to change the `i` field on the fly somehow. Not sure if I should use `document.getElementsByClassName` and store the placeholder item somewhere – user6728767 Jul 03 '19 at 17:48
  • If you can make that work in a JSfiddle which supports vue that'd be helpful – Popnoodles Jul 03 '19 at 17:49
  • @Popnoodles I found this jsfiddle. It's basically doing what I am: https://jsfiddle.net/gmsa/7eLnp0ht/ You can see the red placeholderItem in this example as well. That's the item I changed to blue and need text in the middle of. – user6728767 Jul 03 '19 at 17:54

0 Answers0