What are the steps for positioning the floating pane in dojo?

I have successfully created a floating pane declaratively using the code below. Everything seems to be functioning correctly, except for the fact that when I click the button to open the floating pane again, its position changes from the previous location. How can I ensure that the position of the floating pane remains consistent? Additionally, I am facing an issue where the properties like top, left, and position:absolute are not working as expected for my floating pane.

    <body  class="claro" role="main">

<div id="bc" style="width:100%; height:100%; padding: 5px;" dojoType="dijit.layout.BorderContainer">
    <div id="header" dojoType="dijit.layout.ContentPane" region="top" splitter="true">

    </div>

    <div dojoType="dojox.layout.ExpandoPane"
         splitter="true"
         duration="125"
         region="left"

         previewOnDblClick="true"
         id="leftPane"
         maxWidth="275"
         style="width: 275px;">
        <div dojoType="dijit.layout.TabContainer" attachParent="true" tabPosition="bottom" tabStrip="true">
            <div dojoType="dijit.layout.ContentPane" title="Legend">

                <div id="legendDiv"></div>
            </div>
            <div dojoType="dijit.layout.AccordionContainer" title="Search" style="width:275px;" attachParent="true">
                <div dojoType="dijit.layout.ContentPane" title="Attribute search">
                    <div class="searchBar">
                        <p>
                            <label for="searchBox" style="float: left;">Search:</label>
                            <input id="searchBox" name="searchBox" style="float: left;">
                                <span id="runSearchIcon" style="border: none; floast: left; padding: 3px;">

                                </span>
                        </p>
                    </div>
                    <ul id="dojoList"></ul>
                </div>
                <div dojoType="dijit.layout.ContentPane" title="spatial search">
                    <ul id="dijitList"></ul>
                </div>

            </div>

        </div>
    </div>
    <div dojoType="dijit.layout.ContentPane" region="center" id="centerPane" tabStrip="true">

        <div id="mymap" style="width:100%;height:100%">   </div>








        <div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"
             title="A floating pane" data-dojo-props="resizable:false, dockable:true,closable:false, title:'Tools'"
             style="position:absolute;top: 100px;;left:0;width:70px;height:150px;visibility:hidden;">
            This is the content of the pane!
        </div>

        <div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Show me', onClick:function(){dijit.byId('dFloatingPane').show();}" style="position:absolute;top: 150px;left: 20px;"></div>

    </div>
</div>

</div>
</body>
htmlcssdojo

Answer №1

The most simple solution is to utilize domStyle and set the position to absolute whenever the Button is clicked, moving it to the initial position.

     domStyle.set("dFloatingPane",{
                position:"absolute",
                top:"100px",
                left:"0px"
            });

Answer №2

To create a simple solution, all you need to do is create a div with position relative and control absolute. Check out the sample code below for better understanding:

   <div style="position:relative">
      <div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"
         title="A floating pane" data-dojo-props="resizable:false, dockable:true,closable:false, title:'Tools'"
         style="position:absolute; top: 100px; left:0; width:70px;height:150px; visibility:hidden;">
        This is the content of the pane!
    </div>

    <div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Show me', onClick:function(){dijit.byId('dFloatingPane').show();}" style="position:absolute;top: 150px;left: 20px;"></div>

   </div>

By using position:relative to control position:absolute, you can easily set your top or bottom position based on your design needs. Thank you, I hope this explanation clarifies everything.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Step horizontally to scroll varying amounts

On my webpage, I have implemented two buttons to scroll left and right. When these buttons are clicked, the page should move left or right by the width of each individual div (since they all have different widths). I am unsure if this functionality can b ...

jqueryhtmlscroll

Modify the appearance of a card upon radio button selection

Can someone help me figure out how to change the background color of my card element when a radio button is selected? <div class="col-6 col-md-3 mt-4 text-center my-auto"> <label for="'.$abreviation.'"> ...

javascripthtmljquerycssbootstrap-5

The HTML input needs to include a particular phrase

When considering an input field that will capture a user's response, such as one labeled Linkedin URL, it is important to ensure the entered data meets specified requirements. For example, a user may mistakenly enter a different URL like facebook.com/ ...

htmlregexvalidation

To retrieve the value of a specific row within a table and remove that row

I have utilized handlebars to display a table with data, each row containing an edit button. I am unsure how to retrieve the specific values from the row when the edit button in clicked. Here is the HTML code: <table class="table table-bordered"& ...

htmlbackbone.jshandlebars.js

When using v-select to search for items, the selected items mysteriously vanish from

I recently worked on a project where I encountered a similar situation to the one showcased in this CodePen. Here is the link to the specific CodePen One issue I faced was that the selected items would disappear when performing an invalid search. After i ...

javascripthtmlvue.jsvuejs2vuetify.js

The styling of Div remains unchanged by CSS

Currently, I am working on a website using HTML and CSS. I have created a division element and applied a class to it called profile_pic. However, when I make changes to this class in the CSS file, it does not reflect on the div. It seems like the styling ...

htmlcss

WebGl - texture failed to load

I encountered an error message stating: Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///C:/Users/.../img.jpg may not be loaded. var scene, camera, renderer; var ...

javascripthtmlthree.js

Try incorporating a variety of colors to enhance the appearance of your paper-menu in Polymer 1

I'm currently working on creating a customized menu using Polymer 1.0. This is how my menu structure looks like: <paper-menu> <template is="dom-repeat" items="{{menu}}" as="item"> <paper-item> <div>{{item.title}}</div& ...

csscolorspolymer

What causes pagination to be displayed outside of the main section in Firefox when using swiper?

When using swiper, why does pagination display outside of the main section in Firefox when inserting slides with different content lengths? This issue seems to only occur in Firefox and not in other browsers like Chrome. I have noticed that using two boots ...

htmlcssbootstrap-4swiper.js

Even though the browser is displaying the CSS file in the sources panel of the development tools, Python Flask is not properly applying the CSS styles

I am facing an issue with my flask application where it is not applying CSS styling to my website. Despite trying various solutions found on Stack Overflow and the internet, none of them seem to work. Even after organizing my directories into separate tem ...

pythonhtmlcssflask

Is it possible to blur all elements of a form except for the submit button?

Can someone help me with a form issue I am facing? <form> <input type="text>' <input type="submit">' </form>'' After submitting the form, I would like to blur the entire form: $(this).closest('form') ...

javascriptjqueryhtmlcssforms

Is it advisable to opt for window.webkitRequestAnimationFrame over setInterval?

Trying to figure out the best method for moving game characters in my JavaScript game - should I go with window.webkitRequestAnimationFrame or stick with setInterval? Any advice is appreciated! ...

javascripthtmlsetintervalrequestanimationframe

Automatically changing the color of the navigation bar text

I am experiencing an issue with the navigation bar on my webpage. Currently, it is styled with white text against a dark background color using the following CSS code snippet: a{ color: white; text-decoration:none; font-weight:bold; font-s ...

csshtmltwitter-bootstrapnav

Creating a PDF of a dynamic PHP webpage

Currently, I'm working on developing a customized invoicing application that uses PHP and MySQL to create interactive invoices directly in the web browser. The design includes tables and CSS to enhance the layout. I have a concept in mind to improve ...

phpcsspdfpdf-generation

What is the best way to define a:link style within a div class structure?

I am trying to include an anchor tag within my HTML... Inside the tag, I have the following CSS code: .foo { white-space:nowrap; text-shadow: 0 -1px 0 #000; color: #000; font-family: Helvetica Neue, Helvetica, arial; font-size: ...

csshtmlstylesheet

Create unique pages based on varying content types

Let's consider the structure I am working with: _components (directories) x1.html x2.html x3.html On my initial page, I gather information from the YAM section for each component. https://i.sstatic.net/en6mC.png Now, I want to include a link f ...

htmljekyll

Obtaining data from HTML using VBA is not possible with .getElementsByTag() or .getElementByID()

Currently, my project involves extracting data from HTML source code. My focus is on analyzing crash cases from the following website: To achieve this, I aim to collect all relevant data from the HTML by searching for .innertext of specific tags/IDs. Thi ...

htmlvbaweb-scrapinggetelementbyidgetelementsbytagname

What is the best way to utilize Selenium for choosing an item from a drop-down menu?

My current challenge involves using Selenium to interact with a dropdown menu in Python. The HTML snippet below shows the structure of the website I'm working on. <select data-id="1388874259461-k9k0y" name="walletselectedbitcoin" id="selectWallet" ...

pythonhtmlcssselenium

What is the best method to retrieve duplicate fields from a database in HTML5?

this.db.transaction(function (tx) { tx.executeSql('SELECT tsk.*, cont.firstName, cont.lastName ,cont1.firstName, cont1.lastName, list.listId FROM tbl_tasks tsk, tbl_contacts cont,tbl_contactequests cont1, tbl_lists list WHE ...

sqlitehtmlenyo

Using the CSS property display:none within a PHP email template can be a clever way to

Currently, I am developing a PHP HTML email template where I need to hide a table row when a PHP condition is met. Can anyone provide guidance on how to script this? I am using the following method: this is my code below: <tr style=""'. ...

phphtmlcss