I recently discovered the emptyText config value for lists in Sencha Touch to display when the store is empty. The problem I am having is that this text appears in the top left corner and I can't seem to find a way to place it in the middle of the screen.
The emptyText property accepts HTML. Example:
CSS:
.emptyText {
text-align:center;
color: #999;
}
JS:
emptyText: '<div class="emptyText">No members yet</div>'
For vertical centering you will have to use the CSS3 Flexible box model
Example CSS:
//vertical and horizontal centering based on fixed height
height:200px;
display:-webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align:center;
-webkit-box-pack:center;
Related
I have a sidebar and a content inside a bootstrap row and I want to animate the toggle of the sidebar and to expand seamlessly the content container, I'm applying those transition classes:
.slide-fade-enter {
transform: translateX(100%);
position: relative;
}
.slide-fade-leave, .slide-fade-leave-to {
transform: translateX(-100%);
position: absolute;
}
but it flickers when expanding, you can see it here:
https://jsfiddle.net/kd6xpa32/16/
How can I prevent this?
Looks like you're doing some dirty stuff with flex and absolute positioning. I'd find a way to leave the sidebar as always absolutely (or relatively) positioned and figure out another way to collapse+expand it. The switch between absolute and relative is causing the rendering issue.
I need to use v-carousel without the bottom control panel. It's useless when number of images more than 20. Is it possible to hide it?
You just need to add the hide-delimiters prop. You can find all carousel props here: VuetifyJS API
<v-carousel hide-delimiters>
[...]
You can do that with css:
.carousel .carousel__controls { display: none; }
In one of our internal angular applications, there is a license text box displayed. Since there is a lot of text inside, the license box, represented as a div element, has a scroll.
Question: How to test whether an element has a scroll or not in protractor?
Here is an HTML representation of the element:
<div class="login-disclaimer-text-canvas ng-binding" ng-bind-html="disclaimer">
Copyright © Company, 2015. All Rights Reserved.
...
</div>
where login-disclaimer-text-canvas has the following CSS styles defined:
.login-disclaimer-text-canvas {
height: 50px;
width: 100%;
overflow-y: auto;
background-color: #eee;
color: #3E6372;
padding: 4px;
font-size: 10px;
}
The trick (originally proposed here) is to compare height property:
The height CSS property specifies the height of the content area of an
element. The content area is inside the padding, border, and margin of
the element.
with scrollHeight:
The Element.scrollHeight read-only attribute is a measurement of the
height of an element's content, including content not visible on the
screen due to overflow. The scrollHeight value is equal to the minimum
clientHeight the element would require in order to fit all the content
in the viewpoint without using a vertical scrollbar. It includes the
element padding but not its margin.
If scrollHeight is greater than height - then an element has a scrollbar.
In protractor we need to compare the resolved promises of getAttribute('height') and getAttribute('scrollHeight'). Let's make a reusable function and resolve one of two promises via then() letting expect() to resolve the second:
function elementHasScroll(element) {
element.getAttribute('height').then(function (height) {
expect(element.getAttribute('scrollHeight')).toBeGreaterThan(height);
});
};
where toBeGreaterThan() handy matcher is a part of jasmine-matchers third-party.
How to vertically align text of VBox label property in Flex 3?
At this time I can change it only if I apply this CSS style:
LinkButton{
paddingTop: -2;
}
But applying this style affects many other components. Is there any other way?
I created a panel using sencha touch with 300 x 400 pixel. I have an image with the same dimensions, created using photoshop. I used the image as the panel's background using css:
#pnl {
background: url(img/bg.png);
no-repeat;
}
the problem is that the image is way too huge and only displays about half. I've added max-width: 100% but the result is the same.
What have I done wrong? is there a way to fit any image on any size to a panel?
thanks.
Try this:
JS:
App.somePanel= new Ext.Panel({
cls: 'somePanel',
html: '<h1>Welcome to my app!</h1>',
//some other properties
});
CSS:
.somePanel {
background-image: url(http://somesite.com/someimage.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}