I created a thumbnail with ng-repeat directive.When i click the add button,cards will be created automatically.What i want to do is to pass add button automatically right side after every thumbnail is added.In my code, there is an add button(it is fixed) and it creates thumbnails.Here is my code
`<div ng-show="list">
<div class="row-sm-3 row-md-3">
<div class="thumbnail"
style="width: 270px; height: auto; display: inline-block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; border: 1px solid #5bc0de"
ng-repeat="location in list track by $index">
<div class="name"><strong>Name :</strong> {{location.name}}</div><br>
</div>
</div>
</div>
</div> `
`<div>
<button type="submit" class="btn btn-info btn-sm" style="width:180px; height:200px; margin-top:7px;
border-radius:10px; margin-bottom:20px; background-color:#ffffff;border-color:#46b8da"
ui-sref="context.location"><span style="font-size:18px; color:#337ab7">Add</span>
</button>
</div> `
Related
I am trying to resize my map icon with scaledSize however the icon does not change, here is my code:
This works:
<marker icon="{resource.marker_circle}" class="marker-icon" id="{resource.id}" position="{resource.address}" title="{resource.name}" id="resource_clicked" value="{resource.id}"
on-mouseover="showInfoWindow(event, '{resource.id}')">
But when I try to resize the icons, it does not work with scaledSize:
<div class="map-container">
<div style="margin: 0 auto; overflow:hidden; background: white;">
<div style=" width: 100%; margin:center; height: 257px; border: none; border-radius: 25px;" map-lazy-load="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
<ng-map ng-map-custom style="width: 100%;height: 100%;border: none; border-radius: 25px;" center="Santa Ana, CA" zoom="11">
{!resources.filter('category_ref', _equals(my.category)).each(per_page: 30, page:response._page_44_resources_repeatingsection1) do |resource|}
<marker icon="{url: resource.marker_circle, scaledSize:[32,40], origin: [0,0], anchor: [16,40]}" class="marker-icon" id="{resource.id}" position="{resource.address}" id="resource_clicked" value="{resource.id}"
on-mouseover="showInfoWindow(event, '{resource.id}')"></marker>
<info-window id="{resource.id}" max-width="300" style="display: none;">
<div ng-non-bindable="">
<div id="siteNotice"></div>
<a href="" response-click="go">
<h3 id="firstHeading" class="firstHeading">Location - # of Searches</h3>
</a>
<div id="bodyContent">
<p>
{resource.city}
</p>
</div>
</div>
</info-window>
{!end}
</ng-map>
</div>
</div>
</div>
In the below code for Button, I have added ng-disabled condition it is working when I use "qty > 10" but the same condition not working when I add "qty > maxQtySeats" where "maxQtySeats" is my scope variable in which I have assigned value and its printed on html page but not working with condition.
Following is the code of one of the modal
<div class="rectangleSeats">
<div style="width: 300px; float: left;">
<span class="removeSeatstxt" l10n-text="cancellation.removeSeats"></span>
<br/><br/>
<span class="opt-box" style="font-size: 12px;" l10n-text="cancellation.seatstoRemove"></span>
</div>
<div class="quantity buttons_added" style="float: right;">
<form id='myform' ng-app="gemAppSu" ng-controller="ModalInstanceCtrl">
<button ng-click="decrement()" class='qtyminus' ng-disabled="qty<=0" style="background-color: transparent;border: none;">
<img src="assets/img/minus.svg" width="12px" height="12px"/>
</button>
<input ng-model="qty" type='text' name='quantity' id='qty' class='qty' style="font-size: 12px; font-weight: bold;
border: none;height: 44px;width: 52px;text-align: center;"/>
<button ng-click="increment()" style="background-color: transparent;border: none;">
<img src="assets/img/plus.svg" width="12px" height="12px"/>
</button>
</form>
</div>
</div>
<div class="cancellationbtndiv" >
<button type="button" class="btn btn-default nxt-btn" ng-disabled="qty > maxQtySeats">
<span l10n-text="cancellation.buttonnext"></span></button>
</div>
Controller.js
$scope.maxQtySeats = 0;
$scope.maxQtySeats = $scope.activeItem.lineItem.totalQuantity;
Got the solution...
It was a problem of parseInt(), After parseInt($scope.activeItem.lineItem.totalQuantity) it is wokring fine.
Thanks.
i'm using a library called React Contexty, and it has a menu that is inside of the Contextify and is called of ContextMenu, when i do request for it to click in the Item of the ContextMenu, it click but the action not happens.
Cypress:
cy.get("img[data-test=img--menu-candidate]")
.click({
force: true
})
cy.get(".testinhoImg").click({
force: true
})
My MenuContext:
<ContextMenu id={`menu-${this.props.candidate.id}`} animation={animation.fade} theme={theme.light}>
<Item>
<div style={{ width: '50px', marginLeft: '0.5em', marginRight: '0.5em' }}>
<img src={ViewSrc} alt="View" />
</div>
<span className="ibm-plex-sans-serif-regular ibm-textcolor-blue-60"> View </span>
</Item>
Somebody know why? And help-me please?
HTML:
<div class="react-contexify react-contexify__theme--light react-contexify__will-enter--fade" style="left: 447px; top: 308px; opacity: 1;">
<div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; margin-left: 0.5em; margin-right: 0.5em;"><img src="/static/media/view.2844f64a.svg" alt="View"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60"> View </span></div>
</div>
<div class="react-contexify__separator"></div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 65px;"><img src="/static/media/move.f7f8dc44.svg" alt="Move to folder" style="margin-left: 0.5em; margin-right: 0.5em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Move to folder</span></div>
</div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; padding-right: 1em;"><img src="/static/media/email.330dcb30.svg" alt="Send Email" style="padding-right: 1em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Send Email</span></div>
</div>
<div class="react-contexify__item react-contexify__item--disabled" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 65px;"><img src="/static/media/remove-folder.d620c9fb.svg" alt="Move to folder" style="margin-left: 0.5em; margin-right: 0.5em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Remove from folder</span></div>
</div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; margin-left: 0.5em; margin-right: 0.5em;"><img src="/static/media/delete.e899d653.svg" alt="Delete" style="padding-right: 1.2em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Delete</span></div>
</div>
</div>
</div>
I'm applying two css classes onto my html, when I click on my span element.
right now I have a border and looks fine, I want keep this.
but:
so If I click in the Icon I said in the icon <i> the Icon color change for blue.
but I don't want remove the functionality of the span who contains the border.
thanks.
html + angular
<div ng-app>
<div>
<br>
<i ng-class='{"gamepad-red":tog==1}' class="fa fa-lg fa-gamepad"></i>
<span id='1' ng-class='{"myclass":tog==1}' ng-click='tog=1'>span 1</span>
</div>
<div>
<br>
<i ng-class='{"gamepad-red":tog==2}' class="fa fa-lg fa-gamepad"></i>
<br/><span id='2' ng-class='{"myclass":tog==2}' ng-click='tog=2'>span 2</span>
</div>
</div>
css:
.myclass {
border: dotted pink 3px;
}
.gamepad-red {
color: red;
}
.gamepad-blue {
color: blue;
}
jsfiddle: http://jsfiddle.net/zvLvg/286/
I have moved the effect of the span click to the wrapping div and used parent-child CSS to apply the red to the i element.
On click of the icon it triggers a separate boolean that controls a local class
iTog1 and iTog2 can be made to behave similar to tog if there can only be one selected
.selected-gamepad > span {
border: dotted pink 3px;
}
.selected-gamepad > i {
color: red;
}
.gamepad-blue,
.selected-gamepad .gamepad-blue{
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div ng-app>
<div ng-class="{'selected-gamepad':tog==1}">
<br>
<i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': iTog1}" ng-click="iTog1 = !iTog1"></i>
<span id='1' ng-click='tog=1'>span 1</span>
</div>
<div ng-class="{'selected-gamepad':tog==2}">
<br>
<i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': iTog2}" ng-click="iTog2 = !iTog2"></i>
<span id='2' ng-click='tog=2'>span 2</span>
</div>
</div>
I am trying to make the datetimepicker responsive for bootstrap but having issues.
I have seen this plugin:
https://github.com/niftylettuce/bootstrap-datepicker-mobile#requirements
which would be great to use in my application, but the problem is my application doesn't use jQuery (nor do I want it to).
I have the datepicker set up like this:
<div class="col-md-4">
<div ng-model="controller.today" datepicker ng-change="controller.getArchive()"></div>
</div>
Does anyone know how I can make the datetimepicker responsive without using jQuery?
Well I managed to fix this myself.
I created my own templates which looked like this:
<script id="template/datepicker/datepicker.html" type="text/ng-template">
<div class="datepicker" ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)">
<daypicker ng-switch-when="day" tabindex="0"></daypicker>
<monthpicker ng-switch-when="month" tabindex="0"></monthpicker>
<yearpicker ng-switch-when="year" tabindex="0"></yearpicker>
</div>
</script>
<script id="template/datepicker/day.html" type="text/ng-template">
<div>
<div class="row">
<div class="col-xs-2">
<button class="btn btn-default btn-block" ng-click="move(-1)" tabindex="-1"><span class="fa fa-chevron-left"></span></button>
</div>
<div class="col-xs-8">
<button class="btn btn-default btn-block" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1">{{ title }}</button>
</div>
<div class="col-xs-2">
<button class="btn btn-default btn-block"><span class="fa fa-chevron-right"></span></button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="flexbox">
<div ng-repeat="label in labels track by $index">
<small aria-label="{{ label.full }}">{{ label.abbr }}</small>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="flexbox" ng-repeat="row in rows track by $index">
<div ng-repeat="dt in row track by dt.date">
<button class="btn btn-default btn-block" ng-class="{'btn-info': dt.selected, active isactive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled" tabindex="-1"><span ng-class="{'text-muted': dt.secondary, 'text-info' dt.current}">{{ dt.label }}</span></button>
</div>
</div>
</div>
</div>
</div>
</script>
Then I created 2 SASS files, one for the actual datepicker:
.datepicker {
text-align: center;
.row {
> div {
padding-left: 1px;
padding-right: 1px;
&:first-child {
padding-left: 15px;
}
&:last-child {
padding-right: 15px;
}
}
> .col-xs-12,
> .col-sm-12,
> .col-md-12,
> .col-lg-12 {
padding-left: 15px;
padding-right: 15px;
}
}
.flexbox {
margin-top: -1px;
&:first-child {
margin-top: 2px;
}
}
}
and a flexbox one:
.flexbox {
display: flex;
> div {
-ms-flex: 1 auto;
flex: 1 auto;
margin-left: -1px;
&:first-child {
margin-left: 0;
}
}
}
This solved my issue.
I will update this when I have all templates replaced and I will add a jsfiddle.