When ever I click the button that enables the popover window, it works as it should, but when I click another button to show the popover menu for a different account, the first menu does not dissapear, and Im not sure what I need to add to my code to make that happen.
<td ng-class="bsPolicy.adjustBodyCell(grouplvl, '5', 'attach')" class="popover-row"
ng-if="dirvm.tabs[0].isActive">
<button class="vismaicon vismaicon-attach"
uib-popover-template="bsPolicy.dirvmConstant.AppendicesOfGroupPopoverTemplate"
popover-enable="false"
popover-trigger="outsideClick" ng-click="dirvm.setCollapsedSubAppendices($event)" popover-placement="auto bottom"
ng-if="grouplvl.accountRows.length > 0" ng-class="grouplvl.subAppendices.length > 0 ? '': 'disabled'"></button>
Here is how it currently looks like
The popover-trigger attribute value needs to be wrapped in single quotes (as of AngularUI-Bootstrap version 2.0.0).
<td ng-class="bsPolicy.adjustBodyCell(grouplvl, '5', 'attach')" class="popover-row" ng-if="dirvm.tabs[0].isActive">
<button class="vismaicon vismaicon-attach"
uib-popover-template="bsPolicy.dirvmConstant.AppendicesOfGroupPopoverTemplate"
popover-enable="false"
popover-trigger="'outsideClick'" ng-click="dirvm.setCollapsedSubAppendices($event)" popover-placement="auto bottom"
ng-if="grouplvl.accountRows.length > 0"
ng-class="grouplvl.subAppendices.length > 0 ? '': 'disabled'"></button>
Link to docs: https://github.com/angular-ui/bootstrap/tree/master/src/popover
Related
I have used bootstrap-vue to create buttons inside a table. Requirement was to get the data of the button that was clicked. But since I used a for loop, even though i click on any of the 3 buttons (number is based on for loop), the data is getting rendered for all the 3 buttons on clickon any of the 3 buttons. I tried using "collapse-{{index}}" so that the index value might change. But if use this I am getting module error.
<b-tbody>
<b-tr v-for="(_,index) in gradableItems" :key="index">
<b-td>
<div>
<b-button
:class="visible ? null : 'collapsed'"
:aria-expanded="visible ? 'true' : 'false'"
aria-controls="collapse-4"
#click="fetchGIChildren({gradableItemId:gradableItems[index].id+'',userID:'701709', giIndex: index}), visible = !visible"
></b-button>
</div>
{{gradableItems[index].id+" "+gradableItems[index].name}}
<table>
<b-collapse id="collapse-4" v-model="visible" class="mt-2">
<tr v-for="(_,childIndex) in gradableItems[index].children" :key="childIndex">
<td>{{gradableItems[index].children[childIndex].status +' '+ gradableItems[index].children[childIndex].name}}</td>
</tr>
</b-collapse>
</table>
I am new to the material UI. here, I have two tabs and that tabs has some content.
Now, I am trying to add the text overflow elipses to this . But the text is in span over there,
<Tab
key={`${tab}_${index}`}
classes={{
root: css.tabRoot,
selected: css.tabSelected,
wrapper: css.tabIconWrapper,
labelIcon: css.tabLabelIcon
}}
disableRipple
label={tab.label}
value={tab.value}
icon={
tab.icon ? <Icons className={css.tabIcons} iconname={tab.icon} /> : null
}
/>
Now, Here the label is having a bit more length . So, I am just trying to limit it as max-width : 100px;
But in the material UI it is getting a bit complicated to override .
SO, what I tried is ,
label={<Typography className={selectedTab ? '' : ''}>{tab.label}</Typography>}
But here
I am not able to get which tab has been selected , I mean I want to add that class if the tab is selected.
can any one help me with this ? any solution like with or without typography works for me.
thanks.
div class="MuiTabs-scroller MuiTabs-fixed" role="tablist" style="overflow: hidden;">
<div class="MuiTabs-flexContainer">
<button class="MuiButtonBase-root MuiTab-root VIP_tabRoot MuiTab-textColorInherit Mui-selected VIP_tabSelected" tabindex="0" type="button" role="tab" aria-selected="true">
<span class="MuiTab-wrapper VIP_tabIconWrapper">Test004</span>
</button>
</div>
</div>
I have this template
<ng-template #thumbnailTemplate let-context="thumbnailContext">
<div id="{{context.divId}}">
<button type="button" data-toggle="modal" (click)="showEnlargeImage(context)">
<img id="{{context.imgId}}" src="{{context.imgSrc}}"/> <!-- this will have width, height=80-->
</button>
<a *ngIf="this.isEditing" href="#" id="{{context.closeId}}" onClick="deleteThumbnailfromContainer(context)"></a>
</div>
</ng-template>
The <a> is shown dynamically depending on the value of isEditing. This part works fine. On clicking <a>, I expect that deleteThumbnailfromContainer gets called and the page doesn't redirect because deleteThumbnailfromContainer returns false. But the page gets refreshed. I also think that deleteThumbnailfromContainer is not getting called because deleteThumbnailfromContainer has an alert which doesn't pop up.
deleteThumbnailfromContainer(thumbnailContext:ThumbnailContext){
console.log("delete thumbnail clicked ");
let index = this.thumbnailContainerRef.indexOf(thumbnailContext.viewRefId);
console.log("deleting index "+index);
this.thumbnailContainerRef.remove(index);
alert();
return false;
}
The generated html looks like follows (looks alright to me).
<a _ngcontent-c9="" href="#" onclick="deleteThumbnailfromContainer(context)" id="close-button-1"></a>
I can't figure out why the code isn't working correctly here.
I think you should try this out.
<a *ngIf="this.isEditing" href="javascript:void(0)"
(click)="deleteThumbnailfromContainer(context)" id="close-button-1"></a>
I'm trying to click an imagebutton on IE by using getAttribute("src"), but there are to identical buttons with the same src-code, so when I use this code, it clicks the first and I want to click the second. Can somebody help me?
I'm thinking of creating a loop to search through and choose the second one, but I have no idea how to write the code! Can somebody help me out?
This is the code I use to click the first button:
Set allInputs = IE.Document.getElementsByTagName("img")
For Each Element In allInputs
If Element.getAttribute("src") = "/forms/Content/Images/0006.gif" Then
Element.Click
Exit For
End If
Next Element
The HTML code for the buttons are:
<tr class="jqgfirstrow" role="row"
<tr tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr" id="1" role="row"
< img src="/forms/Content/Images/0006.gif"
<tr tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr" id="2" role="row
< img src="/forms/Content/Images/0006.gif"
Thanks for all of your help!
I did it with code here:
Set allInputs = IE.Document.getElementsByTagName("img")
allInputs(2).click
I have a problem with the following code.
I need to style it with the option: datepickerMode: 'year'
It went fine in other fields i have where it is a editable text box, however this is a href that turns into editable when clicked. I have had no luck with the data-e-datepicker-options="my options in scope"
<a href="#"
editable-bsdate="target"
data-e-datepicker-popup="dd-MM-yyyy"
data-e-ng-click="open($event,'date')"
data-e-is-open="opened.date"
onbeforesave="callback($data)" >
{{ (target | date:"dd-MM-yyyy") || placeholder }}
</a>
Try this:
e-datepicker-mode="'year'"