I am looking for the range bar which is rotated 90 deg(vertically). When it is rotated vertically I am unable to select to the respective step points in the range bar. Whenever the knob is tried to move is it not moving to the desired step points. The touch functionality is not smooth.
The following is the css:
I am rotating the component using the following CSS. After applying this css property transform: rotate(-90deg) the ion-range step is not properly working in the UI(i.e.,The range slider is not moving properly).If any alternate solution apart from this css property I am open for your suggessions.
ion-range { [The following has the final Rangebar I am looking for ][1]
transform: rotate(-90deg);
position: relative;
}
The following is the html
<ion-range min="1" max="5" step="1" snaps="true" color="primary"
[(ngModel)]="abc"></ion-range>
![1]: https://i.stack.imgur.com/aODnC.png
Related
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'd like to prevent a specific slide of my deck to become blurry when moving to next slide.
How can I achieve that?
In the default themes, incrementally displayed elements that are not active anymore are made half-opaque (blurry). You can thus force a given element to be always fully opaque.
For example, you can replace :
<div class="slide">should stay opaque</div>
by
<div class="slide" style="opacity: 1.0" >should stay opaque</div>
Alternatively, if you are used to CSS, you can also modify the stylesheet and for example add a class "stay" to your element and, in your CSS:
.stay { opacity: 1.0 !important; }
i am using foundation for my first project right now and i really love the functionality it provides out of the box, but i am having trouble with my custom radio boxes.
The idea is to not only have text inside of the radio buttons label, but also an image and some bold text.
As soon as i start using either an img or a bold tag inside of the label, the radio button selection via the labels text is broken.
The code i am using is this
<label for="radio2">
<img src="img/nho_musicians_flute.png">
<input name="radio2" type="radio" id="radio2" style="display:none;" CHECKED>
<span class="custom radio checked"></span>
<b>Radio</b> Button 1
</label>
With this it is only possible to select a radio box by clicking on it DIRECTLY, clicking the text or the image results in erratic selections, it seems that the foundation JS selectors didn't account for extra tags inside of a label.
Is there a way to make this work with foundation, or do i have to resort to workarounds (making the whole text bold and put the image outside of the label)?
Good question, I had the same issues as you when I needed to create custom forms through F4's custom form implementations.
If you look in the implementation (custom.forms.scss) you can see that they use the :before and content: "" in order to be able to achieve this. I suspect that's why you can't add any tags after the <span class="custom radio"></span>
Now what you CAN do as a workaround is to place your custom elements etc inside the <span> element. This will work just fine, but will look wierd as the width and height is very small. But from then on its just a matter of styling it until you get it to look as you want. Here is a really simple example using absolute positioning:
<span class="custom radio">
<span style="position: absolute; top: 0; left: 0; width: 500px; margin-left: 30px;">
<b>test</b> foo
</span>
</span>
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.
Ok.. So I've checked (to the best of my abilities) in the issue list, but haven't found anything similar.. If there is an answer out there, apologies about adding a duplicate...
I am using the Foundation 4 framework, with the latest version.
I have bullets (UL mostly) at a lot of places. However, When I use text-align: center for any text with a bulleted list, the normal text and the list text is center aligned, but the bullets themselves (square, disc and so on) are not.
Now the weird part.... this issue occurs only in Chrome and IE9/IE10. It works as intended on Firefox / Safari. I've also tried using the .text-center class (part of foundation.css) which essentially does the same thing i.e., text-align: center.
Here's the test link http://www.crevolve.com/testing/ ....
Any help is much appreciated... Thank you...
I have bullets (UL mostly) at a lot of places. However, When I use
text-align: center for any text with a bulleted list, the normal text
and the list text is center aligned, but the bullets themselves
(square, disc and so on) are not.
You need to set the list-style-position of your ul, that by default has a value of outside. It means that the bullets will be outside the content flow (read more about it here).
To solve your issue you can do this:
ul.square {
list-style-position: inside;
list-style-type: square;
text-align:center;
}
But hang on that will NOT totally solve your issue, I think, because if you have different length of texts in your ul then everything will be centered. That means they will not be aligned and it will not look good. Look at the first slide on this fiddle to see what I mean.
To have it centered and make it look good you can do the following:
.container {
float:right;
position:relative;
right:50%;
background-color:lightgreen;
}
.inner-container {
float:left;
position:relative;
left:50%;
background-color:lightyellow;
}
ul.square {
list-style-type: square;
width:300px;
}
<div> /* the wrapper div */
<div class="container"> /* outer container to offset by 50% */
<div class="inner-container"> /* inner container to make it center */
<ul class="square">
<li>First Item</li>
<li>Second Item, this is a longer text</li>
</ul>
</div>
</div>
</div>
The working sample is on slide 2 of the sampled jsfiddle. I included a background color so you can better see how it works.
If you want to keep the display of list-style-position: outside, while being able to center you bullet and list content on Chrome:
ul {
list-style-position: inside;
}
ul {
padding-left: 11px;
text-indent: -11px;
}
li {
margin-left: -11px;
}
Downside: 11px is the width of the space bewteen the begining of the bullet and the begining of the text of your li. It's an ugly magic number, that may vary from one browser to another. Il haven't found any way to rationalize it, unfortunately...