I am using Foundation 5 and trying to include a menu inside of an accordion. When the accordion is clicked and expands it works fine but rather than pushing the below content down when opened, it opens over the background of the below content, but under the content of the below content.
I have tried to change the z-index of the accordion to 0 but it does not help. I have also added the clearfix class to no avail.
Can be seen here
Any help or suggestions would be appreciated.
Thanks,
Pete
The error is in this line:
<div class="large-3 medium-4 columns hide-for-small sidebar-wrap" data-equalizer-watch="" style="height: 228px;">
You've set a fixed heigth for the container. Since it is already at max height, it can't expand further down.
remove style="height: 228px;" and everything gets pushed down. If you need a fixed height, so the content doesn't snap up and down everytime the user clicks on the accordion set it to height: 402px;. Thats the value Chrome tells me for 4 elements, with one expanded.
Related
This ionic page is just a form with some elements. In the Phone field, I have created a modal that opens when you click on an image:
<ion-grid>
<ion-row>
<ion-col>
<form #registerForm="ngForm" novalidate [formGroup]="form">
[...]
<ion-item>
<img item-left margin-left src={{flagPath}} (click)="presentCountryModal()">
<p item-left (click)="presentCountryModal()">+{{countryCode}}</p>
<ion-icon item-left name="arrow-dropdown" (click)="presentCountryModal()">
</ion-icon>
<ion-input
placeholder="Phone"
type="text"
[(ngModel)]="account.phone"
name="phone"
required
pattern=".{8,}"
#phone="ngModel"
></ion-input>
</ion-item>
It works perfectly on iOS and Windows on ionic-lab. But in Android the behavior is different: when I click on the image, the Phone ion-input gets the focus and the whole form moves up, making space for the keyboard and hiding the field under the header.
I'd like to:
1) Be able to make the image clickable.
2) Disable the automatic scrolling when an ion-input gets focused. I've tried keyboard.disableScroll(true) with no success.
Any ideas? Thanks!
UPDATE:
As explained here, adding .input-cover { position: static; } to the scss files stabilizes the form and makes the image click event responsive! So that solves the first question.
But I still have the problem that, when the keyboard opens, the whole page moves up and the top elements hide below the header (and you can't scroll them down).
1) You need to make a separated ion-item form the img. If you have an ion-input inside an ion-item, everything you put together will be "part" of that input.
2) The easiest way to do this without manipulating via ts is using a regular input, not the ion-input or using the ion-input inside a div instead of the ion-item. The second one i'm just guesing, since the behaviour of the scroll for showing the keyboard happens if you have an ion-input inside ion-item.
Hope this helps :)
I am trying to pull off a "trick" in ionic2 as follows:
- I have one slide set to loop.
- When the slide is swiped I increase or decrease a variable
- that variable will cause different data to display in the slide.
This way I can get the full UI experience of the slides component without hardcoding or pre-loading all the other slides.
For eg lets say you are viewing data by day, I want to be able to slide back and forth to look at data from previous days. Given the change I will just reload the relevant days data.
It ALMOST works except that the slider doesnt seem to refresh properly when looping.
Take a look this
http://plnkr.co/edit/VlxrNO7I6sqLGHsLdB9R?p=preview
<ion-slides loop="true" (ionSlidePrevEnd)="slideChanged(-1)" (ionSlideNextEnd)="slideChanged(1)">
<ion-slide>Slide{{newval}}
Test
</ion-slide>
</ion-slides>
</ion-content>
Controller
export class HomePage {
appName = 'Ionic App';
newval: number = 0;
constructor(public navController: NavController) { }
slideChanged(step: number) {
this.newval = this.newval + step;
}
}
If you swipe back and forth the text doesnt change. It should increase or decrease eg Slide 1, Slide 2 etc...
BUT do a few swipes and then instead of swiping just click down on the slide and move it a little and THEN the label does refresh to give you the correct value!
Its almost like because I am looping - all thats displayed is the original slide value and not the updated value, until I click somewhere on the slide causing it to refresh.
So bottom line I assume this is a bug?
Is there any way I can trigger this "refresh" behaviour programmatically?
Thanks
Hi change your code for home.page.html to:
<ion-slides loop="true" (ionSlidePrevEnd)="slideChanged(-1)" (ionSlideNextEnd)="slideChanged(1)">
<ion-slide *ngFor="let item of items">Slide {{newval}}
<ion-list>
{{item}}
</ion-list>
</ion-slide>
</ion-slides>
I have tested it in plunker and the content will change when you slide. Do ngFor for each ion-slide instead of within the ion-slide
Try this ionic 3
<ion-slides loop="true" autoplay="1" speed="6000">
<ion-slide>Slide A</ion-slide>
<ion-slide>Slide B</ion-slide>
<ion-slide>Slide C</ion-slide>
</ion-slides>
I am making phonegap application using Onsen-UI. In that,I made a signup page. Now whenever I am trying to scroll the screen, whole body of page is scrolling. I want a particular division in a body that should scroll only. I have app Logo above the signup page and Logo is in the body part. So that shouldn't be scrolled. Only List div should be scrolled.
You can try using the <ons-scroller> directive:
<ons-scroller style="height: 200px">
<p>I am scrollable</p>
</ons-scroller>
I made a simple example: http://codepen.io/argelius/pen/dPeKOB
This option works to me:
<ons-page>
Toolbar here
<div class="background"></div>
<div class="content">
Scrollable content here
</div>
Fixed content here
</ons-page>
from: https://onsen.io/v2/api/js/ons-page.html
I am designing a site that has images that when hovered over fade a text appears.
I have used the below thread to do this, all went well however when the text I am adding in goes to the full width and height of the image it's going over. I've tried to add padding to the text through my CSS but it doesn't work.
DIV with text over an image on hover
Here is my amended code, amended
CSS
p1{font-size:1.3em;text-align:left;color:#ffffff;font-family: 'geosanslightregular';margin:100px 20px 0px 20px;padding:0;}
div.containerdiv{position:relative}
div.texts{position:absolute; top:0; left:0; width:100%; display:none; z-index:10}
div.texts:hover{display:block}
html
<div class="grid_8">
<a href="cncpt.html">
<div class="containerdiv">
<img src="images/cncpt.jpg" alt="background">
<div class="texts">
<p1>LAUNCH OF E-COMMERCE MENSWEAR STORE, STOCKING EVERYONE FROM BALMAIN AND GIVENCHY TO ADIDAS X OPENING CEREMONY, YMC, NIKE AND BEYOND. BREAK HOSTED THE LAUNCH EVENT AND INTRODUCED 200+ KEY MEDIA, BRAND AND INDUSTRY CONTACTS TO THE STORE. WE CONTINUE TO OPERATE THE PRESS OFFICE FOR CNCPT AND HAVE PICKED UP FANS EVERYWHERE FROM GQ DAILY AND METRO, TO KEY ONLINE INFLUENCERS.</p1>
</div>
</div>
</a>
</div>
<!-- end .grid_8 -->
Still no joy! it's showing the image fine but no text is showing over it or anywhere on the page for that matter!
Any ideas on how to solve this would be greatly appreciated.
Thanks,
John
A simple answer using CSS is to use the :hover pseudo class on an anchor tag.
Set you image container as position:relative in CSS.
Create a div containing your text, formatted using html and CSS inside the image container. Position this absolute in CSS. Absolute positioning positions elements relative to the parent container positioned relative. If no element is set to position relative it will take its position from the body tag. It is important to set a width to the element too.
THE HTML
<div class="container">
<a><img src="img.jpg" alt="background">
<div class="text">I will show on hover</div>
</a>
</div>
CSS
div.container{position:relative;}
div.text{ position:absolute; top:0; left:0; width:100%; display:none; z-index:10;}
a:hover div.text{display:block;}
This will position the text over the container you set to position relative aligning to the top left corner. The z-index stacks elements one above the other. The higher the z-index the higher the element is in the stack.
w3 schools have some excellent definitions and examples on all the code above if it is new to you.
The effect you are after can be achieved with html and css alone. I would advise you focus on:
design your site on paper
layout your page with html and CSS
add your rollover effects and jQuery animations
before adding the jQuery animation
CSS3 transitions are not compatible with all browsers, there are work arounds in CSS though a jQuery fallback is often used.
I have problem using nav-bar menu on foundation 3. I use default code on foundation 3 old doc but the menu become down. Please see my attach. [https://f.cloud.github.com/assets/4178068/487263/0e3ed49a-b951-11e2-9e10-ce74723ef6b3.jpg]
Please help regarding my problem. Thank you.
Some code:
<ul class="nav-bar">
<li class="active">Menu 1</li>
</ul>
The items on your nav-bar are exceeding the width of your template. You have to either give a bigger width to the .row class located in the foundation.css or remove some items from the nav-bar.