I am using bootstrap vue to create a dropdown but i can't apply scoped style on it because the main button is being created without the "data-v-XXX" attribute.
is there any workaround?
<b-dropdown id="ddown2" variant="link" toggle-class="btn-clean">
<b-dropdown-item-button>test 1
</b-dropdown-item-button>
<b-dropdown-item-button>test 2
</b-dropdown-item-button>
</b-dropdown>
<style scoped>
.btn-clean {
color: #337ab7;
}
</style>
Generated code:
<div id="ddown2" class="btn-group b-dropdown dropdown" data-v-25a41064="">
<button id="ddown2__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-link dropdown-toggle btn-clean">test1</button>
<div role="menu" aria-labelledby="ddown2__BV_toggle_" class="dropdown-menu">
<button role="menuitem" type="button" class="dropdown-item" data-v-25a41064="">test1
</button><button role="menuitem" type="button" class="dropdown-item" data-v-25a41064="">test2
</button>
</div>
</div>
without "data-v-25a41064" on the button id="ddown2__BV_toggle_"
I came across the same issue today. It helped for me if I put the styling a component higher.
Vue-loader only applies scoped styles to the root element of child components.
You need to use the /deep/ CSS selector to target inside child components.
See docs at https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements
Related
i have this code in tailwind
#foreach($studenti as $student)
<a data-modal-toggle="defaultModal" data-target="#myModal{{$student->id }} href="#" class="hover:text-blue-700">{{$student->name}}</a>
and this is the Main modal
<!-- Main modal -->
<div id="myModal{{$student->id}}" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center">
<div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
<div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
{{$alum->nombre}} {{$alum->apellpatern}} {{$alum->apellmatern}}
</h3>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="defaultModal">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
</p>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
</p>
</div>
<!-- Modal footer -->
<div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
<button data-modal-toggle="defaultModal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
<button data-modal-toggle="defaultModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Decline</button>
</div>
</div>
</div>
</div>
#endforeach
But when i pressed the link it does not work, i am using data-target="#myModal{{$student->id }} in order to pass #student data to tailwind Main modal id="myModal{{$student->id}}",
it seems that this is not the proper way to pass data, i am using Laravel 8, anyhelp is appreciated
Thank you in advance
Omar
I have website created as an angular app that has a bootstrap datepicker. The problem is that the header of this datepicker is not visible - there're no arrows or a spinner to choose a month and a year.
The code in html look like this (I just want the header to be visible, I don't cate about its functionality at this point):
<div class="btn-group mb-3 mr-3 ">
<input class="form-control "
name="datepicker"
ngbDatepicker
#datepicker="ngbDatepicker"
[autoClose]="'outside'"
(dateSelect)="onDateSelection($event)"
[displayMonths]="2"
[dayTemplate]="t"
outsideDays="hidden"
[startDate]="fromDate"
[placement]="'bottom'"
type="hidden">
<ng-template #t let-date let-focused="focused">
<span class="custom-day"
[class.focused]="focused"
[class.range]="isRange(date)"
[class.faded]="isHovered(date) || isInside(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date.day }}
</span>
</ng-template>
<div class="input-group-append ">
<button class="btn btn-outline-dark " (click)="datepicker.toggle()" type="button" placement="bottom" ngbTooltip="{{'raports_by_date' | translate }}"><span class="fa fa-calendar"></span></button>
</div>
<button type="button" class="btn btn-dark no-click" *ngIf="toDate" > {{fromDate.day}}/{{fromDate.month}}/{{fromDate.year}}</button>
<button type="button" class="btn btn-dark btn-sm no-click" *ngIf="toDate" >-</button>
<button type="button" class="btn btn-dark no-click" *ngIf="toDate" >{{toDate.day}}/{{toDate.month}}/{{toDate.year}} </button>
<button type="button" class="btn btn-dark no-click" *ngIf="!toDate && fromDate" >{{fromDate.day}}/{{fromDate.month}}/{{fromDate.year}} </button>
</div>
And the result I get in a browser is:
I'm new to web applications programming and I've been working on this datepicker for the last two days. I have tried following examples at: https://ng-bootstrap.github.io/#/components/datepicker/examples#adapter but to no success.
You need to make sure you have the #angular/localize package first:
if (!not) {
npm install #angular/localize --save
Then, import '#angular/localize/init' in your polyfills.ts file just like the error says
OR
ng add #angular/localize
It will take care of it automatically
}
I have a kendo-popup in an angular component which I use within a kendo-dialog. The popup will be shown next to an icon when the user clicks on the icon. The positioning of the popup works fine when it is not inside a kendo-dialog. But the positioning is not correct when it is within a kendo-dialog. When the button is clicked within the kendo-dialog, the popup does not show up next to the icon. It shows up somewhere else.
Angular 2 Component 1 <comp-1>:
<span>
<input type="text" #anchor />
<button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
</button>
</span>
<kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>
Angular 2 Component 2:
<div click="openDialog()"></div>
<div>
<kendo-dialog *ngIf="showDialog">
<comp-1></comp-1>
</kendo-dialog>
</div>
When I click the div to open the dialog, the kendo-popup does not show next to the input tag. It shows up somewhere to the lower right.
Edit 1:
Tried moving the popup to within the span. Still not working.
Angular 2 Component 1 <comp-1>:
<span>
<input type="text" #anchor />
<button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
</button>
<kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>
</span>
Angular 2 Component 2:
<div click="openDialog()"></div>
<div>
<kendo-dialog *ngIf="showDialog">
<comp-1></comp-1>
</kendo-dialog>
</div>
Note: I have intentionally left out the styles. In the original source, I have all the styles setup properly.
You have to specify where the popup will display by using an id of anchor on the target element:
<div>
<target-tag #anchor></target-tag>
</div>
<div>
<kendo-popup [anchor]="anchor">
<Content to display>
</kendo-popup>
</div>
I have a Kendo Angular2 Slack: https://kendouiangular2.slack.com
I tried to replicate the issue in a standalone Plunker demo, but it seems that the popup positions just fine in Kendo Dialog component:
Tested in Chrome and Safari.
This is the dialog content:
<input #anchor style="width: 100px"/>
<button kendoButton (click)="toggle()">Toggle</button>
<kendo-popup *ngIf="popupOpen" [anchor]="anchor" style="width: 100px">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</kendo-popup>
And this is the actual test Plunker demo:
http://plnkr.co/edit/Y3oBZwa8xf0WiP462jW7?p=preview
Could you modify it in order to reproduce the issue? This will help to find the cause of the erroneous behavior faster.
please use div id which div you want to popup.
<div id="popupdiv"></div>
$("#popupdiv").kendoWindow({
title: "Inforamtion",
resizeable: true,
scrollable: false,
width: "50%",
actions: ["Pin", "Close"],//["Pin", "Refresh", "Maximize", "Close"],
modal: true,
// pinned: true,
animation: {
close: {
effects: "fade:out"
},
}
});
I want to add the ng2-bootstrap's date picker popup on top of a dropdown div that I created. When that did not work I tried to just create a simple multilevel dropdown to begin with. Eventually I want date picker popup to show up when clicked on the dropdown I have. Can you help please. Here is my code.
I am new to the community. Please let me know if I missed any information that should have been included.
import {Component} from 'angular2/core';
import {DROPDOWN_DIRECTIVES, DATEPICKER_DIRECTIVES} from "ng2-bootstrap/ng2-bootstrap";
#Component({
selector: 'multilevel-dropdown',
template: `
<div>
<div dropdown [autoClose]="'disabled'">
<div dropdownToggle id="TopLine" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<H1>Today's date is: {{dt | date:'short'}} (click date for pop-up)<b class="caret"></b></H1>
</div>
<div class="dropdown-menu">
<div class="dropdown dropdown-submenu">
<div id="FirstPopup" class="dropdown-toggle" data-toggle="dropdown" aria-labelledby="TopLine" aria-expanded="false">
<H3>First Popup (implemented as dropdown) (click this text for next popup)<b class="caret"></b></H3>
<!--Following should be replaced with the div commented later for datepicker popup-->
<div class="dropdown-menu">
<div class="dropdown dropdown-submenu">
<div id="SecondPopup" class="dropdown-toggle" data-toggle="dropdown" aria-labelledby="FirstPopup" aria-expanded="false">
<H5>Second Popup (implemented as dropdown)</H5>
</div>
</div>
</div>
<!--<div id="SecondPopup" class="dropdown-menu dropdown-menu-right" aria-labelledby="FirstPopup">-->
<!--<datepicker [(ngModel)]="dt" [showWeeks]="false"></datepicker>-->
<!--</div>-->
</div>
</div>
</div>
</div>
</div>
`,
directives: [DROPDOWN_DIRECTIVES, DATEPICKER_DIRECTIVES]
})
export class MultilevelDropdownComponent {
public dt:Date= new Date();
}
Found the fix. The issue was that each time a dropdown (at any level) is clicked, the event is propagated up the DOM and the dropdown-toggle toggles the open dropdown. In order for multilevel-dropdown to work, I needed to capture the event and stop propagation based on if I am opening the next level of dropdown or closing an existing one.
On a page, using ng-repeat, I try to place buttons on a grid layout.
Iterating through an array which is defined in a controller $scope.btnNames[]. buttons are place on Total number of buttons equal to array size of $scope.btnNames[]
I would like to put say 4 buttons per row.
As $scope.btnNames[] size is 20, then I like to place 20 buttons on 5 rows,
where each row will have 4 buttons.
1) on Controller :
- I have an array with button names
$scope.btnNames['aa', 'bb', 'cc','dd', 'ee', 'ff'....] whose size is 20.
2) on the page:
- using ng-repeat, iterate throught the
$scope.btnNames[] and put buttons as per follwoing code
<body ng-controller="PopupCtrl">
<div class="row responsive-sm">
<div ng-repeat="btnName in btnNames">
<button id={{$index}} class="button button-dark col" >{{btnName}}</button>
</div>
</div>
Please help me defining class="row" and class="col" and such a way that,
during ng-repate, after 4th button, it should add a new row and place 4 buttons till it reach end of ng-repeat.
Being new to both ionic and angulrJs, I'm not able to define class="row" during ng-repeat ( similar like a for loop, where, put a new class="row", when iterator counter in this case {{index}} greater than 4.
Use flex-wrap
You can get this behavior by using style="flex-wrap: wrap;" + the following CSS classes:
<div class="row" style="flex-wrap: wrap;">
<div class="col col-25" ng-repeat="btnName in btnNames">
<button class="button button-dark" >{{btnName}}</button>
</div>
</div>
http://codepen.io/Jossef/pen/doeJJP
You can find a possible solution here : https://stackoverflow.com/a/23780288/1015046
I have taken the above solution and implemented it for Ionic : http://codepen.io/arvindr21/pen/EaVLRN
<div ng-repeat="btnName in btnNames">
<div ng-if="$index%4==0" class="row">
<div class="col">
<button id={{$index}} class="button button-dark">{{btnNames[$index]}}</button>
<button id={{$index+1}} class="button button-dark">{{btnNames[$index+1]}}</button>
<button id={{$index+2}} class="button button-dark">{{btnNames[$index+2]}}</button>
<button id={{$index+3}} class="button button-dark">{{btnNames[$index+3]}}</button>
</div>
</div>
</div>
If you want the grid to be dynamic, you can take a look at : https://stackoverflow.com/a/27080632/1015046
Thanks.
Ok, So if you want to stack images like me in rows, See how the ng-repeat holds col-50.
<div class="row gallery">
<div class="col col-50" ng-repeat="photo in photos">
<img id="fitWidth" ng-src="{{photo.url}}"/>
</div>
</div>
Then with your css.
.gallery {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
Tested on IOS, Hope that helps :)
I would just like to add to the #Jossef Harush's answer (which, btw, worked).
However, when I tested it in the Ionic View application on iPhone, it didn't work. When I tested it in the Ionic View application on Android it worked as expected (multiple rows).
The solution was to add this as a style:
style="display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap;"
because, as you can see here Safari needs a -webkit prefix.
Hope this helps someone who will choose this solution over #Arvind's.
Worked for me as soon as I added flex-wrap: wrap in the styling.
Since i have set col-50 I started getting rows with two columns as intended.
Example:
<div class="row" style="flex-wrap: wrap;">
<div class="col col-50" ng-repeat="picture in pictures">
{{picture.src}}
</div>
</div>
There's a limitTo starting $index in AngularJS,
Maybe that can simplify things
<div class="row" ng-repeat="element in elements" ng-if="$index % 4==0">
<div class="element" ng-repeat="element in elements|limitTo:4:$index">...</div>
</div>
That will make sure that {{ index + 1 }} fall on a non-existent cell ..