jqxWindow align icon in title

[jqwidgetsdevParticipant]

Hi,

I am trying to add an icon to align right in JqxWindow, but failing to do so.
See code below, can you please provide the solution to resolve the problem?

Thank you.

<template>
    <JqxWindow
      ref="jqxWindow"
      :width="'100%'"
      :height="600"
      :position="'{ x: 0, y: 0}'"
      :isModal="false"
      :autoOpen="true"
      :draggable="false"
      :showCollapseButton="true"
      :animationType="'combined'"
    >
          <div>
            <div>
             hello world
              <div style="float: right">
                <div><i class="fa fa-question" aria-hidden="true"></i></div>
              </div>
            </div>
          </div>
          <div>
             body
          </div>

    </JqxWindow>
</template>

  <script type="text/javascript" src="../scripts/blikvm.js"></script>
<script>
import JqxWindow from "jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue";

export default {
  name: "App",
  components: {
    JqxWindow,
  },
};
</script>
<style>
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
</style>

[svetoslav_borislavovParticipant]

Hi,

Look at this demo: https://codesandbox.io/s/strange-lederberg-f8zx3q?file=/src/App.vue
I am setting the div which is a child of jqx-window-header to have a width of 100%.
The header-wrapper will be displayed as flex and with content justified: space-between.

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[jqwidgetsdevParticipant]

It works like a charm.

Thanks so much Svetoslav!

[Author]

Posts