I have a 2 columns page and I want that on small screens the first column to be replaced by a small column with just a button on it. When you click the button the original first column appears again (like it is on Wordpress for example).
Thank you.
You cannot reduce a column into a button on a breakpoint (not without adding a lot of code), but you can:
Add a new column with class="column small-12 hide-for-medium", and put the button there... this will keep the column hidden from medium up.
The collapsible column (the first one) will have the class hide-for-small-only, so this will be hidden on small breakpoint; please add an id to this column.
Using jQuery, on the button click, hide/show the first column (the one with the ID, you sould use slideToggle() from jQuery), and that's it.
Hope this helps.
Related
How can I have possibility to choose which content should be displayed after row expanded. I need to be able to show if I just click on a row. But if I click pencil icon in the right side of the row I need to see on expand.
So i also don't know how to understand on expanding whether the pencil was clicked and what id of the row is so that I was able to display form according to data in the row.
I have an idea that expandedRowRender prop should be used. But couldn't reach the solution by far
Could be done by using two expanding Icons with different logics. But how?
I've built a simple master - detail form consisting of a form for the master element and table for the details.
In the toolbar of panel collection around the table I placed a CreateInsert button which ads a row to the table. My problem is that I this row is invisible until after I move my cursor over to the table and scroll down. Then it appears.
Before that a small scrollbar appear after pressing the button which can't be pressed.
Related to this is the problem when I press the delete button in the details, the table gets cut in half. I suspect these two problems are related.
This is my table:
This is after I press CreateInsert. The table should add another row below this one, and it does, but it is not visible until after I scroll. This happens only for the first row.
I am using JDeveloper 12c with Oracle ADF Fusion Web Applications.
This is a late answer I know , but try to programmatically refresh the PanelCollection and its container.
AdfFacesContext.getCurrentInstance()
.addPartialTarget (getThePanelCollection());
AdfFacesContext.getCurrentInstance()
.addPartialTarget (getThePanelCollectioncontainerLayout());
I tried this myself and it solved the problem after trying many other solutions.
Did u check with the Size.?
Try giving Styles for Table and Panel Collection "StyleClass=AFStretchWidth"
Add Execute in binding side of the jspx page for the particular table
Add invoke action for the execute in executables
Change the properties to render model in refresh condition of the invoke action
It will automatically make the master table to trigger the new values
Thanks
I am trying to implement a ExtJS based grid where users would change column data or enter empty columns. Is there a way to show/enter contents as bullet points on ExtJS grid cell like we usually do in Excel?
Thanks in advance
Check this fiddle - https://fiddle.sencha.com/#fiddle/mpl
The Idea is to use htmleditor as the column editor in your grid. However, there'll be quite a lot of work involved in positioning and styling when the html editor opens up for editing.
The fiddle that I created contains just the editor with no styling so it doesn't open good. And when you try, try editing the first column in third row data.
Another question for you Filemaker Pro experts. The database I am developing starts with a Main layout with a number of buttons (e.g. insert new item, show all items, etc.). Each button is associated to a script, which takes the user to the relevant layout. In each of these layouts I show the buttons in a row, and highlight the current layout with inverse colour.
My problem is that some of the buttons lead to the same layout, viewed in different modes, and I don't know how to conditionally highlight the right button.
For instance, Insert new item and Show all items take to the same layout, however in the first case the script views the layout as a form and inserts a new record, while in the second I view as a list and show all records. The layout is the same, though, so I'd need to enact a conditional formatting based on something. How do I do that, and what should I check against?
Thanks in advance for any help.
Regards.
Presumably you are currently using the formula: Get (LayoutName) to decide on your conditional formula, why not try additionally using formulas: Get(WindowMode) and Get(LayoutViewState)?
You could conditionally format the button if (which sends user to MyLayout in browse mode):
Get(WindowMode)=0 and Get(LayoutName)="MyLayout"
Or (which sends user to MyLayout in form view):
Get(LayoutViewState)=0 and Get(LayoutName)="MyLayout"
.
Other functions which may help could be Get(FoundCount) and Get(TotalRecordCount). You can see the entire list of Get functions here.
Folks,
I am trying to display EXT JS with Row Expander plugin in a Visual Force page.
Check this link http://mikhailstadnik.com/ext/examples/nested-grid.htm
As per the link, I am successful in displaying Accounts in first grid and respective Contacts in child grid.
Problem is: When I click on first row, it is expanded and shows the respective contacts.
When I click on second row and first row is not closed, the data which I can see for second row (Contacts) are visible at first row contacts also.
So, I think when second row is clicked, I need to close the first row.
Please suggest me how to do this..
The plugin you are talking about features collapseRow(row) method.
Each time you are trying to expand a row (use beforeexpand event for that) you need to loop through all the rows and collapse expanded ones.
Here is how you check if the row is expanded:
Ext.fly(row).hasClass(this.rowCollapsedClass) // this is referring to plugin instance