SALAM
I want to customize the html text, buttons and text fields with CSS sencha. how can I do?
if I have to put all the CSS code in a file apart, how can I connect each CSS code to a specific part. example:
I want to changed the font of the following text "it fits your needs ":
enter code here
App.views.HomeIndex = Ext.extend(Ext.Panel, {
items: [
{
xtype: 'carousel',
id: 'car',
fullscreen: true,
scroll: 'vertical',
styleHtmlContent: true,
style: 'background: #d8e2ef',
items: [ {
html: '<div align="center" id="z">it fits your needs </br></br> <img src="images/logo.jpg" width="160" height="151""/></div>'
}]
}]
});
Ext.reg('HomeIndex', App.views.HomeIndex);
how I can do?
thank you
you can define a class for each one like below in your html file
.Heading{
text-align: center;
-webkit-border-top-right-radius:0.5em;
-webkit-border-top-left-radius:0.5em;
font-weight: bold;
font-style: calibri;
padding:6px;
font-size:15px;
color: black;
background: -webkit-gradient(linear, left top, left bottom, from(lightgrey), to(lightgrey));
width: 100%;
height: 30px;
}
and you can use the class in your div tag by refering as
html: '<div class="Heading"></div>'
Related
I would like to put favorite star icon at the upper right corner of the parent container. I created css with absolute position, but it doesn't work.
I created span field and used font-awesome (in this case fa fa-star, although it is not so important, because the same result is obtained for simple text).
Can anyone tell me how to place this star at the upper right corner of the parent container?
app.js
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
width: 300,
style:'border:1px black solid',
layout: {
type: 'vbox',
align: 'middle'
},
defaults: {
margin: 5
},
items: [{
xtype: 'image',
height: 128,
width: 128,
src: 'https://www.disneyclips.com/images/images/roojumping2.gif'
}, {
xtype: 'component',
html: 'Hello'
},
{
html: '<span class="fa fa-star topright"></span>',
},
]
});
}
})
app.css
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 28px;
}
index.html
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
This is a simple way to do it, just put that listener on the child component:
listeners:{
afterRender: function (a){
var floatBox = document.createElement('div');
//classic doesn't have fontAwesome, use a image instead
floatBox.innerHTML = '<img class="fa fa-star topright" src="https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/16x16/star.png" ></img>';
a.ownerCt.el.dom.appendChild(floatBox) ;
}
}
That way, when the child component is rendered it put a float box on the parent component, you could put that listener on the main panel instead and just test for conditions to show, just remove the ownerCt part.
Classic 7.3.1 Material
I am not sure how to get the font awesome icons in the non-material themes.
Here is a fiddle using the classic toolkit.
You can drag the main container and the icon moves with the container.
You can style the button however you want and it has a tool-tip.
If you plan on allowing resize of the container then you will have to implement the resize event handler and call setPosition on the button.
Classic Toolkit fiddle
This puts a button in the top left corner of the browser.
let body = Ext.getBody();
let button = Ext.widget('button', {
text: 'Favorite',
iconCls: 'x-fa fa-star',
ui: 'round',
floating: true,
renderTo: body,
style: 'position: absolute; top: 20px; right: 20px;'
});
Fiddle floating button
I have an event limit link inside a day cell for a full calendar and I'm trying to vertically align it in CSS.
Here is a link to my js fiddle here
It looks like fullcalendar wraps a div around the anchor tag that is the eventLimit link, that ideally would be the best element to vertically align but I don't know if I can access it in CSS. Maybe I can in fullcalendar somehow with eventRender??
Can this be done easily in CSS or is there a better way to do itusing some way in full calendar?
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
//defaultDate: '2014-06-12',
defaultView: 'basicWeek',
editable: false,
height: 174,
eventLimit: 1,
eventLimitText: function (numEvents) {
return numEvents;
},
events: [
{
title: 'Event',
start: '2017-09-18'
},
{
title: 'Event',
start: '2017-09-18'
}
]
});
});
You need to set your table height to match the height of its container
Try updating your CSS to this:
td.fc-more-cell {
text-align: center;
font-size: 2.3em;
vertical-align: middle
}
.fc-content-skeleton,
table,
tr {
height: 100%;
}
Here you go with. check the JS Fiddle
http://jsfiddle.net/rbynbu4z/1/
I added the below code
.fc-row .fc-content-skeleton,
.fc-row .fc-content-skeleton td,
.fc-row .fc-content-skeleton table,
.fc-row .fc-content-skeleton tr{
height: 100%;
vertical-align: middle;
}
.fc-row .fc-content-skeleton td div {
display: inline-block;
line-height: 100%;
}
Use line height for the anchor, it will vertically align the text inside the cell.
here is the fiddle;
td.fc-more-cell {
text-align: center;
font-size: 2.3em;
}
td.fc-more-cell a{
line-height:85px;
}
I am using Sencha Touch 2.2.1 . I want to display list items with icons, for that I am using itemTpl config property of the list. The image is rendered as icon but the list item is not getting aligned properly- it appears starting from much below. I want the text to get started from the top- it must be aligned horizontally with the image. I also tried changing 'margin' property but it didn't seem to work.
Please find my code below:
Ext.define('BBraunSencha.view.ListPanel',{
extend: 'Ext.Panel',
xtype: 'listpanel',
config:{
layout:{
type: 'vbox',
align: 'stretch'
},
items:[
{
xtype: 'label',
html: '<div style="margin-left: 20px;">List one</div>'
},{
xtype: 'list',
flex: 1,
ui:'round',
scrollable: true,
data:[
{ name: 'item1', price:'2000',in_stock : 'no'},
{ name: 'item2', price: '3000',in_stock :'yes'}
],
itemTpl: '<img src="images/Tulips.jpg" style="height: 50px;width: 50px;display:inline-block;margin-right:50px;"/>{name}'
}
]
} });
What can be the other way to achieve it?
Add a class to your css, then use that class for your itemTpl:
CSS file:
.tulip-icon {
background-image: url(images/Tulips.jpg);
background-size: 50px 50px;
background-repeat: no-repeat;
padding-left: 50px;
}
JS Code:
itemTpl: '<div class="tulip-icon">{name}</div>'
Add css:
.list-image{
height:20px;
width:20px;
float: left;
}
in js file:
itemTpl:'<div><img src="images/Tulips.jpg" class="list-image">{name}</div>'
I need a List look like iphone menu, see this picture
My list actually is this
I can't obtain a same look
my js code
var store = new Ext.data.JsonStore({
model : 'Contact',
getGroupString : function(record) {
return record.get('menu')[0];
},
data: [
{menu: '<img src="images/summary2.png" height="42" width="42" /> Shipment Summary ',item:'1'},
{menu: '<img src="images/detail2.png" height="42" width="42" /> Shipment Details ',item:'2'},
{menu: '<img src="images/documents2.png" height="42" width="42" /> Shipment Documents ',item:'3'}
]
});
SL.views.mainMenuBottomBar = new Ext.List
({
id: 'MBB',
fullscreen: false,
centered: true,
cls: 'settingscls',
disableSelection: true,
scroll: false,
dock: 'bottom',
itemTpl : '<tpl for="."><div class="x-list-group-items">{menu}</div></tpl>',
grouped : false,
indexBar: false,
onItemDisclosure:
function(record)
{
if(record.get('item')=='1') {
}
...
},
store: store
});
my css code
.settingscls
{
background:transparent;
}
.settingscls .x-list-disclosure
{
margin-top:0.6em;
right:1em !important;
-webkit-mask:none;
-webkit-mask-box-image: url('images/list-arrow.png');
}
.settingscls .x-list-item
{
background:white;
left:10px;
right:10px;
bottom:10px;
-webkit-border-top-left-radius: 0.4em ;
-webkit-border-top-right-radius: 0.4em;
-webkit-border-bottom-left-radius: 0.4em;
-webkit-border-bottom-right-radius: 0.4em;
}
-In the css I can't apply border to first and last item list
-The text appears in vertical align bottom
-the font not same to iphone menu
-the right margin or padding works
Please help me
Thank you in advance!
Check out the similar question asked on Sencha Touch forum:-
How to create something like iPhone settings menu?
Output :-
Make sure you container has padding to the left and right, and that the ul is displayed as a block element, like so: http://jsfiddle.net/P9pSG/4/
I am new to sencha touch.
How do we change the background color of a button to white? I have a button with two images in each corner. I want the button to be plain white.
I tried using css like this:
.quest {
background: url(../images/quest.jpg) no-repeat left,
url(../images/rightarrow.jpg) no-repeat right;
background-color: white;
border: none;
border-color:white;
padding-left: 50px;
text-align: left;
}
My button is here:
{
xtype: 'button',
text: '<div class="quest">Info</div>',
labelWidth: '100%',
name: '',
handler: function() {
}
}
My button has grey borders (Grey default button color in sencha) with white color in mid. How do i make it completely white? Please help.
I have even tried:
style: "background-color: white"
Using 'cls' attribute solved my problem.
{
xtype: 'button',
cls: 'btn',
text: '<div class="person">People</div>',
labelWidth: '100%',
},
In my app.css define
.btn
{
background-color: white !important;
background-image: none;
}
We have to redefine both background-color and background-image properties so that the default sencha-touch.css properties are overridden. Thank you Thiem Nguyen for your help.
This should render your desired button :)
config: {
ui: 'plain',
text: 'Your Text',
style: 'background-color:white;'
}
Just like Thiem Nguyen said, this will work
{
xtype:'button',
text:'text',
ui:'plain',
style:'background-color:white'
}