I would like to have some kind of navigation for a slider when viewed on a mobile device. Since the directional arrows won't show on mobile (if anyone can tell how to make them, that would be awesome) I thought a good solution would be to have a different slider, same images, that is "show-for-small" and has bullets underneath.
It works, but there is an issue that's killing me. If you load the page with the browser window wide (desktop) and scale to a mobile width the sliders switch, but the bullets aren't centered. They appear shifted to the right. If you reload the page at that mobile width with they are fine, perfectly centered below the image.
Does anyone have any clue on how to fix this? I set up a page to demonstrate the problem. www.jonesco.com/_foundation/bullet_problem.html
Thanks
Add the following to your stylesheet:
.orbit-bullets {
display: table;
text-align: center;
}
Related
I am developing one website using Django. The website link is,
http://flooroof.com/listings/
You can see that the tiles on the website has got overlap on each other. This happened after I implemented infinite scroll. I found it at below link,
https://simpleisbetterthancomplex.com/tutorial/2017/03/13/how-to-create-infinite-scroll-with-django.html
If you scroll down you will see more and more properties are getting loaded. At a time I am loading 20 listings. But not sure what has gone wrong.
I know there is something wrong with CSS but I am not sure what it is.
Please guide.
Yes as I can see the CSS has issue especially in .grid-item present on after first .infinite-item. I .grid-item has absolute position and only first .infinite-item's .grid-item has proper left and top values. If you want a quick solution then you can do this.
a.grid-item
{
left: auto !important;
top: auto !important;
position: relative !important;
}
One more issue is with image size. your images size are very different from each other so best solution is to use a blank 1px trasparent image with fixed height and show current images as background image.
Per How to Change Apache Superset Template from the Superset User Interface? , I was able to change the CSS template for Superset dashboard. But the charts inside the dashboard are not affected. e.g. most of the charts have white colored background(e.g. Piechart) and some people dislike it. How to change the chart background color? I mean change it for all charts or for one chart.
Disclaimer: This should work, but is a bit hacky and could have long-term support implications:
I've been fiddling with a "dark mode" dashboard just to kick the tires on this. Here's a screenshot just for fun:
So... what did I do?
Click "Edit Dashboard" in the top right of your screenshot
When in edit mode, the top right menu has an option to "Edit CSS"
Use your browser's inspector to hack away! That said, here are a couple of key ingredients:
.dashboard-component{ background: whatever} - sets the main background of each viz card, but you'll still see many components still have white backgrounds within these wrappers.
.slice_container svg{
background-color: transparent !important;
} - this overrides the white background of the components I ran into (including Pie charts!).
If viz components use SVG you can get pretty clever with inspecting/overriding various bits. A couple of gotchas with the above:
If a viz component contains multiple SVG elements, this may have side effects.
If a viz uses canvas instead of svg you will run into more trouble
In the worst case scenario, you may need to check out the superset-ui-plugins repo and make tweaks. This dev process isn't super straightforward, but some of us are working to improve that.
Easiest solution for me is using dark reader extension.
Inside the rectangle I placed slicers.
Clicking on the uncovered part of the rectangle moves it in front of the visualizations making them unavailable to interact with, or hidden.
I "Send to back" rectangle but it didnt help.
The visuals are on a picture below:
But if I just hoover mouse on a rectangle area - it covers all visuals:
Any solution to just always keep re
Yeah, that's pretty annoying. I'd suggest voting for this idea and maybe Microsoft will fix this eventually.
Currently, the only workaround I can think of would be to make the colored rectangle part of the page background as an image.
After tinkering a bit, I've ran into a small visual snag. For some reason, my css gradient isn't coloring correctly around border radius's as you can see by looking # My Fiddle Here
If you comment out just the gradient part of the css, all pixels are colored as they should be. Anyone know a quick fix for this, or able to spot what I did wrong?
I figured it out. I had to simply add the base background color after each gradient statement:
background: background: linear-gradient(to bottom, #900000 0%,#880000 40%,#790000 60%,#710000 100%), #710000;
Is there a way to show more than 1 panel at a time with the coda slider? I want to keep its original scrolling logic the same. The only difference, to show more than one panel at a time. Such as 2 or 3 or 4 panels in view.
How would we go about doing that?
Thanks
Here is a sample that heads in the direction of a working example of what you'd like. I'll explain why it seems to be more trouble than it's worth (Assuming you want flexible content in both panels) and tell you how I did it.
Here is the jsFiddle.
So, the initial issue is that the current slide is taken into account for height. Well, what if the next slide contains more content and requires a higher slider height? I suppose you'd need to compare the height of both for each height calculation. That's not so difficult, but it may lead you to more trouble if you had to fight with Niall's code.
The second issue is that you have to set a static width for two elements, which is normal in most cases for this slider, but potentially a drag depending on what your content is.
Anyhow:
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 230px }
.coda-slider { float: left; overflow: hidden; position: relative; width: 460px !important }
You should be able to locate these selectors using find in your editor. The !important is a drag, but required if you don't want to rework much code. Basically, you want to set .coda-slider .panel to the width you want each panel, then double the width of .coda-slider.
Let me know if I've missed anything here or failed to explain something properly. I'd be happy to go over this more! I've worked with this slider a lot due to inheriting a project at work that made extremely heavy use of it. I've since moved on to something custom.