How do you make a dropdown list that displays images to the user instead of text?
By : Tyler Peter Stiene
Date : March 29 2020, 07:55 AM
hop of those help? I would use custom ButtonField and PopupScreen. Two reasons: in mobile design it's better to use screen effectively, and classic desktop dropdown control seems to be less sufficient than popup, at least for complex items (image + text) it's easier :) code :
class DropdownItem {
Bitmap mBitmap;
String mName;
public DropdownItem(Bitmap bitmap, String name) {
this.mBitmap = bitmap;
this.mName = name;
}
}
class BitmapButtonField extends ButtonField {
protected DropdownItem mItem;
boolean mTextItem;
int mWidth;
int mHeight;
public BitmapButtonField(DropdownItem item, boolean textItem) {
super(CONSUME_CLICK);
mItem = item;
mTextItem = textItem;
mWidth = mItem.mBitmap.getWidth() + 6
+ (mTextItem ? getFont().getAdvance(mItem.mName) + 6 : 0);
mHeight = mItem.mBitmap.getHeight() + 6;
setMargin(0, 0, 0, 0);
setPadding(0, 0, 0, 0);
setBorder(BorderFactory.createSimpleBorder(new XYEdges(0, 0, 0, 0)));
setBorder(VISUAL_STATE_ACTIVE, BorderFactory
.createSimpleBorder(new XYEdges(0, 0, 0, 0)));
}
protected void paint(Graphics graphics) {
int color = (getVisualState() == VISUAL_STATE_FOCUS) ? Color.LIGHTGREY
: Color.DARKGRAY;
graphics.setColor(color);
graphics.drawRect(1, 1, mWidth - 2, mHeight - 2);
graphics.drawBitmap(3, 3, mItem.mBitmap.getWidth(), mItem.mBitmap
.getHeight(), mItem.mBitmap, 0, 0);
if (mTextItem)
graphics.drawText(mItem.mName, mItem.mBitmap.getWidth() + 6, 3);
}
public int getPreferredWidth() {
return mWidth;
}
public int getPreferredHeight() {
return mHeight;
}
protected void layout(int width, int height) {
setExtent(mWidth, mHeight);
}
}
class DDImagesButton extends BitmapButtonField implements FieldChangeListener {
DropdownItem[] mItems;
int mIndex;
public DDImagesButton(DropdownItem[] items) {
super(items[0], false);
mItems = items;
updateIndex(0);
setChangeListener(this);
}
protected void paint(Graphics graphics) {
super.paint(graphics);
int x = mItems[mIndex].mBitmap.getWidth() + 2;
int y = 5;
int y1 = y;
int y2 = y + 10;
int x1 = x;
int x2 = x + 18;
int[] xPts = new int[] { x1, x2, x1 + 9 };
int[] yPts = new int[] { y1, y1, y2 };
graphics.drawFilledPath(xPts, yPts, null, null);
}
public void fieldChanged(Field field, int context) {
getScreen().getUiEngine().pushScreen(new DDImagesPopUp());
}
public void updateIndex(int index) {
mIndex = index;
mItem = mItems[mIndex];
mWidth = mItem.mBitmap.getWidth() + 6 + 18 + 3;
mHeight = mItem.mBitmap.getHeight() + 6;
invalidate();
}
class DDImagesPopUp extends PopupScreen implements FieldChangeListener {
public DDImagesPopUp() {
super(
new VerticalFieldManager(VERTICAL_SCROLL
| VERTICAL_SCROLLBAR));
for (int i = 0; i < mItems.length; i++) {
BitmapButtonField button = new BitmapButtonField(mItems[i],
true);
add(button);
button.setChangeListener(this);
}
setFieldWithFocus(getField(mIndex));
}
protected boolean keyChar(char key, int status, int time) {
if (Keypad.KEY_ESCAPE == key) {
this.close();
return true;
} else
return super.keyChar(key, status, time);
}
public void fieldChanged(Field field, int context) {
updateIndex(getFieldWithFocusIndex());
close();
}
}
}
class Scr extends MainScreen {
DDImagesButton ddImages1;
DDImagesButton ddImages2;
public Scr() {
HorizontalFieldManager hfm = new HorizontalFieldManager();
add(hfm);
DropdownItem[] items = new DropdownItem[6];
items[0] = new DropdownItem(Bitmap.getBitmapResource("1.png"),
"Add Item");
items[1] = new DropdownItem(Bitmap.getBitmapResource("2.png"),
"Attachment");
items[2] = new DropdownItem(Bitmap.getBitmapResource("3.png"), "Time");
items[3] = new DropdownItem(Bitmap.getBitmapResource("4.png"), "User");
items[4] = new DropdownItem(Bitmap.getBitmapResource("5.png"), "Group");
items[5] = new DropdownItem(Bitmap.getBitmapResource("6.png"),
"Information");
ddImages1 = new DDImagesButton(items);
hfm.add(ddImages1);
ddImages2 = new DDImagesButton(items);
hfm.add(ddImages2);
}
}
|
Dropdown list displays elements behind it in IE9 and FF
By : Simon Stapleton
Date : March 29 2020, 07:55 AM
wish help you to fix your issue I'm writing a dropdown navigation for my page using an unordered list, but the list items display the elements behind them. , I think what you need it this: code :
.headlink{
position:relative;
}
.headlink ul{
position:absolute;
display:block;
left:0;
top:25px /*You'll need to play with this number*/
}
|
Get value selected in dropdown list using Javascript (displays null)
By : Ikon
Date : March 29 2020, 07:55 AM
wish helps you I need to access the value selected from a drop down list using Javascript. But every time I get 'null' as the answer though a list item is selected. , You have to specify id of select element code :
<select class="mySelect" id="mySelect">
|
md-autocomplete displays results as a list instead of dropdown
By : Ramya
Date : March 29 2020, 07:55 AM
it helps some times I am trying to use Angular Material md-autocomplete tag to display suggestions for zipcode in my form. I am calling an asynchronous service to get the suggestions and populate the results. I used the demo code on https://material.angularjs.org/latest/api/directive/mdAutocomplete as a reference. However, the results are getting displayed as a ul-li's below my form. Can someone please help me figure out what could be going wrong? I have included the required files in my html. Here are the code snippets: , You should add angularjs material css file. code :
<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css">
|
Bootstrap 3 button dropdown displays list items
By : lpopov
Date : March 29 2020, 07:55 AM
|