I have a repeater In which I am displaying different values.On click of each row I want to display few values.But in the enyo example the content of the popup is popup.....
This content I want to change.I have tried as below
I have the popup-
{name: "basicPopup", kind: "enyo.Popup", floating: true, **centered: true,**
style: "background-color: yellow; padding: 10px", onHide: "popupHidden", components: [
{content: "Popup..."}
]
},
If I am removing centered:true all the popups are coming on the left corner.
I want that on the repeater on which i will click the popup should come near that row i mean where i will click popup will come near mouse click.
Please help...
Here is a quick fiddle I made onto a previous one with a search list.
If you click a list item you'll see I made you a little popup there that'll move along with where you click. I know that the data shown inside the popup is wrong but hey... that's not the point here is it :)
http://jsfiddle.net/joopmicroop/NEYQC/
PS yes there's an enyo swipe function, it's called 'enyo.Slideable', you can view the info here: http://enyojs.com/api/#enyo.Slideable
Related
Haven't coded in years, and started to play around with Google App Maker last week. As the title suggests, I have a couple questions.
I'm trying to figure out if there's a way to dynamically change the color of a button upon click. Right now I have the button changing enabled status to false on click, and using CSS style to change the color of disabled buttons to gray. Is there a way to do this without disabling the button?
Is there a way to wrap text in a button? Right now I am overlaying a Label on the button with the correctly styled font, but would ideally like to have that text be from the Button, as the space the label takes up is not clickable.
Thanks in advance for any help!
add some lines to your page or global styles this
this should let you wrap text.
.app-Button {
white-space: pre-wrap;
}
Say you want to change your button blue when a Boolean value gets changed to "true" in your data source.
add a class to your styles
.blue{
background: blue;
}
then select your button and in the property editor>Display>styles click the drop down and select binding
set the binding to
=#datasource.item.**YourBooleanItem** === true? ['blue']:[]
Clarification there are two steps
Define a CSS class
Add the Class to the "styles" property of
your widget.
The Answer above uses a "binding" but also means that you've got to have an Item with this binding which you may not want.
I wanted a 'decimal' button to be orange when it was active. So on the Page I created a DecimalActive property. I used the onAttach event to set this property to false.
I created a CSS Class (local to the page) named Orange and Normal
.Orange {background:orange};
.Normal {background:white};
Then the following is my onClick
onClick(widget,event)
{
widget.root.properties.DecimalActive = !widget.root.properties.DecimalActive;
widget.styles = widget.root.properties.DecimalActive ? ['Orange'] : ['White'];
}
The challenge was figuring out exactly what AppMaker wanted in the styles []. I don't think it puts applied styles in this array. At least they didn't show up when I console.log(JSON.stringify(widget.styles);
I have verified that this does work (Dec 2019)
I think this answer is clearer and if someone wants to bind it the color change they still can.
I use selectize for the dropdown function,
However, I can only show 5 items at a time,
How could I show more items?
The problem is not on JS side,
Because when I set maxOptions: 2 there are only 2 items.
Here's the demo page http://133.130.101.114:8000/portal/index.html#/pages/scrum_board
any idea?
Have you tried scrolling down the drop-down? There are many more options in there if only you scrolled.
Edit: Now I understand you want to increase the height of the drop-down list. I've not used selectize before, but I guess if it has an even it fires after transforming the select box, you can add the following code to it:
jQuery('.selectize-dropdown-content').css('max-height','50%'); //or any specific height you want in px
or just put it in a timeout event callback on document ready:
jQuery(function(){
setTimeout(function(){
jQuery('.selectize-dropdown-content').css('max-height','50%');
}, 100);
});
Another screenshot to show the taller drop-down content:
I have problem with bootstrap drop up/down button.
Button Menu doesn't fit well on page.
I am looking for way to dynamically detect position on page of that button.
Base on location button should automatically drop up instead of drop down.
Here is problem:
on "SHOW" and "Action" button. Menu doesn't fit on page (It extends container).
https://jsfiddle.net/yz0ex8c5/
https://jsfiddle.net/3ro502q5/4/
The same happens when the button is on top. It opens Dropping up Instead of drop Down.
This is very important. Couse I use this buttons with drop down and drop up in table that can be sorted. I use Bootstrap-table library to sort rows in table.
You could check the scrollTop position for the page, then switch between .dropup or .dropdown according to what is most suitable.
$(window).scroll(function() {
var scrollTop = $("body").scrollTop();
if (scrollTop<50) {
$("#showBtnGroup").removeClass('dropdown').addClass('dropup');
} else {
$("#showBtnGroup").removeClass('dropup').addClass('dropdown');
}
});
forked fiddle -> https://jsfiddle.net/wenz3v5r/
Have given the btn-group an id for easy access. The evaluation value of 50 is completely arbitrary, have just added a lot of <br>'s to the bottom and the top of the page - that must depend on how your site looks like IRL. You should do the same (or rather the opposit) with the Action dropdown at the bottom.
I have a "split button" from extjs much like the "Menu Button" demo on the extjs demo page at http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/kitchensink/index.html#basic-toolbar. The button has a drop-down arrow on the right side that is a css-background image on a parent tag. When the right side is clicked a menu will drop down with additional selections for the button action. I can click the button or the em but in both cases the menu will not drop down.
I've also tried sending both the button and em javascript events in different orders ( mousedown, mouseup, click, etc) still I can only trigger the main button and cannot get the drop down menu to appear.
Somehow I need to place a mouse click precisely on that background image to get the menu to appear. Would there be a way for watir-webdriver to click at an arbitrary position in the browser? Assuming, of course, that I could get watir-webdriver to give me the current coordinates of the button or em. Or is there some other way to trigger the drop down?
I posted a similar inquiry on the google watir forum, but still have no solution. Thanks for any help that can be provided.
Try this, works like a charm:
b.em(:class, "x-btn-split x-btn-split-right").button(:class, "x-btn-center").send_keys :down
If you are just trying to expand the menu and are not specifically testing the 'click' event, you can send the down key instead:
browser.div(:id, 'splitbutton-1022').send_keys :down
This worked for the sample site on Firefox. I did not try any other browsers.
I asked the following question earlier and #topek answered it perfectly. However, I thought I would be able to split the buttons (float: right and float: left), however, my efforts to do so failed.
Basically in addition to the buttons showing up at the bottom of the div in the same location through the entire wizard process I would also like the buttons to show up on either side of the fieldset. I should note that there is a beginning wizard screen that only includes the "Next >" button (a href) and an ending screen that contains a "< Back" button (a href) and an input button "Finish". I would like the "Next >" button to show on the right hand side always (as well as the "Finish").
Please see the following fiddle: http://jsfiddle.net/HcAVX/
Any help is appreciated!
Simply position your buttons:
http://jsfiddle.net/thomas_peklak/HcAVX/1/