I'm trying to educate myself about Flickity. The carousel auto plays and the selected cell (denoted by the grey background) is automatically in the middle. I would like the selected cell not to be in the middle. I'm looking for a way to may it be the cell to the left, so it is above the dots (desktop view).
Hope that makes sense. Here is the jsfiddle for it.
The only method that I can think of is using jQuery to find the prev sibling for the "is-selected" class and adding a class to it, but I was hoping there may be a simpler method
Thanks in advance for your feedback!
<div class="carousel-outer-flick">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell is-initial-select"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
add this
<Slider
options {{
cellAlign: 'left' //this part will shift your entire slide to left
}}>
...
Related
I'm currently facing a big issue in the https://www.npmjs.com/package/#angular/flex-layout library. The problem is the fxLayoutGap setting for grid likely designs but just as a flexbox.
The actual problem is that when I use this settings fxLayout="row wrap" fxLayoutGap="25px grid" fxFlexFill on each box/grid element to add a gap between each boxes, I'm also getting a gap at the last element of each row. In my eyes there should be no gap to prevent a useless padding there:
I did a lot of research. The most nearest answer on SO is this one:
Remove padding from fxLayoutGap last element of row
But this answer is just about the las element in a single row so the answer don't helps. So I've continued searching and found this:
https://github.com/angular/flex-layout/issues/363
This is an issue in the actual library. But sadly the developer says that this is not a bug and should be fixed by the developer. But I think this is not true...
He provided this answer here...
Simply add a CSS style [fxFlex]:last-of-type { margin-right:15px; }
... and closed the ticket: Closing as a will-not-fix issue. So not very helpful. After trying the answer this way [fxFlex]::nth-child(4n) { padding-right:0px !important; } I've found out the the last element get's bigger which looks bad:
This is my code:
<div id="list" class="shadow-box-list" fxLayout="row wrap" fxLayoutGap="25px grid" fxFlexFill>
<div class="widget" *ngFor="let element of elements" [fxFlex]="fxFlex">
<div class="shadow-box-list-widget-content mat-elevation-z3" fxLayout="row" fxLayoutAlign="center center">
<div class="name">{{element.name}}</div>
</div>
</div>
</div>
So does anyone had the same issue/problem before and can share the answer with me? I really don't know how to solve this.
This is a continuation of a small project I started on over the weekend (I raised a query re H1 header size). I've got this as far as I want to take it at this stage (simple to-do list - non-functional at the moment). I added a navbar and designed an imported my own logo (in the menu bar and at the bottom of the screen). I've included the code from a codepen but for some reason (not sure at the moment) it hasn't pulled through the background colour and logo PNG hence why I've included a screenshot too.
However, the issue is that I cannot locate where I'm going wrong with regard to the containers not lining up: you can see the first two containers (with one row each - with the ADD rect which I'm going to change to a box and the 'You have '3' complete tasks:" rect box) then the five containers/rows below that are offset from those above.
The code for the "container-row-col" is (as far as I can tell) the same, but would placing all these rows in one container (containing all the 7 rows plus their columns) make a difference?
Maybe the media queries need to be looked at?
<div class="row">
<div class="col-8 col-md-6 white-rect mr-4 mb-2 ">|.............................................
</div>
<div class="col-6 col-md-4 white-rect center-block">ADD</div>
</div>
</div>
Here's a snippet of the container-row-col code with a codepen link below. I can only apologise for the amount of commenting out I've done...part of my learning process I guess.
Many thanks.
Codepen
Screen Shot of Full Page as it appears in my browser
You have too many nested containers. Just put all your .rows into one parent .container or add some style to the nested .containers witch will remove the extra padding. Something like this:
.container .container {
padding: 0;
}
I've been creating a website thats organized mostly with display:flex. All the content is in one html and using JQ to show() and hide() the different content. Now I'm trying to create a "pop up" window using a div. I initially hide() the popup div. when I click the button(which is a flex item) nothing seems to happen. Its as if the properties of flex are pushing it out of the way. Here is a sample of why my code looks like. Does anybody have experience with this?
<div class="flex-container">
<div class="button"></div>
<div class="button"></div>
<div class="button-to-click"></div>
<div class="popUp"></div>
</div>
$(".popUp").hide();
$(".popUp").click(function () {
$("#wgl-welcome").fadeIn(500);
});
Here is an updated JSFiddle of what I'm trying to accomplish. Of coarse - works in the fiddle haha. Possible something out side the container is effecting it.
https://jsfiddle.net/ab3d/97bcnvnr/5/#&togetherjs=5lME62V5tt
I asked a similar question already, but I'm still having this problem.
The website I made has a bug on tablets. The different content sections don't display properly on tablets - things overlap. The Google Maps iframe, for instance, shows upon page load, not upon clicking on the corresponding radio button (label!). This only happens on tablets.
After some deep thinking, I found that the radio buttons are probably the culprit. On desktops everything looks A-OK.
Sorry, I can't make a JSfiddle to reproduce the tablet issue (help is explicitly sought only from those who can use dev tools, take a quick look and maybe point me to what needs to be done in order to make it work on tablets, in short only from real badass cross-browser Chucknorisses).
Help would be much, much appreciated!
UPDATE:
The radio-buttons I'm talking about are 'design-hidden' to only keep labels as visible / clickable elements.
The code looks like this (this would be the yellow 'home' button):
<div class="mx-button" id="real_button5">
<input type="radio" name="mx" id="button5" checked>
<label for="button5" onclick="" style="background-color: rgba(255,216,0,1);">HOME</label>
</div>
It seems that on tablets, these buttons are clickable (something happens), but they don't unhide the correct content. Things overlap.
As you are already using jQuery within your project I built a small example fiddle for you. Th concept behind it is the following:
All menu buttons have the class menubutton. This gives you the possibility to style the buttons but allows you additionally to use a jQuery selector on them. Further I gave each button a value attribute. This attribute represents the id of the content div which should be shown.
The content divs also have a common class content and an id correspondig to the vlaue attributes above.
<button class="menubutton" value="content1">item1</button>
<button class="menubutton" value="content2">item2</button>
<button class="menubutton" value="content3">item2</button>
<div class="content" id="content1">Content 1</div>
<div class="content" id="content2">Content 2</div>
<div class="content" id="content3">Content 3</div>
Now I use CSS to hide all content divs by default:
.content {
display:none;
}
The JavaScript part is also not that complicated. I add a click-function to each element with the class menubutton. This is done with a jQuery selector. Now all content divs are selected by $(".content") and I hide them with hide().
this.value is the value attribute of the button you clicked on and is used to show this specific content div.
$('.menubutton').click( function() {
$(".content").hide();
$("#" + this.value).show();
});
I hope this shows you some of the jQuery possibilities.
UPDATE
As you want to use divs instead of buttons I made some changes on the example you can see them in this fiddle.
I changed from buttons to divs and added an id to each content div like the following:
<div class="menubutton" id="content1">item1</div>
<div class="menubutton" id="content2">item2</div>
<div class="menubutton" id="content3">item2</div>
<div class="content" id="show_content1">Content 1</div>
<div class="content" id="show_content2">Content 2</div>
<div class="content" id="show_content3">Content 3</div>
the id of content div matches the id of its navigation div plus a standard prefix. show_ in my example. The JS Code was updated to use the id, instead of the value property to find the desired content div:
$('.menubutton').click( function() {
$(".content").hide();
$("#show_" + this.id).show();
});
UPDATE II
To show one content div by default, you can add another css class to this div (see updated fiddle)
<div class="content default_content" id="show_content1">Content 1</div>
I added this corresponding class to the CSS file:
.default_content {
display:block;
}
I wanted to make a site with the grid system. ( I have made one already, so I know/knew how it works )
This is my custum grid: http://grids.heroku.com/grid.css?column_width=100&column_amount=8&gutter_width=15
And now comes the problem: When I try to put prefix_1 as a class nothing happen it just stays in the same place. And I have one prefix_1 grid_3 and one grid_4. so it is 1+3+4=8. My grid is 8 columns wide so it has to fit together easily, but it doesn't.
http://jsfiddle.net/gekkeabt/5LA82/
<div class="container_8">
<span id="download" class="prefix_1 grid_3"><b>Download</b> Leasy CMS</span>
<span id="download" class="grid_4"><b>Download</b> Macha Webserver</span>
<span id="about" class="prefix_2 grid_4 suffix_2"><b>About</b> Me</span>
</div>
I checked my code 100 times. But I can't find where it went wrong.
Maybe someone can help me out?
Thanks!
EDIT:
I solved the prefix and suffix problem by defining the class in another div outside of the span.
So it looks like:
<div class="prefix_1 grid_3"><span id="download">The content....</span></div>
Try removing the
padding:10px 50px 10px 50px;
line from your #download,#about CSS declaration (or at least the horizontal padding of 2 x 50px).
It's that extra padding that makes the elements wider than one row.
Here's how it looks without that line: http://jsfiddle.net/WHG4u/
Please add this css to your /css/custom.css to make the page stop jumping each time the slide changes
.avia-content-slider-active .slide-entry-wrap { height: 275px; }