Ways to adjust the child size within a dojo accordion

Currently, I am utilizing Dojo for a project where I have implemented pages with the use of dijit/layout/AccordionContainer. These accordion containers typically consist of three or more child containers whose heights dynamically adjust based on the available space within the current page. It is worth mentioning that I created the accordion using a declarative example from the Dojo documentation.

However, there are instances where I require one specific Accordion container to be larger than the others.

For instance, I would like the last container (named "this too") to be larger than the other two...

My approach is straightforward - I followed the documentation's example:

<div class="hook" style="width: 300px;">
<div class="hook" data-dojo-type="dijit/layout/AccordionContainer">
    <div data-dojo-type="dijit/layout/ContentPane" title="Heeh, this is a content pane">
        Hi!
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" title="This is as well" selected="true">
        Hi how are you?
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" title="This too">
        Hi how are you? .....Great, thx
    </div>
</div>

Afterwards, by applying the class hook and adjusting the page height, Dojo ensures all containers are equal in size.

Thank you!

javascripthtmlcssdojo

Answer №1

To differentiate the child div elements and customize them individually, you can simply target each one specifically as shown below:

hook > div:nth-child(3){
 height: 300px !important;
}

The selector div:nth-child(3) is used to select the third child container in this case. By using the !important declaration, you ensure that the styles defined will override any inherited properties from the dojo framework.

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

In a scenario where two elements have the same value of float:right;, which element will take priority?

When I have two div elements with similar parent location and both positioned float:right using the style attribute, how can I determine which one will appear more to the right than the other? I want to ensure that div1 is always the furthest right, follow ...

htmlcss

How to redirect to a different page within the same route using Node.js

When attempting to access the redirect on the login route using the same route, I first call the homeCtrl function. After this function successfully renders, I want to execute res.redirect('/login'). However, an error occurs: Error: Can't ...

javascriptnode.jsexpresshttp-redirectrender

`How to utilize the spread operator in Angular 4 to push an object to a specific length`

One issue I'm facing is trying to push an object onto a specific index position in an array, but it's getting pushed to the end of the array instead. this.tradingPartner = new TradingPartnerModel(); this.tradingPartners = [...this.tradingPartner ...

javascriptangulartypescriptes6-promise

Creating a beautiful user interface with Blazor using Bootstrap's form-select component

I am completely new to Blazor and I'm trying to incorporate Bootstrap classes. However, I am encountering an issue where the browser is not recognizing the form-select class. <div class="col-md-3 "> <select name= ...

htmlvisual-studiobootstrap-4blazor

jQuery import children into output

When inserting a div every nth-child and later calling the children of the parent, the jQuery inserted elements do not appear in this new list. How can I retrieve the inserted elements as well? Apologies if this is confusing. If it's easier to under ...

javascriptjqueryhtmlscroll

What is the mechanism behind the functioning of Vue.js, React.js, and Angular.js?

Here lies a question born out of sheer curiosity. The burning question is: What is the mysterious inner workings of Client-side frameworks? Allow me to elaborate. I have been delving into the depths of javascript for over 5 years now. Yet, one aspect st ...

javascriptangularjsreactjsvue.js

My AJAX request seems to be redirecting to my PHP file instead of simply returning the response text. What could be causing this issue?

I am currently working on a project for my Web Engineering course and I am incorporating jQuery to execute an AJAX request to my PHP file using the POST method. The task specifies that "each time the [submit] button is pressed, the form data should be disp ...

javascripthtmljqueryajaxweb

When <li> elements are rendered via ajax, it is not possible to attach JavaScript Events to them

Hey there, I've got a drop down menu that's being shown using UL and LI tags. This is generated by a PHP script that echos out: '<li id='. $value .'>'.$value.'</li>' The JQuery function below works perf ...

javascriptajaxhtml-listsevent-listener

The impact of empty space on design aesthetics and practical solutions to utilize white space effectively

Within this example <html> <head> <style> .q_show_spaces { white-space: pre-wrap; } .q_inline { display: inline; } .q_no_wrap { white-space: pre; } </style> </head> &l ...

htmlcss

Create a visually stunning CSS3 animation within a specified container, mimicking the style shown in the

I'm currently working on creating the animation depicted in the image below: https://i.stack.imgur.com/W69EQ.jpg My goal is to develop a video slider where, upon clicking a button, the video will seamlessly shift to the right within its parent conta ...

htmlcss

JavaScript powered Scrolling Image Gallery

I want to create a flash gallery similar to this website using Javascript. Does anyone know of any resources or examples I can reference for this project? ...

javascriptajax

Center-align the text in mui's textfield

What I'm looking for is this: https://i.stack.imgur.com/ny3cy.png Here's what I ended up with: https://i.stack.imgur.com/vh7Lw.png I attempted to apply the style to my input props, but unfortunately, it didn't work. Any suggestions? Than ...

javascriptcssmaterial-ui

Conceal the activated dropdown menu (toggle)

My code is functioning well, however there is a slight issue with the submenus. When I click on submenu A it opens perfectly, but if I then click on submenu B, A remains open and now both are displayed. I would like for B to close automatically when I cli ...

javascriptjqueryhtmlcssmenu

Adjusting the value of an element within an Angular directive

I am interested in creating a custom Angular directive for a placeholder. Here is the code snippet for the directive: class CustomDirective { restrict: string = "A"; link = (scope: ng.IScope, instanceElement: ng.IAugmentedJQuery, instanceAttribu ...

javascriptangularjsangularjs-directivetypescriptangular-ui

Is there a way to integrate a MySQL database with parcel-bundler in a Node.js environment, or is there a simpler method to achieve this database integration with parcel-bundler?

Node.js and parcel-bundler are new to me, but I've managed to create a server.js file that connects to the database without any issues. Server.js const express = require('express'); const mysql = require('mysql'); //Establish con ...

javascriptmysqlnode.jsexpressparceljs

Troubleshooting the "Failed to mount component" error in Vue: fixing template or render function definition issues

Struggling with writing a Vue component, encountering the issue: Failed to mount component: template or render function not defined. Tried various fixes like adding default when importing the component, but none of them seem to work. My component code is i ...

javascriptvue.jsvue-componentvuex

Using Backbone to Handle Different Data Formats

I have a unique text file containing date-time data in the format below: 2014-03-14T16:32 2014-03-15T13:04 2014-03-16T06:44 ... I want to use this static file as a read-only data source for my backbone collection. However, the current format is not suita ...

javascriptajaxbackbone.js

What is the best way to switch the orientation of divs from horizontal to vertical with CSS?

I currently have a footer setup with 3 divs that are displayed horizontally at the bottom of the page. <div class="footer-text footer_mainDIV"> <div class="footer_leftDIV"> All rights reserved </div> <div class="fo ...

htmlcss

The download window is malfunctioning and unable to save the file

I'm currently developing an ASP.NET Web Form application with a specific requirement: to display a popup box for downloading an Excel file when the user clicks on a link. This link is located within a popup page, not on the main ASPX page. Here' ...

javascriptasp.netajaxhttphandler

On the second attempt, Firefox is able to drag the div element smoothly by itself

I have created a slider resembling volume controls for players using jQuery. However, I am facing an issue ONLY IN FIREFOX. When I drag the slider for the second time, the browser itself drags the div as if dragging images. The problem disappears if I clic ...

javascriptjqueryhtmlcss