Good morning. I'm trying to make a drag and drop form builder based on Ionic2. In that process when I drop the ionic component's code into my dropable area I can't find it rendering the exact html. For example if I pass the following code snippet into the [innerHTML] it does not render an input element of text type.
<ion-item>
<ion-label fixed>Username</ion-label>
<ion-input type="text" value=""></ion-input>
</ion-item>
I think Ionic does the transpilation before it renders actual code. But I don't know how to invoke that process so that dynamically dropped ionic component becomes visible as a preview.
Thanks in advance for your help. If you need further information please feel free to ask me. I'll be very glad to hear from you.
Related
what I would like to do in RED BOX:
hello. obviously I am new and very much a beginner.
I am using ember.js for my application frontend and bootstrap to ease the styling process. I want to build a top fixed menu bar like the picture attached and a left navigation bar with scrolling like the picture attached. maybe because I am new thats why I am unable to use the manuals properly to land me at this point.
if anyone choose to help, need to know 1st that if there are already defined builtin components in ember.js to solve this issue (I am using ember v3.18), I am unable to find any.
2nd, if 1st question answer is no, then how can I build it - or are there any suggestive codes available online for me to learn from?
In my Ionic3 app, I have a slides component with a bunch of slides, and I want to be able to click on each of them. So code would look like:
<ion-slides>
<ion-slide *ngFor="let s of slides" (click)="onClick()">Slide</ion-slide>
</ion-slides>
The problem I have is that very often, when I try to click on the slide, it actually does a swipe of the current slide and shows the next one, therefore the click never happens. This happens mostly using a tablet, as I guess my finger is less stable and if the click is not perfect then it will slide.
Is there any way to make the click less sensitive (so that even a small variation of distance between down and up event is recognized as click not swipe)?
You can just first get your swiper using querySelector:
let mySwiper = document.querySelector('yourSwiperSelector');
Then just change the treshold:
mySwiper.threshold = 100;
It worked for me. In my case it was ionic2-calendar and my selector looked like this:
let mySwiper = document.querySelector('.swiper-container')['swiper'];
There's a lot of options available that ionic don't list but you can see them here in the library that ionic slides uses:
http://idangero.us/swiper/api/
Setting the Touches threshold to a reasonable value should help.
If you have a reference to your slider, you can simply say this.slider.threshold = 100;
<ion-slides pager>
<ion-slide *ngFor="let s of slides" (click)="onClick()">Slide</ion-slide>
</ion-slides>
So I want to be able to do this common suggestion functionality in ionic 2:
Here is a starting point of reference. Pretty basic.
<ion-content padding>
<form novalidate>
<ion-item>
<ion-label fixed>Location</ion-label>
<ion-input required type="text"></ion-input>
</ion-item>
</form novalidate>
</ion-content padding>
I can rig the input to googles AutoComplete box. However, since I cannot force a selection in that provided box, I cannot work with it. So this is not an option in my case. Apart from that one problem, everything would work as expected.
I can't use a SearchBar here. It just donsn't fit into the form properly. I can't have a Label and a SearchBar. The Searchbar just vanishes.
I can't put a List inside an Item. So I can't add a list under the Input.
I can revisit 3, but put the list under the Item. This isn't really what I want to do though. The List is connected to the Input Moving it outside just creates new problems with how the form behaves unless there is a way to make it float?
Does anyone have any alternative techniques that I could try? Am I missing something obvious here?
I have a simple question which I'm hoping someone will nail in not time.
I'm just running through some Acceptance tests with Codeception and I'm attempting to click a submit button of type image:
<div id="payment">
<input name="submit" type="image" value="" alt="Review your order" src="/images/buttons/pay-securely.png">
</div>
Simply using $I->click() results in a failing test:
$I->click('#payment > input[name=submit]');
Any ideas?
I too have run into trouble with unambiguously specifying what I want to be clicked. Here are two workarounds I have found:
Use a CSS class, or better, an ID, as a selector:
$I->click(['id'=>'myButtonID']);
Use JavaScript / JQuery to trigger the click:
$I->executeJS("$('input[name=submit]').click();");
I prefer the former, because it is easier to do, but I use the latter for cases e.g. where I don't have much control over the code being tested.
I've been in touch with Codeception directly with no reply on the matter. With no way of testing this (and the obvious design flaw in using an image submit button - I mean, are we in the 90s or what?!) I've now changed the input to a proper submit button and CSS that bad boy!
Thought I'd answer my own question and leave it here in the (hopefully unlikely) event that another poor soul has inherited shoddy work.
Morning,
I wanted to find out if its possible to make a change to the current foundation 5 navbar without breaking it for mobile and desktop views.
basically the current one sits the left text/image to the far left and the nav menu to the far right, which is great when the design is across the entire page, but if the content is centralized in the middle sort of like the normal 960 web layouts, it looks a bit weird at times.
is it possible to have the left image/text and nav menu links centralized in the center like it would be seen if it was in a 960px wrapper.
this all ofc without stopping the responsiveness of it.
Thanks
It sounds like what your are trying to accomplish is to center a top-bar navigation within a row.
If that's the case then you can use <div class="contain-to-grid"> to keep your top-bar within your grid layout and something like <div class="small-9 small-centered columns"> to center the row that the top-bar is in. I created a codepen example for you to look at here: http://cdpn.io/jJhyn.
The classes mentioned above are all part of Foundation so you will not be affecting the responsiveness of your design.
For a complete list of the options available to customize the top-bar see the Zurb Foundation Top Bar documentation.
If I have misunderstood your question let me know, and code is always appreciated.
I hope that helps.
EDIT: 02/13/2014
I was looking into another issue when I stumbled upon this, How to center top-bar nav?. It center's the buttons/links within the top-bar, not the top bar itself. They page they used as an example is Mister Dutch. I updated the codepen above to reflect what I found on the Foundation Forum.
Again, if I have misunderstood your question let me know.