I'm trying to create a simple Webix form, but there's a problem: when adding a button (regardless or its position - inside the form or out of it), the whole form is squeezed to the button width. Here's my code:
webix.ui({
container:"form",
rows:[
{ view:"form", elements:[
{ view:"text", label:"Name" },
{ view:"text", label:"Email" },
{ view:"text", label:"Password" }
] },
{ view:"button", autowidth:true, value:"Submit" }
]
});
http://webix.com/snippet/89628ea1
Wondering how it can be fixed? Thanks.
You must add the property width in the form.
{
container:"form", width:300,
rows:[
{ view:"form", elements:[
{ view:"text", label:"Name" },
{ view:"text", label:"Email" },
{ view:"text", label:"Password" }
] },
{ view:"button", autowidth:true, value:"Submit" }
]
}
Related
This slider is perfect, but I don't know how to add text beneath like this.
I would like to add text like on the screen, how can I do it?
Code:
imgCollection: Array<object> = [
{
image: 'https://cdn.sunbasket.com/b335a7ad-5bc6-4c87-a901-1baf17409c84#800.jpg',
thumbImage: 'https://cdn.sunbasket.com/b335a7ad-5bc6-4c87-a901-1baf17409c84#800.jpg',
}, {
image: 'https://cdn.sunbasket.com/5b21932c-a190-48cf-978d-4370c9a5eb3d#800.jpg',
thumbImage: 'https://cdn.sunbasket.com/5b21932c-a190-48cf-978d-4370c9a5eb3d#800.jpg',
}, {
image: 'https://cdn.sunbasket.com/c197a0e6-95ab-48f5-89c9-b73282a2fefc#800.jpg',
thumbImage: 'https://cdn.sunbasket.com/c197a0e6-95ab-48f5-89c9-b73282a2fefc#800.jpg',
}, {
image: 'https://cdn.sunbasket.com/b31be723-af77-4f48-bbf2-b9c01c5c82ef#800.jpg',
thumbImage: 'https://cdn.sunbasket.com/b31be723-af77-4f48-bbf2-b9c01c5c82ef#800.jpg',
}, {
image: 'https://cdn.sunbasket.com/68d4023b-5d9d-459b-bfcd-9e8b7a6f1b21#800.jpg',
thumbImage: 'https://cdn.sunbasket.com/68d4023b-5d9d-459b-bfcd-9e8b7a6f1b21#800.jpg',
}, {
image: 'https://cdn.sunbasket.com/4d0c21ba-2e63-4ed7-b7d4-15964ee1785d#800.jpg',
thumbImage: 'https://cdn.sunbasket.com/4d0c21ba-2e63-4ed7-b7d4-15964ee1785d#800.jpg',
}];}
HTML:
class="slider"
[infinite]="true"
[imageSize]="{width: '360px', height: 239, space: 30}"
[autoSlide]="false"></ng-image-slider>```
I have a quick question about BootstrapVue carousel:
How can I target the HTML tag inside the b-carousel-slide component to change things like font size and so on?
I know that you can change the HTML tag by using the text-tag prop (see my code example).
Would be great if this one's easy to solve or at least someone points me to the respective section in the documentation.
<template>
<div>
<b-carousel
id="carousel"
:interval="3000"
controls
fade
indicators
background="#ababab"
img-width="1024"
img-height="480"
>
<b-carousel-slide
v-for="item in services"
:key="item.title"
:caption="item.title"
:text="item.description"
text-tag="p"
:img-src="require(`../assets/images/${item.image}`)"
></b-carousel-slide>
</b-carousel>
</div>
</template>
<script>
export default {
name: 'Carousel',
data() {
return {
services: [
{
title: 'Title',
description:
'Text',
image: 'picture.jpg',
},
{
title: 'Title',
description: `Text`,
image: 'picture.jpg',
},
{
title: 'Title',
description: `Text`,
image: 'picture.jpg',
},
{
title: 'Title',
description: `Text`,
image: 'picture.jpg',
},
],
};
},
};
</script>
<style scoped>
p {
color: 'red';
}
</style>
The issue you're facing is trying to target a sub-component inside a scoped style tag.
To do this, you will need to use deep selectors.
Either of these should work.
<style scoped>
/deep/ p {
color: 'red';
}
>>> p {
color: 'red';
}
::v-deep p {
color: 'red';
}
</style>
I am reading about Behaviors in Polymer.
I copy/pasted the example for the highlight-behavior.html:
<script>
HighlightBehavior = {
properties: {
isHighlighted: {
type: Boolean,
value: false,
notify: true,
observer: '_highlightChanged'
}
},
listeners: {
click: '_toggleHighlight'
},
created: function() {
console.log('Highlighting for ', this, 'enabled!');
},
_toggleHighlight: function() {
this.isHighlighted = !this.isHighlighted;
},
_highlightChanged: function(value) {
this.toggleClass('highlighted', value);
}
};
Then, in my element i have the following (just the important parts):
<link rel="import" href="highlight-behavior.html">
<dom-module id="highlighting-test">
<template>
<style>
:host {
display: block;
background-color: red;
}
:host.highlighted {
background-color: green;
}
.highlighted {
background-color: green;
}
</style>
<h1>Click anywhere here to toggle highlighting!</h1>
</template>
<script>
Polymer({
is: 'highlighting-test',
behaviors: [HighlightBehavior]
});
</script>
</dom-module>
Now the problem is that the toggling of the highlighted class works when clicking inside the host element but it is not highlighting just the h1 element. It is adding the highlighted class to the host element.
This is how it is rendered in the browser:
<highlighting-test class="highlighted">
<h1 class="style-scope highlighting-test">Click anywhere here to toggle highlighting!</h1>
</highlighting-test>
When clicking I indeed see that it toggles the highlighted class on the host element highlighting-test and the background changes.
How can I make sure that the highlighting behavior is applied to just the h1 tag?
Use this.toggleClass(className, bool, this.$.id_of_element)
Change:
_highlightChanged: function(value) {
this.toggleClass('highlighted', value);
}
to:
_highlightChanged: function(value) {
this.$.hId.toggleClass('highlighted', value);
}
And in HTML add an ID to H1:
<h1 id="hId">Click anywhere here to toggle highlighting!</h1>
i want to remove the bottom border of a button after clicking it. button is not a submit button. When i click it for the second time, the border should be 1px; Can some one help me with implementing this
If you have 1 button it should be as simple as this:
Angular for Single Button
var app = angular.module("myApp", []);
app.controller("myCtrl", ["$scope", function ($scope) {
$scope.hideBorder = false;
$scope.toggleBorder = function () {
$scope.hideBorder = !$scope.hideBorder;
}
}]);
HTML for Single Button
<button class="{{hideBorder ? 'button--no-bottom-border': ''}}" ng-click="toggleBorder()">Click Me</button>
CSS
button {
border: 1px solid black;
outline: none;
}
.button--no-bottom-border {
border-bottom: 0px;
}
If you have multiple buttons, your Angular & HTML will change slightly:
Angular for Multiple Buttons
$scope.toggleBorder = function (button) {
button.hideBorder = !button.hideBorder;
}
$scope.buttons = [
{
text: "Click Me",
hideBorder: false
},
{
text: "Click Me 2",
hideBorder: false
},
{
text: "Click Me 3",
hideBorder: false
},
];
HTML for Multiple Buttons
<button class="{{button.hideBorder ? 'button--no-bottom-border': ''}}" ng-click="toggleBorder(button)" ng-repeat="button in buttons">Click Me</button>
I've a little problem with my extjs 4.2 MVC app with grid and image transparency:
this is my grid:
Ext.define('XProject.view.message.inbox.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.inboxgrid',
store: 'message.Inbox',
requires: [
'Ext.ux.grid.FiltersFeature' ,
'XMailweb.view.message.inbox.CtxMenu'
],
viewConfig: {
getRowClass: function (record, rowIndex, rowParams, store) {
if ((record.get('Flags') & 2 )== 0) {
return "boldFont";
}
if (record.get('Err_Id') != 0) {
return "redFont";
}
}
},
selType: 'checkboxmodel',
selModel: {
checkOnly: false,
injectCheckbox: 0
},
features : [{
ftype: 'filters',
autoReload: false,
encode:true,
paramPrefix : 'Filter'
}],
columns: [{
xtype: 'gridcolumn',
cls: 'attach',
width: 18,
dataIndex: 'Files_Num',
menuDisabled: true,
sortable:false,
text: 'Attachment',
renderer: function(value, metaData, record ){
if (value >= 1){
metaData.css = 'attach';
}
return '';
}
}]
})
other columns are omitted.
My css role is :
.attach {
background:transparent url('../icons/attach.png') no-repeat center left !important;
text-indent: -250px;
}
my attach.png is transparent, but when grid is rendered (with alternate row background color) appear with white background.
This is my transparent image:
And my rendered grid:
Why does not have transparent background (all css images in grid)?
I try with firefox and iexplorer, but result it's the same.
Any ideas?
Background:transparent overide the background color.
Use :
.attach,.attach .x-column-header-over{
background-image:url('../icons/attach.png') !important;
background-position:center left;
background-repeat:no-repeat ;
}
Between :
background:transparent url('../icons/attach.png') no-repeat center left !important;
http://jsfiddle.net/Xpe9V/521/