This is related to Typo3 with the bootstrap theme only please.
I'd like to have ALL elements of the accordion closed at page startup. Currently the top element is open like here
In do understand that it's only related to the in in the class of this statement
<div id="panel-425-0" class="panel-collapse collapse in">
but changing this in the source would have side effects to other locations which I'like to avoid.
So I'm looking for a solution to do the closure with CSS or javascript.
Any guidance welcome.
Here try this
So basically you get element by its Id and re-set its class attribute without the 'in' class.
<script>
document.getElementById('panel-425-0').setAttribute('class','panel-collapse collapse');
</script>
Just for completenes, my own reminder and to whom it might help the full TS to be put into the setup section of a template
# get some javascript into
# for hiding the first accordion element
page.jsFooterInline.20 = TEXT
page.jsFooterInline.20.value = document.getElementById('accordion-....').setAttribute('class','panel-collapse collapse');
Related
I'd like to use the md-card material from Vue Material in an existing application. The example on the website (https://vuematerial.io/components/card/) uses the following:
<template>
<div>
<md-card>
...
</md-card>
<md-card md-with-hover>
...
</md-card>
</div>
</template>
When I use this in the HTML page and create a Vue object for the containing div, the components do show, but the layout is not working. I have tinkered with the layout classes, but the behavior is not matching the example. How can I configure the layout in a plain HTML page to match the example's layout behavior? Is the example page adding another layer to the example div to create the layout behavior?
Updated: I tried a similar scenario in JsFiddle, and it works perfectly: https://jsfiddle.net/w9m6q05f/3/ . In my application, the cards are always in a column regardless of the width of the view, and the bottom card is stretched towards the bottom of the view. Do I need to set the class of the containing div? It may be getting overwritten by my application somewhere else.
Update 2: The culprit is which has height: 100%
I am actually building a SPA with foalts.org.
I have placed my script.js inside the public folder. Unfortunately, this doesn't allow me to use typescript for my vue-js. Maybe someone has an idea for this, cause actually the public folder got served from foalTS framework. But this is actually not the main topic.
The maintopic is, that i want to list several divs with
<div class="row-position" v-for="order in orders" :key="order.latestPrice">
<div id="myAMchart></div>
</div>
Now I would like to be able to place an amChart (https://www.amcharts.com/) for each div. And I want that these charts follow the value of order.latestPrice. But I actually have no idea how to set up this with amCharts and vue.js
Im open to any ideas.
I was able to update one single chart but with a fixed id of the div.
I don't know how to connect the many different (dynamicaly generated) charts to the order.latestPrice field.
Thanks!
I do have problems understand the tag </main>.
The project im looking at only has one </main> closing tag at the end, it has no opening tag of <main> which confuses me in the first place. It also has main {} in CSS. In order to try to understand what it does, I have played around with it a little.
As I comment out the </main> in html, absolutely nothing changes, which I understand if it has only informativ character, but the part where I get confused is, what is the main {....} in the CSS referring to, since when I comment this out, it will mess up the styling of the hole page.
edit: Since it seems to be unclear what my problem is: The problem is, that main {.....} in CSS does (!) influence the styling of the site, even without an opening <main> tag in html, and even without ANY <main> tag in html (for example if I remove the </main> tag in html.
How can a main {....} in CSS have influence on the styling, if there isn t even any <main> tag in the html whatsoever?
main{...} in css reffers to the styling of the main tag.
More about the element css selector
https://www.w3schools.com/cssref/sel_element.asp
You can learn more about the main tag here
https://www.w3schools.com/TAgs/tag_main.asp
And more about css selectors here
https://www.w3schools.com/cssref/css_selectors.asp
Also note that the main tag must have opening amd closing tag
You have to either add a tag, or remove main{...}.
The tag specifies the main content of a document.
The content inside the element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
Note: There must not be more than one element in a document. The element must NOT be a descendant of an , , , , or element.
just refers to the main content of the page, it does nothing. Main{...} is styling in the CSS page.
I'm trying to wrap my head around how "inner components" can adjust the content of "outer components". Let's say I have an application template that looks something like this:
<template>
<div class="sidebar">
<div>Some app-wide content</div>
<div>
<!-- I want to put some view-specific content here -->
</div>
</div>
<div class="main-body">
<router-view></router-view>
</div>
</template>
Each subview wants to render different content to the sidebar. Obviously this would be easy if the subview included the sidebar area itself, but let's say it is important to preserve the structure and we don't want to replicate the boilerplate of the sidebar across every view.
Is there any way for a child view to declare "export this extra component for display in another place?" I imagine something like injecting the parent view and calling a method on it, but I can't figure it out from the documentation.
Simple demo:
It's fairly simple, actually. Just import and inject your sidebar or any other viewmodel and call a method or update a property.
https://gist.run/?id=745b6792a07d92cbe7e9937020063260
Solution with Compose:
If you wanted to get more elaborate, you could set a compose view.bind variable to that your sidebar would pull in a different view/viewmodel based on the set value.
https://gist.run/?id=ac765dde74a30e009f4aba0f1acadcc5
Alternate approach:
If you don't want to import, you could also use the eventAggregator to publish an event from the router view and subscribe to listen to that event from your sidebar and act accordingly. This would work well for a large app setting where you didn't want to tie them too closely together but wanted the sidebar to react correctly to unpredictable routing patterns by always responding when triggers were published.
https://gist.run/?id=28447bcb4b0c67cff472aae397fd66c0
#LStarkey's <compose> solution is what I was looking for, but to help others I think it's worth mentioning two other viable solutions that were suggested to me in other forums:
View ports. You can specify multiple named router views in a template and then populate them by passing in a viewPorts object to the router instead of specifying a single moduleId. The best source of documentation is a brief blurb in the "Cheat Sheet" of the Aurelia docs.
Custom elements. It's a little more "inside-out" but you could define most of the outer content as a custom element that has slots for the sidebar and the main body; each child view would define this custom element and pass in the appropriate pieces.
I have set up in Javascript my preferred dijit.Menu which is that far so good.
How am I able to display the dijit.Menu directly after the page starts up in the (with it's position) without any mouse interaction?! I have looked in the API so far and don't find the answers. Will I have to "overwrite" a method?
If yes, which one is it? And what do I have todo???
The widget will not show up until it is parsed by dojo.
You should place fake menu markup inside its dom node:
<div dojoType="dijit.Menu">
<h1>This text is shown after the dom is loaded
and until the menu is parsed and renered</h1>
</div>
As soon as menu is ready, everything you've placed inside menu's dom node will be replaced by actual widget's html.
NON-AMD Version:
dojo.ready(function(){
// The code for all items!
})
DOJO-AMD Version, put the parameters of the modules you like to add, in require as well give them a name in the functions parameters list:
require(["dojo/domReady!"],function(){
//natve code
});