i started a new project using Foundation 6 and there is one problem i can't fix.
My Topbar has a lot of links and when it comes to <= 800px the topbar breaks into two columns, so that it doesn't look good anymore.
Now i want to add a new breakpoint and set the data-hide-for value to this new breakpoint.
<div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="test">
<button class="menu-icon" type="button" data-toggle="responsive-menu"></button>
But when i change for test purpose the medium breakpoint from 640px to 800px in the _settings.scss, the topbar still breaks at 640px, like i haven't change anything.
$breakpoints: (small: 0,medium: 640px,test: 800px,large: 1024px,xlarge: 1200px,xxlarge: 1440px,);
Does anybody have a solution for my problem ?
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 a newbie to Ionic 2 and I want to use my own icons/image slices (like those i place in drawable folders in native android). Like in the list view I want to add an icon along with some text. I can found such examples nowhere. Any help would highly be appreciated.
Following will be your Css file
.icon{
background-image: url("../assets/icons/ic_icon.png");
background-repeat:no-repeat;
}
Ionic 2 HTML code
<button ion-button color="secondary" clear>
<div class="icon">
<p>Icon</p>
</div>
</button>
This will work for you , in ionic 2, button tag is optional , it's there to add the tap effect
try icomoon service, which provides css files and fonts that easy include in project
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.
I have a simple form that I want to be shown on a button click. i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.
The first problem i am facing is:
using this code
function AngularUI($scope, $window) {
$scope.collapse = function (selector) {
angular.element(selector).collapse();
}
}
and
<div class="ang-ui-test">
<button ng-click="collapse('#collapsible')">
using angular.element
</button>
<div id="collapsible" class="collapse">
some thing in here ...... !
</div>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
<div id="demo" class="collapse in">This one work properly</div>
</div>
the second one that does not uses angular.element.collapse works properly.
The second problem is : how do I test the behavior mentioned above.
on the first button press, the one that uses angular.element if the div is hidden it is shown but, it does not hide the collapsible after it is shown.
( i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.
thanks in advance.
You're doing it wrong. It's bad juju to do DOM manipulations in the controller because you are trying to look for / manipulate the DOM before it had a chance to render/refresh/update. Think of all the JS in the controller being executed in it's own phase, and THEN all the HTML is updated to reflect the final model state.
Try using ng-class="{collapse:someBoolExpression}"
You could also take a look at ui-hide, ui-show and ui-toggle (from AngularUI, but I think we should probably add a ticket to let you customize the class used.
Try to get the mindset of doing DOM manipulation manually out of your head. It takes a while, but once you get used to it your development speed picks up exponentially. When you finally hit a wall where Angular can't already do the job for you, start reading up on directives and checkout AngularUI's source code for some good, commented examples.
So yeah, I have this on the page:
<div class="addthis_toolbox addthis_default_style " id="divAddThis" runat="server">
<a class="addthis_button_facebook_like" style="opacity:1;" <%="fb:like:layout='button_count'"%>></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
But after clicking the like button (and closing the bubble), a <span> just inside the <fb:like ...> element dynamically gets a width of 450px, breaking the layout of AddThis (the buttons are all inline).
Recommendations?
Seems like it might be a bug on Facebook's side of things. I've seen a few reports pop up this week and I'm experiencing it myself as well.
Here is a link to one of the bug reports for it that says that Facebook is looking into it:
Facebook Bug Report
Hopefully we'll have an answer soon.