My accordion doesn't automatically count up, the number stays at 1 for some reason. I am using a CMS called Umbraco on version 7.7.2.
Here's my code:
#if(#Model.Content.GetPropertyValue("titleAccordeon") != "")
{
<section class="block block__accordion">
<div class="container">
<div class="row">
<div class="block__heading col-md-12">
<h3>#Model.Content.GetPropertyValue("titleAccordeon")</h3>
<p>#Model.Content.GetPropertyValue("introAccordeon")</p>
</div>
#if(Model.Content.Accordion != null && Model.Content.Accordion.Any())
{
foreach (var item in Model.Content.Accordion)
{
var guid = Guid.NewGuid();
<div class="accordion panel-group col-md-12" role="tablist" aria-multiselectable="true">
<div class="accordion__item">
<a class="accordion__item__header" role="button" data-toggle="collapse" data-target="#accordion-#guid" aria-expanded="false" aria-controls="accordion-#guid">
#item.Title
</a>
<div class="collapse" id="accordion-#guid">
<div class="accordion__item__body">
#item.Description
</div>
</div>
</div>
</div>
}
}
</div>
</div>
</section>
And this is the result on one of the pages:
All the accordions have a different control-id thanks to the guid. Any idea why it doesn't count up?
How is it auto numbering? I don't see an OL or anything that would auto-number. Seems like the number is just part of the item.Title? If that is this case, you could do something like this.
#if(Model.Content.Accordion != null && Model.Content.Accordion.Any())
{
var counter == 1;
foreach (var item in Model.Content.Accordion)
{
var guid = Guid.NewGuid();
<div class="accordion panel-group col-md-12" role="tablist" aria-multiselectable="true">
<div class="accordion__item">
<a class="accordion__item__header" role="button" data-toggle="collapse" data-target="#accordion-#guid" aria-expanded="false" aria-controls="accordion-#guid">
#(counter + ". " + #item.Title)
</a>
<div class="collapse" id="accordion-#guid">
<div class="accordion__item__body">
#item.Description
</div>
</div>
</div>
</div>
#counter++;
}
}
I managed to get the code working. I moved one of the div's outside the if code and it worked. Not sure why the div made the accordions count though. Thanks to hardba11 and ADyson for trying to help!
<div class="accordion panel-group col-md-12" role="tablist" aria-multiselectable="true">
#if(Model.Content.Accordion != null && Model.Content.Accordion.Any())
{
foreach (var item in Model.Content.Accordion)
{
var guid = Guid.NewGuid();
<div class="accordion__item">
<a class="accordion__item__header" role="button" data-toggle="collapse" data-target="#accordion-#guid" aria-expanded="false" aria-controls="accordion-#guid">
#item.Title
</a>
<div class="collapse" id="accordion-#guid">
<div class="accordion__item__body">
#item.Description
</div>
</div>
</div>
}
}
</div>
Related
I'm having a heck of a time understanding why my component's UI will not re-render when a simple one-way databound property (List) is updated. I have other routable components re-rendering using the same approach without issue, but this non-routable component does not seem to want to behave the same way? It is my understanding that the component should update WITHOUT having to call StateHasChanged() on either onclick events.
#inherits Aivia.Bases.AltitudePage;
#inject IAlertService _alertService
#inject IJSRuntime _js;
#if (dsAlerts != null && dsAlerts.Any())
{
<div class="alerts mt-3">
<div class="container">
#foreach (var dto in dsAlerts)
{
<div class="alert alert-primary p-3" role="alert">
<div class="row g-0">
<div class="col-auto icon">
<i class="fa-solid fa-comments"></i>
</div>
<div class="col">
<div class="title">
#dto.Title
</div>
<div class="description">
#dto.Description
</div>
<div class="actions">
<button type="button" class="btn btn-primary" onclick="#(() => Read(dto))">
<i class="fa-regular fa-circle-check me-2"></i>
Dismiss
</button>
</div>
</div>
</div>
</div>
}
</div>
</div>
}
#code {
private IEnumerable<dtoAlert> dsAlerts = Enumerable.Empty<dtoAlert>();
protected override void OnInitialized()
{
GetAlerts();
}
private void GetAlerts()
{
this.dsAlerts = _alertService.queryUnreadAlerts(this.UserID).OrderBy(x => x.CreatedOn).ToList();
}
private void Read(dtoAlert dto)
{
_alertService.Read(this.UserID, dto.ID);
GetAlerts();
}
}
onclick="#(() => Read(dto))" simply needed to be #onclick="#(() => Read(dto))"
I am trying to implement a navbar for my application whose front end is built using Vue 2.0 and Bulma . It works well on desktops and but on smaller screens its showing the burger icon but it is not showing any elements. Its just present.
<template>
<div class="container is-fluid">
<div>
<nav class="navbar is-dark">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img alt="K R O N O S" height="100px">
</a>
<div class="button navbar-burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-end">
<div class="navbar-item">
<a class="" href="#"> Docs </a>
</div>
<div class="navbar-item ">
<a class="" href="#"> Report </a>
</div>
<div class="navbar-item">
<a class="">More</a>
</div>
<div class="navbar-item">
<a class="">Logout</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</template>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target
var $target = document.getElementById(target)
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active')
$target.classList.toggle('is-active')
})
})
}
})
export default {
name: 'Navbar',
data () {
return {
msg: ''
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
border: 0px solid black;
}
</style>
As you can see I have tried implementing the example code in on which was present here but with no use. Shouldnt Bulma give me responsive navbar out of the box. All the examples and solutions I have found are for the older "nav" class not the newer "navbar". Help would be much appreciated.
So, after a bit of studying the Vue guide and clues from fatman's comments, this is the fix I applied.
The above code works , but this is a more vue-ish way to do the navbar-burger menu.
<template>
<nav class="navbar">
<div class="container">
<div class="navbar-brand is-large">
<a class="navbar-item" href="#">
<img alt="K R O N O S" height="100px">
</a>
<button #click="makeBurger" class="button navbar-burger" data-target="navMenu" v-bind:class="{ 'is-active': activator }">
<span></span>
<span></span>
<span></span>
</button>
</div>
<div class="navbar-menu" id="navMenu" v-bind:class="{ 'is-active': activator }">
<div class="navbar-end">
<div class="navbar-item">
<a class="" href="#"> Docs </a>
</div>
<div class="navbar-item ">
<a class="" href="#"> Report </a>
</div>
<div class="navbar-item">
<a class="">More</a>
</div>
<div class="navbar-item">
<a class="">Logout</a>
</div>
</div>
</div>
</div>
</nav>
</template>
<script>
export default {
name: 'Navbar',
data () {
return {
msg: '',
activator: false
}
},
methods: {
makeBurger () {
this.activator = !this.activator
return this.activator
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
border: 0px solid black;
}
</style>
Hope this helps someone. The show/hide functionality is taken care by Bulma.
This works, but
will not close the menu
will cause router-links not to work
For 1.) I recommend adding #click to navbar-item as well:
<a #click="makeBurger" class="navbar-item">
<router-link to="/login">
{{link1}}
</router-link>
</a>
I don't know how I look for this or how this method is called, but what I am trying to do is adding items dynamically with a form using AngularJS.
This is all working fine, but how are these items passed to the controller when submitted?
These are snippets from code:
AngularJS part:
angular
.module('Administration', [])
.controller('addParents', ['$scope', function ($scope) {
$scope.parents = [];
$scope.addParent = function () {
$scope.parents.push({
'firstname': $scope.Firstname,
'lastname' : $scope.Lastname,
'done': false
})
$scope.Firstname = ''
$scope.Lastname = ''
}
$scope.deleteParent = function (index) {
$scope.parents.splice(index, 1);
}
}])
The list:
<div role="tablist" aria-multiselectable="true" class="panel-group" id="accordion-1">
<div class="panel panel-default {'fadeOut' : parent.done}" ng-repeat="parent in parents">
<div role="tab" class="panel-heading">
<h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="true" href="#accordion-1 .item-1">{{parent.firstname}}</a> <span class="fa fa-close pull-right" ng-click="deleteParent($index)"></span></h4>
</div>
<div role="tabpanel" class="panel-collapse collapse in item-1">
<div class="panel-body">
<fieldset>
<legend>Personal</legend>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Firstname</label>
<div class="col-sm-10">
<p class="form-control-static">{{parent.firstname}}</p>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Lastname</label>
<div class="col-sm-10">
<p class="form-control-static">{{parent.lastname}}</p>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
As you can see I am using an accordion, it is a personal touch to have a nice layout of added items and to have a nice overview of all items.
Hope you can help me in this issue or give me some usefull links
Thanks!
I have a public list in the code behind page and it is binding successfully. I want to access it and show the data in design page, data is accessible from list but it is not showing the values of the list items on the page.
private void GetAnnouncements()
{
var List = (from a in db.ANNOUNCEMENTS
orderby a.CREATEDON descending
select a).Take(3).ToList();
}
Design Page is as follows
<% if (List.Count > 0)
{
foreach (var item in List)
{%>
<div class="row">
<div class="col-md-12 faq-wrapper">
<div class="panel-group" id="accordion2">
<h3>ANNOUNCEMENTS</h3>
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse11"> <% Convert.ToString(item.HEADING.ToString());%>
</a>
</div>
<div id="collapse11" class="accordion-body collapse">
<div class="accordion-inner">
<div class="answer"><% item.CREATEDON.ToString(); %> here</div>
<p>
<% item.ANNOUNCEMENT1.ToString(); %>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<%}
} %>
Right now we are using the jQuery UI Accordion control for our drilldowns and we are in a process of changing to Bootstrap equivalent Accordion control. So I would like to know the best practices to do so. Please advice and thanks in advance.
Following is the html used for jQuery UI Accordion
#foreach (Xyz.MenuItem menu in Model)
{
if (menu.Items.Count() > 0)
{
<div class="accordion">
<h3>
#Html.ActionLinkForMenu(menu, true, null)
</h3>
<ul>
#foreach (Xyz.MenuItem subMenu in menu.Items)
{
<li>#Html.ActionLinkForMenu(subMenu, false, null)</li>
}
</ul>
</div>
}
else
{
#Html.ActionLinkForSingleMenu(menu, new { #class = "home" })
}
}
An example would be a Great Help.
Just follow the manual from bootstrap and rewrite your form like this
<div class="panel-group" id="accordion">
#foreach (Xyz.MenuItem menu in Model)
{
if (menu.Items.Count() > 0)
{
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
#Html.ActionLinkForMenu(menu, true, null)
</a>
</h3>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
#foreach (Xyz.MenuItem subMenu in menu.Items)
{
<li>#Html.ActionLinkForMenu(subMenu, false, null)</li>
}
</div>
</div>
</div>
}
else
{
#Html.ActionLinkForSingleMenu(menu, new { #class = "home" })
}
}
</div>