I'm battling the calculated width, with swiperjs.
I have have my slider working, however I'm trying to place it inside a container I created with CSS grid that has 2 columns, and 2 rows where the swiper is going into the 2nd row and it spans two columns. However the width calculations are astronomically large. I happen to notice that it's calculation also gets bigger if I resize the window.
nothing to special with my settings either... like I said it works when it's not in my row.
https://codepen.io/Johndgraham/pen/VwvmmZL
Any thoughts are appreciated.
var swiper = new Swiper(".swiper-container", {
slidesPerView: 1,
spaceBetween: 10,
// init: false,
pagination: {
el: ".swiper-pagination",
clickable: true
},
breakpoints: {
576: {
slidesPerView: 2,
spaceBetween: 20
},
992: {
slidesPerView: 3,
spaceBetween: 40
},
1200: {
slidesPerView: 4,
spaceBetween: 40
}
}
});
I resolved sizing issues with Swiper inside grid by setting .swiper-container and .swiper-wrapper to have display: inherit;
I also set .swiper-slide to have display: inherit; width: auto !important; max-width: 100% !important
I ended up changing the placement of my css grid to work around this, and now have it working nested.
I may take some time later to test out if it's the CSS grid that was causing the issue.
I came across the same issue and I've fixed by setting min-width: 0 to the grid items.
I've found the solution on this thread: Prevent content from expanding grid items
Related
I am trying to render a simple Azure Map in a vue.js single-file component. I can get the map to draw at a specified center and zoom. And draw a line segment exactly where I want it.
But I cannot draw a marker properly. It does draw, but it is seriously south-west from the specified coordinate (which is on the an endpoint of a line segment drawn previously).
Here's a single page Vue.js 'App.vue':
<template>
<div id="myMap"></div>
</template>
<script>
import * as atlas from "azure-maps-control";
export default {
mounted: function() {
this.map = new atlas.Map("myMap", {
center: [-113.666783, 53.806008],
zoom: 7,
view: "Auto",
authOptions: {
authType: "subscriptionKey",
subscriptionKey: "<redacted>",
},
});
let self = this;
//Wait until the map resources are ready.
this.map.events.add("ready", function() {
//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
self.map.sources.add(dataSource);
//Create a line and add it to the data source.
dataSource.add(
new atlas.data.LineString([
[-112.926043, 53.803],
[-113.666783, 53.806],
])
);
//Create a line layer to render the line to the map.
self.map.layers.add(
new atlas.layer.LineLayer(dataSource, null, {
strokeColor: "blue",
strokeWidth: 5,
})
);
//Create an HTML marker and add it to the map.
var marker1 = new atlas.HtmlMarker({
color: "DodgerBlue",
position: [-112.926043, 53.803],
anchor: "bottom",
htmlContent: '<div class="pulseIconNormal"></div>',
popup: new atlas.Popup({
content:
'<div style="padding:10px">Sensor</div>',
pixelOffset: [0, -30],
}),
});
self.map.markers.add(marker1);
//Add a click event to toggle the popup.
self.map.events.add("click", marker1, () => {
marker1.togglePopup();
});
});
}
}
</script>
<style>
#myMap {
height: 100vh;
width: 100vw;
}
.pulseIconNormal {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: blue;
}
</style>
When I looked at DOM for the marker (in Firefox dev tools), this is the style that I see:
transform: translate(-50%, -100%) translate(737px, 235px) rotateX(0deg) rotateZ(0deg);
This isn't coming from CSS, but is in inline. That's the reason, but not the explanation why. It appears the control itself is generating this.
I found the problem. I am using NPM to load azure-maps-control and I had to explicitly add
<style src='azure-maps-control/dist/atlas.min.css'></style>
to the .vue file.
The map div in your code isn't closed properly. Instead of <div id="myMap" /> it should be <div id="myMap"></div>. HTML standards say self closing div's are invalid. Give that a try and see if it helps.
If it doesn't try inspecting the HTML marker DOM to see if any CSS is being appended to it by your app and try adjusting to see if it addresses the issue.
Looking at your code, the HTML marker should be anchored bottom center to its position.
For the same problem with Angular (11), I had to add the azure css file to my angular.json like so:
"styles": [
"src/styles/styles.scss",
"node_modules/azure-maps-control/dist/atlas.min.css"
],
I'm using datatables with the bootstrap 4 styling framework. I'd like to make the filter input take up the full width of the page. Currently I'm doing this by overriding the dom configuration to remove the pagination div, then applying styles to the label and input elements (code below) but this feels like a bit of a hack. Is there a better way of doing it?
$("#table").dataTable({
"dom":
"frtip",
...
"paging": false
});
#table_filter label {
width: 100%;
}
#table_filter input {
display: block;
margin-left: 0;
width: 100%;
}
I'm trying to make a carousel with http://unslider.com like this:
$('.carousel').unslider({
autoplay: true,
speed: 750,
delay: 3000,
nav: false,
infinite: true,
arrows: {
prev: '<div class="prev-btn"></div>',
next: '<div class="next-btn"></div>'
}
})
All slides became invisible when i added the option animation: 'fade'. I cannot figure out why.
http://codepen.io/tjeu-kayim/pen/EgYYXN
I found the answer myself:
Add the css .unslider-fade {height: 100%} and the slides wil show up.
Sadly, the answer to this problem as to this date is to set a height to the unslider container. The GitHub repo of the unslider project has many questions regarding this issue, but all the answers are "add a widht and height to the container".
I guess the best css selector to use would be .unslider-fade, and I suggest you add your own class to the slider too, so it would end up looking something like .unslider-fade.your-class{height:###px;}; that way you will only affect the slider with fade in your website, in case you have any other slider working with the horizontal or vertical animation (or images with some other height).
Change your javascript a little bit:
$('.carousel').unslider({
autoplay: true,
speed: 0, //change this line(previously 750)
delay: 3000,
nav: false,
infinite: true,
arrows: {
prev: '<div class="prev-btn"></div>',
next: '<div class="next-btn"></div>'
}
})
And add this to css:
.carousel ul li {
opacity: 0;
-webkit-transition: opacity .75s; // if you want 750ms
transition: opacity .75s; // if you want 750ms
}
.carousel ul li.unslider-active {
opacity: 1;
}
And that's it, now you have "fade" effect. Enjoy!
I want to create a Tabcontainer and fill its TabPage contents programmatically, but the TabPages won't be displayed. So far my Code:
_buildUI: function () {
var bordercontainer = new dj_BorderContainer({ style: "height: 100%; width: 100%;", gutters: false, region: "top" });
var tabcontainer = new dj_TabContainer({ useMenu: false, region: "center", tabposition: "top", doLayout: "false", style: "height: 100%; width: 100%;" });
for (var i = 0; i < ki_KisConfig.widgets.movingwindow.calccount; i++) {
var contentpane = new dj_ContentPane({ title: "Calculation " + (i + 1), content: "content", style: "height: 100%; width: 100%;" });
//contentpane.startup();
tabcontainer.addChild(contentpane);
}
tabcontainer.startup();
bordercontainer.addChild(tabcontainer);
bordercontainer.startup();
do_domConstruct.place(bordercontainer.domNode, this.interface, "first");
bordercontainer.resize({ h: "265px", w: "432px" });
},
I've googled around and tried different things. As you cann see I'm setting the doLayout-Property mentioned here. I also use a BorderContainer like mentioned here in the last posting and I'm trying to resize it after creating the TabContainer like mentioned here.
It doens't matter if I'm calling the method in the postCreate- or the startup-function of the containing widget.
I'm trying to set the width and height via style or to startup every "sub"widget.
Nothing works and the TabContainer only gets displayed when I'm resizing the browserwindow or resizing it by opening/closing the developertools (F12). If it gets displayed it looks like I want it. The only problem is that the TabList has a size of 0x0 and the same with the TabPaneWrapper when I'm inspecting directly the DOM.
Has anyone any idea?
Edit
After calling startup only on the BorderContainer I get this result:
The tablist layout is strange and also the content of the programmatic selected tab isn't displayed. Everything is again fine after a window resize:
Solution (summary)
I retrieved the best result with defining the BorderContainer and the TabContainer in the HTML-template. Unfortunately the layout of the tablist still failed. This answer delivered the solution for correct tablist layout: My widget didn't contain resize() so I added it and everything is now working fine.
resize: function() {
var tabcontainer = dj_registry.byId("tabContainerMW");
if (tabcontainer) {
tabcontainer.resize(arguments);
}
},
Some notes to your code:
The region attribute is here not required. Its only used to indicate the position for BorderContainer children.
var bordercontainer = new dj_BorderContainer({
style: "height: 100%; width: 100%;",
gutters: false,
region: "top"
});
You don't need to set a width and height on your ContentPane, let this do the TabContainer.
var contentpane = new dj_ContentPane({
title: "Calculation " + (i + 1),
content: "content",
style: "height: 100%; width: 100%;"
});
I've created a sample for you, maybe this helps you out.
require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
"dijit/layout/ContentPane", "dojo/domReady!"],
function(BorderContainer, TabContainer, ContentPane) {
// first create the BorderContainer without any arguments.
let bc = new BorderContainer({}, "bc");
// then create your TabContainer with region center.
let tc = new TabContainer({
region: 'center'
}, document.createElement("div"));
// add it to your BorderContainer
bc.addChild(tc);
// then create three tab panes (ContentPane) and add them to your TabContainer
let cp = new ContentPane({
content: "My tab pane!",
title: "My tab title"
}, document.createElement("div"));
tc.addChild(cp);
let cp2 = new ContentPane({
content: "My second tab pane!",
title: "My second tab title"
}, document.createElement("div"));
tc.addChild(cp2);
let cp3 = new ContentPane({
content: "My closable tab pane!",
title: "My closable tab title",
closable: true
}, document.createElement("div"));
tc.addChild(cp3);
// call startup on your BorderContainer. startup of BorderContainer will call also the startup methods of all children (TabContainer, ContentPane's).
bc.startup();
});
body, html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0 auto;
}
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<span class="tundra" style="width: 100%; height: 100%;">
<div id="bc" style="width: 100%; height: 100%;"></div>
</span>
Edit
As an addition:
I was able to create a fiddle, which reproduces the failure. The problem here is that the createDialogContent() method is getting called after the dialog show's up. As I mentioned below in the comments section, it is important to create a dialog's content before showing it.
In this fiddle (bottom end of code) are two sections, which call both the same methods, just transposed. In the first snippet, the methods are called in the wrong order. Int the second snippet, they're called in the right order.
// uncomment this
createDialogContent();
dialog.show();
// comment this
// dialog.show();
// createDialogContent();
How to reduce the height of list item in Sencha touch 2? My list showing large numbers of single word name/value pair. As each item taking extra height, list is becoming too long. So i want to reduce each item height to exact content height. I tried using css like this but no luck. Any help?
var tabPanel=Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'top',
defaults: {
styleHtmlContent: true
},
items: [
{
title: 'DETAILS',
xtype: 'list',
cls: 'myList',
....
itemTpl: '<table><tr><td>{fieldName}</td><td>{fieldValue}</td></tr></table>',
.............
.myList .x-list-item {
max-height: 30px;
}
Each list item has a min-height of 2.6em. So, you can reduce that and add a overflow property. Use this:
.my-list .x-list-item .x-list-item-label{
min-height: 0.8em !important;
overflow : auto;
}
And it is not a good practice to use Html tables inside itemTpl. Use plain DIV elements with -webkit-box CSS3 property.
You can use itemHeight config of list. http://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List-cfg-itemHeight
in addition to that you can also use CSS like this to control padding:
.my-list .x-list-item .x-list-item-body{
min-height: 0.5em !important;
padding-top: 0.3em;
padding-bottom: 0.3em;
}
use a property called as
itemHeight: [*Height of the item you need*],
i.e
itemHeight: 40
Read it from the Component's JS file