I am using "Bootstrap responsive form" (http://www.bootply.com/jrNvaahcOh) and Kendomultiselect (http://demos.telerik.com/kendo-ui/multiselect/index)
The Bootstrap form scales the whole form, adapting the placement (and width) of form fields based on screen size.
My example works with the form only: http://jsfiddle.net/52VtD/12239/
It does
Draw the adaptive form
Wait 2 seconds
Activate Kendomultiselect (problem here!)
Problem: When there are two columns of form fields (I assume it breaks whenever the kendomultiselect is rightmost), the Kendomultiselect messes up the "flow" of design -> It seems like the next element get's thrown off it's proper placement and is not where it should be.
The Kendo Code that activates the simple html select is
$("#food").kendoMultiSelect().data("kendoMultiSelect");
..currently setup with timeout of 2 seconds to show the effect in my example.
Can anyone point out why this happens? I can only assume Bootstrap's css has problems with Kendo's css.
Related
I'm pretty sure this must have been asked before but I can't seem to find a solution. I have some pop-up forms which I want to show without title bar since I've designed custom placement functions and I don't want them to be moved or closed from the title bar, so having it show only makes the form look uglier. I haven't found a way to hide it other than setting the form border to none, but that makes some small forms that popup on top of other forms (which I don't want to close when opening the other form because of crossed references and various visual reasons) merge with the form on the background and make it hardly distingishable.
So, I need a way to hide the form title bar while being able to set a thin border for the form to establish its bounds clearlier. I've tried setting a rectangle around my forms, but since I'm using form headers I can't put it around the whole form. I guess I could put one around the header section and another around the details section, but it makes it look horrible. Any simple way to achieve what I intend to do?
I'm using the Angular UI Bootstrap typeahead to display a customized list of suggestions as the user types into a text input form control. This form control exists inside a div using jQuery slimScroll in order to maintain a constant div size despite the size of its contents fluctuating. I really hoped the typeahead would display over everything like a regular html select dropdown, but unfortunately it does not, as can be seen in this plunker. I've tried futzing around with the z-index and adjusting the position and display properties; all fruitless endeavors.
Does anybody know how to get the typeahead popup to display over its parent border? If not, is there a way I could coerce the select tag to display HTML content so I can include glyphicons, emphasized text, etc. in the list of suggestions?
The problem is with the slim scroll - you are inside a div with relative position and overflow hidden (think of it as an iFrame). There is a small workaround...
You could, essentially set the position of the generated UL (.dropdown-menu) to fixed, set a height for it, then set an overflow:scroll...
It would work in some scenarios where the input field has a fixed position... otherwise you'd need to control where the input is and adjust the position of the auto-complete to follow, and a whole other bunch of nasty scripts.
Without looking at your application, I cannot understand why your have this particular architecture, but I can say that there must be cleaner options for handling autocomplete outside of slimscroll.
I just set typeahead-append-to-body="true" on the typeahead control and it worked. Not sure exactly why, but it's certainly a simple solution.
I have a MVP type application where I will have a view that contains one or more buttons. The number of buttons is not known till run time and may vary each time the page is rendered. What is the best way to approach this apart from a simple loop that will just display 1 - n number of buttons that are passed to the view?
My suggestion: Add all the buttons on creation and use CSS to hide or show them dynamically. I think this will yield less DOM manipulations and still works the same, also it might produce a simpler code. I currently do it that way using SmartGwt.
drupal_render($form) works fine for my purposes in general, but there are cases where I'd like a form to have a different layout style
(specifically I'd like all the fields and submit button to appear in one horizontal row)
Is there a way to specify a different rendering for a specific form, and leave the rest with the default rendering for the theme?
If it's the layout you want to change, most likely, you'd want to change the CSS, not the markup.
If you want to display all the fields and submit button in a row, you could change them into blocks and "float: left;" them.
I have a GWT application for which I'm trying to write some tests using Selenium.
I'm using XPath to identify the elements on the page for the tests. Using id won't work as the id values are auto-generated by GWT and can change. Things started going well when I realised I could find buttons by their labels as follows:
//button[.='OK']
However, when I started running multiple tests I started having problems. I realised that the issue was all the different "pages" of the GWT app once generated by the Javascript remain in the HTML in hidden <div> elements. This meant my Selenium tests were sometimes clicking hidden buttons instead of the button visible in the current view.
Examining the HTML with Firebug, it seems that GWT hides the <div> elements by adding display: none to their style attribute. This means I can find all the hidden OK buttons as follows:
//div[contains(#style,'display: none')]//button[.='OK']
This will find all the hidden OK buttons, i.e the buttons which have an ancestor <div> which is hidden by having display: none in the style.
My question is: how do I use XPath to find only the visible OK buttons? How do I find the buttons which have no ancestor <div> elements with display: none in the style?
This should work:
.//button[.='OK' and not(ancestor::div[contains(#style,'display:none')])
and not(ancestor::div[contains(#style,'display: none')])]
EDIT:
The simpler and more efficient expression below:
//div[not(contains(#style,'display:none'))]//button[.='OK']
does not work properly because every button has at least one div that's visible in its ancestors.
Selenium 2 Webdriver gives us the option of the isDisplayed() method which deals with this problem. Nice work by the selenium contributors.
This works for me:
//div[not(#hidden)]
//div[(contains(#style,'display: block'))]//button[#id='buttonid']
This worked for me. Like 'display: none' representing hidden blocks, 'display: block' represents currently displayed block and we can specify any inner tags to be identified as above
For me this worked to eliminate hidden elements:
//div[#open]//*
I added this code to the namemapping editor and it did not find the Keep button once it came up. The system sees it in the editor but it doesn't want to click on the button whenever create a new test which will include this item.
Now one other thing this is a dynamic button click so what happens is I will select a button that opens up a to drop downs where I place these items inside those dropdowns. Now it works for the first item but fails to recognize the same mapped item for the next time it is used in another screen. The buttonKeep is the same in both areas.
//div[contains(#style,'display: block')]
This code will find visible element xpath