I want to set custom height (and possible other things) the the flickity 'carousel-cells' INDIVIDUALLY. I can see it is calculated somehow with with javascript by the flickity package itself.
How could I overwrite this, to create something like this (with the smaller inactive slide)?
.
I have tried to give the carousel-cells a height of 300px, and the active carousel (who has a class is-selected) a height of 500px. That did not work.
.carousel-cell {
width: 70%;
height: 300px;
background: #8C8;
}
.is-selected{
height: 500px !important;
}
A simple codepen to get you started if you like.
You need to work off the asNavFor sample until you get to a view like in this CodePen
Related
I have used mat-paginator in my project
and wanted to reduce size of pagination arrows without using ng-deep
screenshot of mat-paginator result
Currently I am able to do it with following code:
::ng-deep .mat-paginator-icon {
width: 3vh;
margin-top: -0.5vh;
}
But have to do it without using ng-deep!
Any suggestions?
I tried encapsulation: ViewEncapsulation.None
and achieved results but that's affecting/disordering other UI features on that web page
add some class to your mat-paginator something like
<mat-paginator class="a-c"></mat-paginator>
then in your global style.css use this class to apply styles
.a-c .mat-paginator-icon {
width: 3vh;
margin-top: -0.5vh;
}
please see this http://jsfiddle.[net]/Nkkzg/108/ (SO doesn't allow to like to JsFiddle) and write 'Apple' in auto-complete text box. You can see a long string appears and with that page's horizontal scroll bar also appear which is very annoying.
I want to show the full string as a result without setting the width, You can see autocomplete results div shows from the left corner to maximum right depending on string length. How can we show the results in the center of page like input textbox, so that horizontal scroll bar shouldn't appear.
Any help will be highly appreciated.
Thanks and Regards.
According to this article:
jQuery UI Autocomplete Width Not Set Correctly
It looks as though you need to place everything in a container and specify the appendTo property telling it where to put the menu.
You should try to use position:absolute
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
border:1px solid #222;
position:absolute;
}
Live Demo
You could try to put this in your .css file
span input.ui-autocomplete-input {
width: 100%;
}
In that way the autocomplete get's the width you have style it to according to the styleClass that is on the enclosing span tag
I really need some help getting a sticky footer with scroll. I have been researching this for a really long time and trying a bunch of stuff. But nothing worked quite right for what I need.
Heres the site
What I need is a footer that stays at the bottom, even when the window shrinks and the panels overflow that when I scroll down, the footer doesn't go up. But I also need to have liquid heights.
Can anyone help me?
You can use twitter bootstrap. Have a look at this.
Your options are essentially to use a framework(twitter-bootstrap and zurb-foundation are both good options) or to write your own javascript/jquery to move the footer as you scroll. Check out this page: http://api.jquery.com/scroll/ You could do something like this:
$('#body').scroll(function(){
$('#body').append('#your_footer');
});
Obviously, this is borderline pseudo-code but it might be a good jumping off point if you don't want to load an entire css framework just to scroll a footer.
So I figured it out without using bootstrap or JQuery.
I need this:
body > #main {
position: fixed;
width: 100%;
height: 100%;
overflow: auto;
}
footer {
position: absolute;
bottom: 0px;
}
as well as adding absolute positioning to footer elements to prevent them from getting pushed down.
Well this is a very strange issue, for whatever reason slider handle is outside it's parent element by half it's height or width, why did they made it that way?...
Anyways, you can see in this fiddle: http://jsfiddle.net/PGLkW/2/ that handle goes way outside it's container, and if i would try to remove margin like so:
.ui-slider .ui-slider-handle{
width:100%;
margin-left:0px;
left:0px;
margin-bottom:0px;
}
Things get's even worse, and from what i can see i would actually need to edit widget itself for such a stupid thing, or am i not seeing something?
So just to clarify my question, i want handle to stay within it's container, and when i click on any place to start dragging as you can see mouse doesn't go exactly to the middle of handle, so it looks really bad.
It looks it doesn't read the css properly, or because there are a lot of solutions they left it for the developers to play with it, and you have to do it until you get the result you want, here there is a solution using margin-bottom in negative:
//CSS
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl{ border-radius: 0; }
.ui-slider .ui-slider-handle{
width: 58px;
height: 50px;
margin-bottom: -25px;
}
//HTML
<div class="slider" style="margin:50px; height:400px; width:50px;"></div>
The fiddle http://jsfiddle.net/RFVZ2/ . I hope this works for you.
The solution is described in this bug report ("this is as designed"): http://bugs.jqueryui.com/ticket/4308
For horizontal slider I used:
.ui-slider-handle
{
height: 24px !important;
margin-bottom: -6px !important;
}
On my site hiphopcanvass.com I added the blogroll in the footer. I want the height to be a certain size, right now its on auto. If the content of the blogroll gets to that height then it will display on the other side until its fully across. What i want can be seen in the image below.
I do something like this in the footer of my site to display my categories (although I'm only displaying them in two short columns).
To do this, I'm using the following CSS to manipulate the list elements:
#footer ul li.footercolumn{float: left; display: block; width: 210px; margin-right: 20px;}
#footer ul li.footercolumn ul li { float: left; width: 50%; margin-bottom:10px; }
(This will have to be customized to fit your application of course).
There are several ways to create multiple columns using CSS, I'd recommend checking out CSS Wizardry's and A List Apart's articles on this subject.
You need to float the <li> left and change the height of the footerwidget from auto to 50px