I am using ngx-bootstrap accordion with angular 9. The header always contains the 'card' and 'card-header' classes and I don't want them .. how can I remove these classes when the html is constructed
this is my code:
<accordion>
<accordion-group>
<div accordion-heading>
'HEADER TEXT'
</div>
<div>
'BODY TEXT'
</div>
</accordion-group>
</accordion>
And what I get is
<accordion-group _ngcontent-yeu-c53="" class="panel panel-open" style="display: block;" _nghost-yeu-c13="" ng-reflect-is-open="true"><div _ngcontent-yeu-c13="" class="panel card panel-default" ng-reflect-ng-class="panel-default"><div _ngcontent-yeu-c13="" role="tab" class="panel-heading card-header panel-enabled" ng-reflect-ng-class="panel-enabled">
Related
I am using Bootstrap to design my React project and all of a sudden the grid system doesn't work properly.Basically I need to have the first div with the className of row above the Card components, and centered.I have added more code but nothing that had to do with that particular main page or styling.I have pasted below my code.Does anyone know why this could've happened and how to fix it?
return (
<div>
<section id="service">
<div className='container'>
<div className='row'>
<div className='col-12'>
<h3 className='fs-5 text-center mb-0'>Our Services</h3>
<h1 className='display-6 text-center mb-4'>Our <b>Awesome</b> Services</h1>
<hr className='w-25 mx-auto'/>
</div>
</div>
<div className='row'>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Easy Usage' content='Access your assigned task with only one click and start testing your code right now.'/>
</div>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Instant Feedback' content='Run your solution using only one submit button with the help of our online compiler.'/>
</div>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Optimize your time' content='Reduce your time spending on uploading assignments with our easy dashboard method.'/>
</div>
</div>
</div>
</section>
</div>
)
Code for Filter Button
import React from "react";
function FilterButton(props){
return (
<div className="box">
<button
type = "submit"
className="button is-info"
onClick={()=>props.setFilter(props.name)}
>
<span>{props.name}</span>
</button>
</div>
);
}
export default FilterButton;
Unfortunately, the div tag is not able to put the following buttons(All, Active, Completed, Important) on the same line.
Is there any solution for this problem?
If you want to use the grid system of BULMA, you can do the following things:
see https://bulma.io/documentation/columns/basics/:
<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
</div>
If you want to use css in order to do this, you can use the css property display: inline-block,as it is shown here:
https://www.w3schools.com/css/css_inline-block.asp
I want to create the same design like chrome settings page
https://www.pcworld.com/article/3162716/software/how-to-switch-to-chromes-material-design-settings-page-for-an-easier-experience.html
I do not manage to put the md-switch at the right and in static position like chrome settings
I do manage to put the md-switch in right to the title but I need it always in the middle of the card stick to right.
Image of my result: (current design)
<md-card md-theme="{{ showDarkTheme ? 'dark-purple' : 'default' }}" md-theme-watch>
<div class="option-item">
<div class="option-item-header">
<div class="option-item-header-title">
title
</div>
</div>
<div class="clear"></div>
<div class="option-body">
<p>text</p>
</div>
</div>
<div class="option-switch">
<md-switch ng-model="vm.model" aria-label="active" ng-change="function()">
</md-switch>
</div>
</md-card>
How can I replicate the wizard modal menu? I like the style of the wizard modal but don't require the behaviour of a wizard ie. steps validation etc.
I'm currently using the clr-tree-node for my menu with the grid which gets me close to the wizard style but it would be great to match it exactly.
This is what I have at the moment:
<clr-modal [(clrModalOpen)]="display" [clrModalSize]="'lg'" [clrModalClosable]="true">
<h3 class="modal-title">Preferences</h3>
<div class="modal-body">
<div class="row">
<div class="col-md-4">
<clr-tree-node *ngFor="let menuItem of menu" >
<a class="clr-treenode-link" [class.active]="menuItem.id === activeMenuItem" (click)="toggleContent(menuItem)">{{menuItem.name}}</a>
<ng-template [clrIfExpanded]="expandedCheck(menuItem.id)" *ngIf="menuItem | objectHas:'subMenu'">
<clr-tree-node *ngFor="let subMenuItem of menuItem.subMenu">
<a class="clr-treenode-link" [class.active]="subMenuItem.id === activeMenuItem" (click)="toggleContent(subMenuItem)">{{subMenuItem.name}}</a>
</clr-tree-node>
</ng-template>
</clr-tree-node>
</div>
<div class="col-md-8">
<form [formGroup]="form">
<h4>General</h4>
I have a sidebar in my angular app and I am trying to make one div insight the sidebar scoll through the items and the content in the following div keep the same position (no scrolling). I have been looking at so many similar posts and tried everything but it just wont work. The problem is that either can you scroll through everything in the sidebar or not at all or that the bottom stayed (without moving) but then i the scrollbar was there for EACH item (and not for all items).
I used ng-repeat to put items on scope of the sidebar - is it perhaps different with angular that with reg. html?
Thanks!!
Ps. Im using gulp and the sidbar is a directive which I didnt include here. If anything is of importance, please let me know and I include it.
<li>
<a ng-click="openNav()"><i id="cart-icon" class="medium material-icons icon-design">shopping_cart</i></a>
<div id="mySidenav" class="sidenav closebtn" click-anywhere-but-here="closeNav()" ng-click="closeNav()">
<div class="sidebarBox">
<h2 class="sideBarHeader">Cart </h2>
<div class="sidebarContainer" ng-repeat="item in cart">
<img src="{{item.imageUrl}}" style="width:90px;height:100px;">
<div class="sidebarContent">
<p class="sidebarTitle">{{item.title}} </p>
<p class="sidebarSubtitle">Quality: {{item.quantity}}</p>
<p class="sidebarSubtitle">Price: ${{item.price}}</p>
</div>
<p class="sidebarLine"></p>
</div>
</div>
<br>
<div class="sidebarNoScroll">
<p style="color:black;font-size:22px;">Total</p>
<p class="sidebarTotal">${{ total() }}</p>
<button class="sidebarButtonContinueShopping" id='continue-shopping-button' ng-click="closeNav()">Continue Shopping</button>
<button class="sidebarButtonViewCart" ui-sref='cart' ng-click="closeNav()">View Cart</button>
</div>
</div>
</li>
css.
.sidebarContainer {
overflow:scroll;
height:224px;
}
.sidebarNoScroll {
overflow: hidden;
}
Wrap the container.
<div class="sidebarContainer">
<div ng-repeat="item in cart">
</div>
</div>