Troubleshooting problem with rendering Safari Extjs grid

Take a look here for a simple demonstration of what I am referring to. It functions properly in Internet Explorer and Firefox, but unfortunately not in Safari.

I am working with four panels that are dynamically added to a tabpanel item. Three of them are grid panels, while the other is a form panel. My goal is to maintain the proportions or sizes of the grids. Despite trying various layout methods such as table, column, absolute, none have been successful so far. With a table layout, all sizes end up being the same width. It seems like my only solution may lie in a column layout, which appear correctly in Firefox and IE, but are problematic in Safari according to the provided image. In this case, the column appears on the second row when it doesn't fit within the current row. Initially, the title bar and some column headings do not display properly.

Any advice would be greatly appreciated.

Thank you.

Check out the screenshot here http://pssnet.com/~devone/pssops3/testing/Screenshot.png

javascriptcsslayoutsafariextjs

Answer №1

If you're looking to layout your page, consider using a BorderLayout. The specific configuration would depend on how you want the page to appear.

UPDATE: For Ext 3.1 users, it's worth exploring the new HBox (example) and VBoxLayout (example) layouts. These layouts are powerful tools that can fulfill your requirements effectively.

Ext.onReady(function() {
    var panel = new Ext.Panel({
        id:'main-panel',
        baseCls:'x-plain',
        renderTo: Ext.getBody(),
        width: 600,
        height: 400,
        layout: {
            type: 'vbox',
            align:'stretch'
        },
        defaults: {
            xtype: 'panel',
            baseCls:'x-plain',
            flex: 1,
            layout: {
                type: 'hbox',
                align: 'stretch'
            }
        },
        items: [{
            defaults: {
                xtype: 'panel',
                frame: true
            },
            items: [{
                title: 'Item 1',
                flex: 1
            },{
                title: 'Item 2',
                flex: 2
            }]
        },{
            defaults: {
                xtype: 'panel',
                frame: true
            },
            items: [{
                title: 'Item 3',
                html: 'sssssssssssss',
                flex: 2
            },{
                title: 'Item 4',
                flex: 1
            }]
        }]
    });
});

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

Div element obstructing the ability to view markers

Issue with a positioned DIV over Google Maps: The DIV is causing accessibility problems for the map, taking up the entire width when it should stop at the green square borders. Interaction with the map is limited to the very bottom after the green square. ...

htmlcssgoogle-maps

What could be causing my fetch post request to only hit on breakpoint and not otherwise?

In my React .Net application, I am using the following code snippet: handleAdd(userId, name) { name = encodeURIComponent(name); fetch('api/deck/create/' + userId + '/' + name, { method: 'POST' }).then(); } This ...

javascript.netreactjs

What is the best approach to extracting tightly-coupled code and converting it into an external library?

I have a question regarding paradigms that I would like to address, and if this is not the appropriate platform, please guide me to the right place. Your recommendations are most welcome :) Currently, I am tasked with extracting a significant piece of fun ...

javascripthtmlparadigms

How can images from a dynamic table be converted to base64 format in Vue.js and then sent in a JSON file?

Hello everyone, I'm facing an issue with a dynamic table where I need to add multiple rows, each containing a different image. I attempted to convert these images to base64 format and save them in a JSON file along with the table data. However, the pr ...

javascripthtmlvue.jshtml-tablevuetify.js

Struggling with adding two-digit numbers in a JavaScript calculator

While I can add single digits with no problem, adding double digits proves to be a bit tricky. The split method in this if statement is useful for isolating individual numbers, but it struggles when dealing with double digit numbers. if(e.value == '= ...

javascripthtmlcsscalculator

CSS Tip: Eliminate unnecessary white space in text areas on iPhone devices running iOS 10

Can anyone help me with a formatting issue I'm facing? I want the text inside a textarea to appear exactly like the text inside a div element, including padding and other styles. The code below seems to work fine on my Windows Chrome browser. However ...

htmlcss

Add an array as a nested child within another array using node.js and JavaScript

Description: I execute a MySQL query to retrieve rows from a table > connection.query(q2,function(err,rows){...} Assuming the rows have a structure like {id:",,,", time:"..." etc:"cc"} For each row, I then query another table to fetch additional dat ...

javascriptmysqlnode.js

Trouble with Bootstrap Collapse feature not collapsing on its own

I recently added a Bootstrap collapse feature to my payment view in Laravel. The Bootstrap section collapses when clicked, but I would like it to be collapsed by default. I understand that I need to include: aria-expanded="false" However, it still doesn& ...

javascriptjquerytwitter-bootstraplaravel

To change the font color to red when clicked, I must create a button using HTML, CSS, and Javascript

Currently, I am utilizing CodePen to assess my skills in creating a website. Specifically, I am focusing on the HTML component. My goal is to change the font color to blue for the phrase "Today is a beautiful sunny day!" Here is the snippet of code that I ...

javascripthtmlcss

Guide on receiving application/csp-report as json in an express application utilizing bodyParser

I am currently working on creating a middleware that can receive CSP reports from browsers. Browsers send these reports with the Content-Type of application/csp-report, and the data is in JSON format. Right now, I'm using bodyParser.text to handle thi ...

javascriptjsonexpresscontent-typebody-parser

Tips for effectively handling requestAnimationFrame

I created a unique function that both scrambles and translates text. The functionality is smooth if you patiently wait for the animation to finish before moving the mouse over to other elements. However, if you try to rush through to the next one, the prev ...

javascriptarraysanimationaddeventlistenerrequestanimationframe

The Ajax script is malfunctioning

Currently, I have a program that requires the user to input a city and country. The program then checks the database to see if the city already exists - displaying a warning message using ajax if it does, or adding the city to the database if it doesn&apos ...

javascriptphpajax

When working with Node.js and Express, encountering the error message "data.push is not a

I am encountering an issue when trying to add a new task to the list of all tasks. The error message I receive is TypeError: allTasks.push is not a function data contains JSON data that has been retrieved from a file using the fs method var allTasks = JS ...

javascriptnode.jsexpress

How to add an element to an array with a function in ExtJS

I am looking to add an element to the drawnShapes array within the draw() function and the getDrawnShapesCount() function should return the total number of shapes drawn The drawnShapes variable represents an array of shapes Ext.define('Shape', ...

javascriptarraysextjs

Understanding ExpressJS: Exploring the distinctions between ?, +, * in string patterns and regular expressions

Hello there! As a newcomer to Express, I've been on the hunt for a thorough explanation of string patterns with no luck. The path-to-regexp documentation has left me scratching my head. In particular, I'm grappling with this somewhat enigmatic s ...

javascriptregexnode.jsexpress

Tips for sending an API request from a local Ionic server to a separate local Express server

I currently have two applications running on my local machine: an ionic2 app running on http://localhost:8041 and an express app running on http://localhost:8000. Using Angular 2 observables, I am encountering an issue when making API calls with absolute p ...

javascriptnode.jsangularexpressobservable

Removing a cookie in Javascript - step by step guide

Cookie Conundrum: I've encountered a curious scenario involving browser cookies. After entering an invalid login ID, an unauthorized cookie appears on my HTML page. Despite my attempts to display and expire the cookie, it stubbornly remains persistent ...

javascriptcookies

Importing FontFace elements within the _document.tsx file

I have a collection of FontFace objects stored in a file called fonts/myFonts.js: const fontFaces = [ new FontFace('MyFont', "url('local/location.woff2') format('woff2')", { weight: '400', style: ...

cssnext.js

Fixing the Responsive Menu Issues

In order to achieve the desired effect of making the text from menu and logo disappear when minimizing the menu, you can use the following approach: Create a function called `smallNav()` to handle the resizing of the sidebar container: function sm ...

javascripthtmlcssbootstrap-4

Using Nested ng-repeat for Values and Keys in Angular

Struggling with implementing nested ng-repeats in my code. I have a JSON object with multiple layers and attempting to iterate through them to display the data. Here is the structure of the JSON: { "status": "success", "data": { "Mat": { "tota ...

javascriptjsonangularjs