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/
Related
I want to add different styles in both mapped data. I use library antd for the dropdown, and I have default style for dropdown which is radius: 8px but for this dropdown, I need to style it a bit different, and I have mapped my dropdown
index.js
<DropdownGroup
label="test"
dropdowns={[
{
options: [],
componentProps: {
className: "w-full",
onChange: (e) => {
alert("asd");
},
},
},
{
options: [],
componentProps: {
className: "w-full",
onChange: (e) => {
alert("asd2");
},
},
},
]}
>
</DropdownGroup>
component.js
<div classname="dropdown-group">
{dropdowns &&
dropdowns.map((e, idx) => {
return (
<Dropdown
key={idx}
label={e.label}
componentProps={e.componentProps}
value={e.value}
options={e.options}
/>
);
}
</div>
dropdown.less
.dropdown-group{
display: flex;
.ant-select-selector:first-child{
border-top-right-radius: 0px ;
}
}
and the result like this
enter image description here
What I'm trying to do is, how do I style
border-top-right-radius: 0px; border-bottom-right-radius: 0px;
just for the first dropdown
I have tried to use :first-child and it seems not right.
Any advice is appreciated, Thank you
Have you tried this:
dropdown.less
.dropdown-group {
display: flex;
&:first-child {
border-top-right-radius: 0px ;
}
}
or just add
.dropdown-group:first-child {
border-top-right-radius: 0px;
}
Either way is to add pseudo class :first-child in the parent element to effect the first child of it.
I have a couple different types of UI widgets on my page. There is a class that is common between all of them .ui-widget-content. I need to style this class differently for each one, so I have assigned unique ids or classes to the HTML elements. This worked ok for one type of widget (dialog where I can use the dialogClass option in the JS to assign classes), but the other type of widget (slider) will still only inherit styles from .ui-widget-content even when I specify a style for #id .ui-widget-content to get at the specific element of interest. I'm kind of at a loss on how to override the original style at this point.
HTML:
<div id="opacitySlide" class="slider">
<div id="opacityVal" class="ui-slider-handle"></div>
</div>
<div id="habClassify-dialog" title="Habitat Classification">
<div id="HabClassifyGPService">
//whole bunch of stuff
</div>
</div>
<div id="error-dialog" title="ERROR"></div>
<div id="success-dialog" title="SUCCESS">
<p>Habitat classification completed successfully! Your results will be viewable in 10 minutes.</p>
</div>
CSS:
//This one doesn't work and get overridden by the default style .ui-widget-content
#opacitySlide .ui-widget-content {
border: 1px solid black;
}
//This one does work, these classes are assigned in the JS, NOT the HTML
.habClassify-dialog .ui-widget-content,
.error-dialog .ui-widget-content,
.success-dialog .ui-widget-content {
border: none;
}
I've also attempted to use the custom class I assigned in the HTML instead of the id for the non-working CSS as well, but no luck.
.slider .ui-widget-content {
border: 1px solid black;
}
Here's the JS code:
//Creates the popup dialog for the habitat classification button
var habClassifyDialog = $("#habClassify-dialog").dialog({
autoOpen: false,
height: "auto",
width: 400,
modal: true,
dialogClass: 'habClassify-dialog',
buttons: [{
id: "classify",
text: "Classify habitat",
click: upload
}],
close: function () {
$('#uploadForm')[0].reset();
$('#validation-text').empty();
}
});
$('#classifyHab').click(function() {
habClassifyDialog.dialog("open");
});
//Creates the popup dialog that contains error messages
var errorDialog = $("#error-dialog").dialog({
autoOpen: false,
height: "auto",
width: 1000,
modal: true,
dialogClass: 'error-dialog',
buttons: [{
id: "error-ok",
text: "Ok",
click: function () {
errorDialog.dialog("close");
}
}]
});
//Creates the popup dialog that shows the success message
var successDialog = $('#success-dialog').dialog({
autoOpen: false,
height: "auto",
width: 400,
modal: true,
dialogClass: 'success-dialog',
buttons: [{
id: "success-ok",
text: "Ok",
click: function () {
successDialog.dialog("close");
if (habClassifyDialog.dialog('isOpen')) {
habClassifyDialog.dialog("close");
}
}
}],
close: function () {
if (habClassifyDialog.dialog('isOpen')) {
habClassifyDialog.dialog("close");
}
}
});
//Create the opacity slider
var handle = $("#opacityVal");
$("#opacitySlide").slider({
range: "min",
value: 100,
min: 0,
max: 100,
create: function () {
handle.text($(this).slider("value") + "%");
},
slide: changeOpacity,
change: changeOpacity
});
If you haven't used jQuery UI before, it automatically adds a whole bunch of default styles to the widgets upon load, that's why you don't see class="ui-widget-content" in my HTML anywhere, it's not necessary to declare it.
Alright, I have officially made the stupidest mistake ever. Considering the HTML was generating with the correct custom ID I assigned, I figured there had to be a way to access the ui-widget-content class using that ID. It was as simple as chaining them together, before when I was testing this I had left a space in between.
Problem CSS (won't work):
#opacitySlide .ui-widget-content {
border: 1px solid black;
}
Simple fix (remove space between id and class):
#opacitySlide.ui-widget-content{
border: 1px solid black;
}
For the sake of completeness, the explanation is that if you leave a space between these items, it thinks the HTML is structured like this:
<div id="opacitySlide">
<div class="ui-widget-content"></div>
</div>
when really my HTML was structured like this:
<div id="opacitySlide" class="ui-widget-content"></div>
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>'
When a object is dragged and dropped from one div to another, the format in li gets changes to text only. I want it in the same format and style i.e 'li' after droping it.
$(function() {
$("#catalog ul").sortable({
zIndex: 10000,
revert: true
});
$("#catalog").accordion();
$("#catalog ul").draggable({
appendTo: "body",
helper: "clone",
zIndex: 10000
});
$("#dialogIteration ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(this).find(".placeholder").remove();
$("<li></li>").text(ui.draggable.text()).appendTo(this);
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
$(this).removeClass("ui-state-default");
}
});
$("ul, li").disableSelection();
$("#dialogIteration").dialog();
});
Sample Code here
The style of item <li class="ui-state-default"/> in original list is defined by CSS rules:
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid lightGrey;
background: #E6E6E6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #555;
}
...
After you dragged it to new container, and drop it, you created another element to hold the content $("<li></li>").text(ui.draggable.text()) which doesn't have the same className as the original element, so the style is ripped off.
You can either fix it by changing it to
$('<li class="ui-state-default" />').text(ui.draggable.text()).appendTo( this )
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>'