After clicking the refresh button, the screen gradually fades into view, revealing only half

I have set up a grid on my website to display log history, along with a refresh button that updates the grid with new data when clicked.

<div dojoType="dijit.layout.ContentPane" title="Log history">
    <button dojoType="dijit.form.Button" id="btn_refresh" onclick="load_logs" style="float:right; border:1px solid black;">Refresh</button>
    <div dojoType="dojo.data.ItemFileReadStore" jsId="log" data="window.store_data_log"> </div>
    <div id="grid_log" dojoType="dojox.grid.DataGrid" store="log" structure="window.layout_log" queryOptions="{deep:true}" query="{}" clientSort="true" rowsPerPage="5"> </div>
</div>

However, I encountered an issue where in the Chrome browser, the refresh button moves up when clicked and becomes only partially visible. I attempted to add <BR/> after the button, but then the grid disappeared completely. Placing the button in a different container also resulted in the grid disappearing. What should I do to resolve this?

htmlcssdojo

Answer №1

I encountered a similar problem and opted to utilize dijit.layout.LayoutContainer along with dijit.layout.ContentPane, which proved to be very effective. By setting layoutAlign="client" on the main content pane, it automatically fills up the remaining layout space.

<div dojoType="dijit.layout.ContentPane" 
     title="Log history">

     <div dojoType="dijit.layout.LayoutContainer" 
          style="width: 100%; height: 100%;">

        <div dojoType="dijit.layout.ContentPane" 
             layoutAlign="top" 
             style="height:28px;padding:2px;">

             <button dojoType="dijit.form.Button" 
                    id="btn_refresh" 
                    onclick="load_logs"
                    style="float:right; border:1px solid black;">
             Refresh</button>

        </div>

        <div dojoType="dijit.layout.ContentPane" 
             layoutAlign="client" 
             style="padding:0px 2px;">

             <div dojoType="dojo.data.ItemFileReadStore" 
                  jsId="log"    
                  data="window.store_data_log"> </div>

             <div id="grid_log" 
                  dojoType="dojox.grid.DataGrid" 
                  store="log"   
                  structure="window.layout_log" 
                  queryOptions="{deep:true}" 
                  query="{}" 
                  clientSort="true" 
                  rowsPerPage="5"> </div>

       </div>
   </div>
</div>

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

Start a new typescript project from scratch

Seeking assistance in setting up a blank TypeScript project with a package.json, TypeScript and HTML file. I am looking for something akin to the Stackblitz blank-typescript project. If anyone could provide me with a step-by-step guide on how to create su ...

node.jshtmltypescriptnpm

Accumulation of style from various directives in AngularJS on a single element

Currently, I am working on developing a component framework and find myself in need of a method to apply styles from multiple directives to an element in a way that they can accumulate. The priority of the styles should be determined by the directive creat ...

cssangularjsangularjs-directive

Step-by-step guide to implementing a floating action button on the bottom-right corner of a screen using Material-UI in a React application

I have been attempting to place the FloatingActionButton on the bottom right corner of the screen. To achieve this, I am utilizing the following library: http://www.material-ui.com/#/components/floating-action-button import React, { Component } from "reac ...

htmlcssreactjsmaterial-ui

What is the reason behind the CSS not rendering when async:false is used?

I find it peculiar and am actively seeking an explanation for this anomaly. In my code snippet, the AJAX call seems to be causing unexpected behavior: $('.edit-config').click(function() { var that = this; var msg; ip ...

javascriptjquerycssajaxasynchronous

Exploring nodes with the help of Cheerio JS

In my HTML code, I am using the Snekfetch library to fetch data. Here is a snippet of the code: <div class="entry-content"> <h4>today's date etc etc</h4> <h3>category name 1</h3> <p> <img class=" ...

jqueryhtmlcheerio

Strange Behavior of Anchor Tags

I've been struggling with my anchor tag not working properly. The desired URL is localhost/VShroff/home/about.php, but it keeps changing to localhost/about.php without redirecting. I've spent a long time trying to figure this out. Here is the HT ...

jqueryhtmlcssanchor

Displaying elements above my React sidebar

I am working on developing a Login application with a landing page using React Router and Redux. In order to have a Sidebar that is always present in all the components within the application, I have setup the Sidebar component as a route that is constantl ...

javascriptcssreactjs

Position on the chart in the Highcharts

I have developed 2 highcharts in the code below: <div> <p id="container"> </p> <p id="cont"> </p> </div> I specified the width and height as follows: $('#cont').highcharts({ char ...

htmlcsshighcharts

Creating SVG paths using coordinates for THREE.js

I copied the exact code from this ThreeJs Example designed for generating a three-dimensional City Model. I've created an SVG path outlining city boundaries using Google Maps and now I'm trying to use the above code to create a similar 3D object ...

javascriptcsssvgthree.js

What is the best way to populate a div with multiple other div elements?

My current project involves creating a sketchpad using jQuery for an Odin Project assignment. However, I have encountered an issue with filling the canvas (wrapper div) with pixels (pixel divs). The canvas does not populate correctly. Here is the link to m ...

javascriptjqueryhtmlcss

Embedded video player is failing to display and play the video file

Currently, I am in the process of developing a PHP backend for my mobile application. One specific requirement involves displaying and playing a video file that is hosted. This is the approach I have taken: $data[$i]['video'] = '<vide ...

phphtml

How do I dynamically adjust class names for menu items as I scroll using jQuery?

I have a website with different sections identified by unique IDs, such as: <section id="home"> First Section </section> <section id="about_us"> Second Section </section> <section id="what_we_do&q ...

javascripthtmljquerycssbootstrap-5

What are the steps to make a div with no content inside?

Presently, I am dealing with 2 overlapping transparent div's each containing unique buttons and functionalities in the following manner: .item1{ height:10rem; width:10rem; position:absolute; border:0.5rem solid red; background-color:trans ...

javascripthtmlcss

The calendar selection tool appears hidden behind the dropdown menu

I'm encountering a common issue with the jQuery datepicker where it's displaying behind a dropdown box. I've tried implementing the solutions provided in this thread: Trouble with jQuery Dialog and Datepicker plugins However, these solutio ...

jquerycssdatepicker

Set up a JavaScript function that triggers an alert if two numbers are determined to be equal

I created a code snippet that should display an alert message when a button is clicked, indicating whether two random numbers generated are equal or not. The random numbers must be integers between 1 and 6. I implemented this functionality in JavaScript bu ...

javascriptjqueryhtml

Enhance your calendar with sleek jQuery styling

Currently, I am utilizing the jQuery-ui.css (smoothness) solely for the calendar CSS. Can anyone provide me with a comprehensive list of all the calendar CSS functions available in it? I'm looking to avoid using any unnecessary CSS that might be causi ...

jqueryhtmlcsscalendar

What is the best way to insert a text input with variable width into a table?

I am currently using twitter-bootstrap and have encountered an issue with two tables. The first table can be viewed here: http://jsfiddle.net/MELUd/ <table class="table table-bordered"> <thead> <tr> <td colspan ...

htmlcsstwitter-bootstrapresponsive-design

Ensuring Proper Highlighting for HTML Select Options

I am working on a project involving an HTML Drop-down menu. Check out the code I have so far: http://jsfiddle.net/dineshk/u47xjqLv/ HTML Code <select> <option class="first" style="display:none;">HH</option> <option class= ...

htmlcss

How can I customize the color of the disabled state in a mat-slide-toggle?

I am trying to customize the disabled state color of a mat-slide-toggle. This is what my slide toggle currently looks like: https://i.sstatic.net/Lhz0U.png Here is the code I have been using: <div> <mat-slide-toggle>Slide me!</mat-slide ...

cssangularangular-material

Having trouble understanding why <p> and <h3> elements are displaying as links?

Starting my journey in front-end development with my first website project. Using HTML, CSS, Bootstrap, and Flask. Encountering an issue where my code is styled like a link instead of plain text. It appears blue and becomes underlined when hovered over. & ...

htmlcssbootstrap-4