I have a carousel with images but the images appear to the left of the screen, other than that it works perfectly. I have tried putting the images inside a div with the style:
margin:0 auto, width: 300px;
but that doesn't work. I've tried various other things, such as playing around with different classes:
.x-body x-carousel-item{
margin:0 auto; width: 264px;
}
But it never works quite right.
new Ext.Carousel({
items: [
],
height:200,
dockedItems: [myapp.toolbars.vehicleInfoToolbar],
indicator: false,
})
Items are added to the carousel dynamically, an example item is
new Ext.Panel({ html: imagearray })
Where imagearray is a standard tag.
Many thanks for any help on this, I've seen this problem on another forum without answer, hopefully someone here can shed some light on this one.
To set the padding inside the carousel's body use the bodyPadding property or wrap the image tag with div and set the text-align:center for that div.
What I did is specify a CSS class called "carouselImage", which sets "background-position: center;", and then I just specify via 'cls' attribute in the view config, or via setCls() method for the components to use that CSS class.
Related
I am building a tabbed environment using Fluent UI's Pivot component. Some of the tabs (or PivotItems in Fluent UI parlance) are quite long and need to be scrollable. Is there a way of having the tab bar be sticky such that it stays on top of the frame and visible no matter where the user scrolls to on the tab?
To get expected behavior you just need some CSS.
Set height of body and html to 100vh, and overflow: hidden to avoid multiple scrollbars.
body, html {
height: 100vh; /* Viewport height */
overflow: hidden; /* To avoid multiple scrollbars */
}
As a working example I'm gonna use Links of large tab style. Content of every item renders inside PivotItem Component. So, you have to put some styles on it:
const pivotItemStyles = {
height: 'calc(100vh - 44px)',
overflow: 'auto',
}
PivotTabs by default uses height: 44px that's the reason why I put calculate inside height property. overflow: auto is to get scrollable content.
Reference: Pivot.styles.ts
Codepen working solution
I am making a simple fixed SoMe sharing button set for a blog. Everything is fine and dandy except in Safari. Hovering over one of the buttons changes the background-color of the siblings to a color I do not specify anywhere in my CSS. This behavior goes away as soon as I change the wrapper from fixed to relative/static/absolute.
Has anyone ever run into this?
Am I doing something wrong?
If not, is there a hack/fix/workaround?
HTML:
<div id="share-links">
<a class="share-twitter" href="#">a</a>
<a class="share-facebook"href="#">a</a>
<a class="share-linkedin" href="#">a</a>
</div>
CSS:
#share-links{
left:0;
top:5em;
position:fixed;
}
#share-links a{
display:block;
height:2em;
width:2em;
color:white;
background-color:#a16159;
}
#share-links a:hover{
background-color:#8a392e;
}
Fiddle: https://jsfiddle.net/u6vzq192/26/
I discovered this problem in a slightly different situation. I have pagination dots in a fixed div using links like you have set up. I am adding a class to the links with Javascript which in turn changes the background color. Every time this happens the background colors of all the other links go crazy. I believe that it is a rendering bug in Safari inverting the background of the links when one changes.
After much experimentation with your example I discovered that it stops if either the links themselves are much larger or the container is much larger. Since setting the links to be giant buttons affects design, it seems the best solution is to set the container to be larger. Since your example is a vertical set of links you would set the height of the container to be something much larger than the links. I used height: 100%; but a large px should work too. If you had links laid out horizontally you might need to make that width: 100%; instead.
CSS:
#share-links{
left:0;
top:5em;
position:fixed;
height: 100%;
}
#share-links a{
display:block;
height:2em;
width:2em;
color:white;
background-color:#a16159;
}
#share-links a:hover{
background-color:#8a392e;
}
I encountered a similar problem. As well as being fixed, one of the inside elements had transform:rotate 90 deg and had a hover effect that changed its position slightly (pulled out from the side of the screen). The background color of this element and its sibling were the same, and both would flicker randomly when elements on the page were changed / rendered.
I finally found a combination of styles that stopped the background colour flickering altogether.
I added the following to the parent element from here: https://stackoverflow.com/a/27863860/6260201
-webkit-transform:translate3d(0,0,0);
-webkit-transform-style: preserve-3d;
That stopped the flickering of the transformed/sliding element.
And I added the following to the remaining element from here: https://stackoverflow.com/a/19817217/6260201
-webkit-backface-visibility: hidden;
This then stopped the flickering of the background colour for the sibling element.
I'm using the dojo mobile scrollable view.
The view scrolls,, but when I release it, the view goes back to top and I can not know why.
Here is an extract of my code :
var node = domConstruct.create("div", {
id: "dtm-dialog-summary-scrollableView",
style: "padding-top: 40px;"
});
var refNode2 = dom.byId("dtm-dialog-summary");
domConstruct.place(node, refNode2);
var view = new dojox.mobile.ScrollableView(null, "dtm-dialog-summary-scrollableView");
view.startup();
//add a component (and many others in the scrollable view)
var divDetailledPlot1 = domConstruct.create("div", {
"class":"div-detailled-plot",
"id":"detailled-display-1"
}, view.containerNode);
Thanks for your help
I've put here:
http://jsfiddle.net/adrian_vasiliu/yjuWz/2/
a modified variant of your code which works for me.
Although I don't think this can have caused the trouble you describe, I removed the padding-top that you set on the ScrollableView, because this (unfortunately) forbids the scrolling to go completely to the bottom. I think this limitation will be removed in Dojo 2. Instead, as you can see in the jsfidle, I have put inside the ScrollableView an intermediate div with the needed padding-top:
var divDetailledPlot1Top = domConstruct.create("div", {
...
style: "padding-top: 40px;"
}, view.containerNode);
If it still does not work for you, please tell the Dojo and browser/OS version, and provide a runnable sample to reproduce.
Edit: alternatively, just style the padding directly on the containerNode of the ScrollableView:
.mblScrollableViewContainer {
padding-top: 40px;
}
This is implemented in http://jsfiddle.net/adrian_vasiliu/yjuWz/3/.
I have template binded with the listview in windows store application which I am developing using html5 and javascript. I have a requirement to change the size of the listview item programmatically. Basically I have a input type range on my page. User will change the value of the input and according to that value I should be able to change the size of the listview item programmatically.
Any help or pointer will be much appreciated.
Thanks in advance!
I know this is old, but I have just spent hours doing extensive tests (because I didn't feel like switching to grid mode) and I found a very simple way that would allow you to have items of any height without them overlapping,I though I would share it, all you need to do is add this to your css:
.win-listview .win-listlayout .win-container {
height:auto;
}
You can set the size of the items in a listview using the class set on the item in the template. You can:
Define different classes for the different sizes you want
Define the sizes in CSS. Example:
.small {
height: 150px;
width: 150px;
}
.large {
height: 300px;
width: 300px;
}
Set the appropriate class on the template item:
var templateItem = document.querySelector("#regularListIconTextTemplate .regularListIconTextItem");
WinJS.Utilities.addClass(templateItem, "large");
Refresh the listview:
element.querySelector("#listView").winControl.forceLayout();
I have an application where the UI components are added to a formField dynamically. As the UI controls to placed on screen is decided run-time depending on server response, sometime the screen gets filled with multiple components. As the screen elements are added, i required to scroll through the screen to select the fields place to the end of the screen. But when i scroll the form bounces, but the scroll is not happening the way expected. Now i am not able to select the UI controls placed to the end of the form.
The screen has 3 components, Title Bar, Button Dock bar, and a form field. Here is the code i have used for form field
var formBase = new Ext.form.FormPanel({
scroll: 'vertical',
xtype: 'form',
ui: 'round',
// i have added the items and it shows on UI, As things are dynamic i cant place it here
items: [{}];
});
Help me to fix the same.
Try this this should work.
Ext.apply(this, {
scroll: 'vertical',
pinHeaders: true,
dockedItems : [{}],
items : []
});
MyApp.views.MyScreenScreen.superclass.initComponent.call(this);
},
It happens because of the form height. Add height property to the object passed to the FormPanel. Something like this:
height: Ext.Viewport.getWindowHeight()-(the height of other compenents like toolbar)
Example for this would be:
height: Ext.Viewport.getWindowHeight()-50
Adding height config with some value might solve the issue.