I want to create a ui like giphy. Pic of the ui is given below.
How can I create this masonry grid layout using ion-grid where adjacent columns heights are not same. I could create a satisfactory masonry grid layout using 2 column in grid and each columns contains multiple ion-card. Though scrolling is working in web, it is not working in android build. what could be the reason for it. For scrolling I used ion-infinite-scroll.
<ion-grid>
<div *ngIf="!isSomeGiphiesLoaded() && loadingNext" align="center" class="div-center">
<ion-spinner style="transform: scale(2)"></ion-spinner>
</div>
<app-no-item-found [label]="'No search results found!'" *ngIf="!isSomeGiphiesLoaded() && !loadingNext"></app-no-item-found>
<ion-row>
<ion-col size="6">
<ion-card class="ion-no-margin ion-no-padding"
*ngFor="let giphy of giphiesLeft; let i = index">
<app-giphy-view [giphy]="giphy"></app-giphy-view>
</ion-card>
</ion-col>
<ion-col size="6">
<ion-card class="ion-no-margin ion-no-padding"
*ngFor="let giphy of giphiesRight; let i = index">
<app-giphy-view [giphy]="giphy"></app-giphy-view>
</ion-card>
</ion-col>
<ion-infinite-scroll *ngIf="queryString===''" (ionInfinite)="loadDataV2($event)" threshold="100px">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more gifs...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
<ion-infinite-scroll *ngIf="queryString!==''" (ionInfinite)="loadSearchedData($event)" threshold="100px">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more gifs...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-row>
</ion-grid>
Related
I'm learning to handle typo3. I understand that what I'm using here is Fluid to call the variable from my backend
I have this template
<f:layout name="Default" />
<f:section name="Main">
<div class="container">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '21'}" />
</div>
</f:section>
And this is the template? I'm printing my content element with.
<html data-namespace-typo3-fluid="true"
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
<div class="row">
<div class="col-7 ">
<div class="screen">
<div class="screenshot">
<f:for each="{screenshots}" as="screenshot">
<f:image style="opacity: 1;" image="{screenshot}" />
</f:for>
</div>
<a href="#" target="_blank">
<img src="typo3conf/ext/hebotek_website/Resources/Public/Images/screen.png" width="100%">
</a>
</div>
</div>
<div class="col-5">
<f:for each="{logos}" as="logo">
<f:image style="opacity: 1;" image="{logo}" />
</f:for>
<div class="project_desc">
<h3>
{data.header}
</h3>
<f:format.html>{data.bodytext}</f:format.html>
</div>
</div>
</div>
</html>
This will print two columns, the first one with a picture and the second one with a header and a text.
I want to print one time the image at the left and the next time the image at the right and the next at the left again. How do I alternate the html here? Is this possible with fluid or I must take a different approach?
Something like:
if(index % 2 == 0)
{
print left
}
else
{
print right
}
In any of this two templates I have an array in order to do this.
Thanks!
Unfortunately, there is no real alternate functionality in fluid.
You could use your approach with a condition:
<f:if condition="{index % 2 == 0}">
<f:then>
print left
</f:then>
<f:else>
print right
</f:else>
</f:if>
Fluid also provides a way to render partials in separate files, to reduce the amount of markup in your template:
<f:render partial="path/to/your/partial/left">
But a better approach will probably be to use css to alternate your layout.
For example with flexbox:
.row:nth-child(even) .col-6.image {
order: 1;
}
.row:nth-child(even) .col-6.text {
order: 2;
}
.row:nth-child(odd) .col-6.image {
order: 2;
}
.row:nth-child(odd) .col-6.text {
order: 1;
}
This way, you can also use a media query, to keep your top-bottom order for smaller screens, so your images or your text are not next to each other.
In ionic/vue I cant figure out how to get slide index. getActiveIndex is not even firing, it is on the documentation but its not clear how to use it. ionSlideDidChange fires but I cant see anything related to index of an active slide. What is the best way to know which slider is active?
<ion-slides pager="true" #ionSlideDidChange="ionSlideDidChange" #getActiveIndex="getActiveIndex($event)" :options="slideOptions">
<ion-slide v-for="item in paymentAccounts" :key="item.code">
<div class="account-info">
<div class="account-name">
{{ item.label }}
<br />
R {{ item.balance }}
</div>
<div class="account-footer">
<ion-grid>
<ion-row>
<ion-col class="moneyInOut-label">Money-In</ion-col>
<ion-col class="moneyInOut-label">Money-Out</ion-col>
</ion-row>
<ion-row>
<ion-col class="moneyInOut-amount">{{ item.moneyIn }}</ion-col>
<ion-col class="moneyInOut-amount">{{ item.moneyOut }}</ion-col>
</ion-row>
</ion-grid>
</div>
</div>
</ion-slide>
</ion-slides>
JS:
methods: {
getActiveIndex(r) {
console.log("r", r)
},
ionSlideDidChange(e) {
console.log("e",e)
},
}
I think you can do something like this (at least, it works for me):
ionSlideDidChange(e) {
e.target.getActiveIndex().then(i => {
this.activeIndex = i;
});
}
Hope it helps,
I have one check box and two links with same classes & same Div.During the automation testing using protractor, i want to click on check box but it click on Links.
i am writing this code but its not working, please provide a solution.
Code:
element(by.id('Remember')).click();
[1
please find HTMl code:-
<div class="input-field">
<div class="pas_rembr">
<input name="remember" id="Remember" class="css-checkbox ng-dirty ng-valid-parse ng-touched ng-not-empty ng-valid ng-valid-required" ng-model="rememberMe" type="checkbox" ng-required="true" required="required">
<!-- <label for="Remember" class="css-label">I agree with the <a class="text_link" target="_blank" ng-href="{{baseUrl}}terms-conditions">Terms & Conditions</a>.</label> -->
<label for="Remember" class="css-label">I have read and I agree with <a class="text_link" target="_blank" ng-href="/lmd/terms-conditions" href="/lmd/terms-conditions">Terms and Conditions</a> and the <a class="text_link" target="_blank" ng-href="/lmd/privacy" href="/lmd/privacy">Privacy Policy</a> of this site.</label>
</div>
<span class="errorForm ng-hide" ng-show="(memberForm.remember.$dirty || submitted) && ((memberForm.remember.$error.required))">
<span class="errorForm ng-scope ng-hide" ng-show="memberForm.remember.$error.required" translate="TERAMS_CONDITION_IS_REQUIRED">Terms and condition is required</span>
</span>
</div>
Try this:-
var el = element(by.css('label[for="Remember"]'));
browser.actions().mouseMove(el, {x: 20, y: 3}).click().perform();
For your tests, the CSS selector would be
element = $$('label.css-label > a:nth-child(2)');
This should be able to click on the second a child of the label element.
A work's client has reported an issue in our application when working with IE11.
On an specific form, sometimes, when opening it, if you type, the typed text won't show. If I open developer tools, it suddenly shows.
This is the rendered html belonging to that form:
<div class="col-sm-6 ">
<div class="form-group" data-ng-show="myform.txtPropietario.visible">
<label class="col-md-4 control-label my-show-hide-animation">Propietario:</label>
<div class="col-md-8">
<div class=" ">
<input name="txtPropietario" class="form-control text-left ng-pristine ng-valid" input-alpha-numeric="ES" onblur="this.value=this.value.toUpperCase();" data-ng-model="myform.values.txtPropietario" data-ng-disabled="myform.txtPropietario.disabled" type="text" step="0.01" maxlength="50" placeholder=" "></div>
<ul class="errores my-show-hide-animation ng-hide" data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$invalid && myform.procesado"><li data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$error.required" class="ng-hide"><span>Campo obligatorio</span></li><li data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$error.pattern" class="ng-hide"><span>El formato del dato ingresado no es válido.</span></li>
</ul>
</div>
</div>
</div>
The app work's over AngularJs and html is built over Bootstrap 3.
Any idea why is this happening?
It's hard to tell without seeing the CSS, however i encountered this issue a while back and fixed it by setting the height of the input box.
My theory is that IE didn't think there was enough height to show the text in the font size I had specified.
For example
<input type="text" id="example" style="height: 40px" />
I hope this helps.
I'm currently struggling while implementing a Spider for a Web Application, because my pages are not well structured at all. There're fields on the page, but sometimes they don't appear, and it's difficult to distinguish those because they only use class, not id as identifier. Is there a method to optimize the way we get the data in pages?
Below, an example of one page to crawl :
<div class = 'view-activity-field-wrapper even' style = 'display:none' >
<div class="view-activity-label">Status Notes <span><img src="/images/helpIcon.png" alt="" width="8" height="10" align="absmiddle" data-tooltip="stickyStatusNotes" /></span>
</div>
<div class="view-activity-field"></div>
</div>
<div style = 'clear:both'></div>
<div class = 'view-activity-field-wrapper odd' style = 'display:none' >
<div class="view-activity-label">Relevant Question <span><img src="/images/helpIcon.png" alt="" width="8" height="10" align="absmiddle" data-tooltip="stickyRelevantQuestion" /></span>
</div>
<div class="view-activity-field"></div>
</div>
<div style = 'clear:both'></div>
<!-- KEEP VALUE PROVIDED HERE -->
<div class = 'view-activity-field-wrapper odd' style = 'display:none' >
<div class="view-activity-label">Value Provided <span><img src="/images/helpIcon.png" alt="" width="8" height="10" align="absmiddle" data-tooltip="viewvalueprovided" /></span>
</div>
<div class="view-activity-field"></div>
</div>
<div style = 'clear:both'></div>