I'm using React. I've a page with a table. Once button is clicked, a detail form should display on the right side of the table. The table is set in column with grid-10, and needed to be take most of the page grid column. The detail form is set in column with grid-4.
It's not going to be reflected but here is the link to the playground code: https://codesandbox.io/s/inspiring-grothendieck-bkygv?file=/src/table.js
Any help (css, bootstrap,etc.) is much appreciated.
First of all I added bootstrap to your sandbox in order for the grid to work.
Secondly, based on the active's value, div needs to change class.
Check my sandbox
Related
The Goal
I want to have a v-data-table that is editable and looks "nice".
The problem
Adding a v-text-field to make it editable also increases the row-height to a very eye unpleasing level
Original view:
With v-text-field inputs
The quesion
How can I decrease the row height to resemble the one without v-text-fields.
As a Bonus
Because I am quite new to this whole Front-End-Development-Kind-Of-Thing, how would I go about it identifying what is causing this "height issue"?
PS: I've tried to add a JSFiddle but I cant even seem to be unable to figure out how to display the v-data-table correctly...
The basic draft can be found here
Is it necessary for your table to be editable within the columns? How do you decide when to pass data back via request to your Backend? After the user left a field?
If it is not necessary to have the edit option within the table, I would just use the action buttons you already have in your table to trigger a modal in which you can edit the fields. This also allows you to have proper form control before a user can submit a request. There is also a Vuetify Codepen with an example how to do this Codepen
If it is necessary you should implement the v-data-table as v-data-iterator which is essentially the same functionality-wise, but allows for complete control over the look. https://vuetifyjs.com/en/components/data-iterators/
As to how to identify the problem with the v-text-field height you have to use your browser dev tools. You would then realise that the input has default paddings and margins but also a whole lot under the hood. It e.g. allocates space for error messages to pop up and for a label to go above the field.
And how to fix your JSfiddle you can read in the getting started section of the vuetify documentation under CDN https://vuetifyjs.com/en/getting-started/installation/#usage-with-cdn.
you can use the "dense" property for Lower height of v-data-table inputs
https://vuetifyjs.com/en/components/data-tables/#dense
I'm trying to create Table Rows in a Table that can expand by clicking on them (individually).
For example, if I would click on the specified area in the picture below, a Segment/Container (some sort of area) would drop down with content inside.
I've tried a solution that is mentioned in this thread, but the underlying problem is that every element under a Table Row/Cell is subject to the rules and boundaries of the Table HeaderCell. So if I for example try to create a Table Row with a Segment under it, the result will look like this:
As you can see the Segment is inside the new Row but is limited to the size of the HeaderCell.
When doing this I also get this error:
validateDOMNesting(...): <div> cannot appear as a child of <tr>.
in div (created by Segment)
It seems that Segment under Table Row is therefore a prohibited element structure.
Any idea on how the element structure should look to create some kind of area under a Table Row?
The the warning of a <div> not being allowed as a child of a table row is telling you that it is not valid HTML. That is true whether you are using Semantic UI React or plain HTML.
I'd recommend rendering another row below the row you have in your table already. Set a column inside of that row which spans all of the columns. Now you have a container which you can put other UI inside if you want to. You can customize the style of the wide cell if you need to for some reason.
Then you can set a toggle state on the clickable area of your table. You'll probably want to put the click events on the contents of the cells and not the cells themselves.
I threw together a quick Codepen showing how this would work. This gives you a working concept that you can modify based on your use case.
https://codesandbox.io/s/serene-water-ikco9?file=/example.js
The Problem in Hand:
I want to make a form designer where user can drag and drop fields of different type and design the layout too, some what similar to wufoo form builder but here the layout is limited to single column whereas I want to make something where user can make the layout as they want.
I understand how to do in single column view, but could not understand how to achieve multiple column layout eg: row 1 there could be 3 elements, row 2 one element stretched to full length, row 3 there could be just 2 elements etc.
What I tried:
I have tried with jquery UI sortable to make a single column layout with using div where new elements can be dragged and repositioned.
Any suggestion on how to proceed further will be helpful
I have tried searching StackOverFlow and google but could not find any link on a similar topic. If anyone could point me to the same, it will be also helpful.
When you reorder elements on wufoo form builder, you can only drag'n'drop up or down. Remove that restriction and as soon as one element is dragged across a certain threshold, it "belongs" to the next column. If the "old" column was the first or last one and the line that the element was moved over was to the "outside" of the form, add a new column there, until the maximal number of columns is reached.
If the used drags the last element of a column into another column, remove the now empty column on element-drop.
You could also remove the dynamic adding/removing of columns and juist have a button ("remove column" & "add column") to do it by code.
An example for the dropping in another column can be found here: http://jqueryui.com/sortable/#connect-lists
Hope this helped!
Edit:
http://jqueryui.com/sortable/#portlets and http://jqueryui.com/sortable/#empty-lists also have elements that you could look into. Good luck! Sounds like a nice project. Can we see any progress or beta?
How do I create a label that is editable? I am displaying data in a table, and would like to provide in place editing for the displayed data. What CSS styles can I use for it?
Put a text input box there and make its background same as the background of its container and put 0 border on it and use same font style and color as other items in the table
What CSS styles can I use for it ?
It's not really a matter of CSS (unless your questions pertains solely to achieving a particular style).
You can:
Make all table cells contain inputs. This has the (potentially significant) downside that all data will be submitted to the server if the form is POSTed. I wouldn't recommend this approach unless the table is small or you are never fully submitting the whole page.
Change the label to an input on click. When the form is submitted, this value will now be a part of the request.
Change the label to an input in response to an action elsewhere (e.g. focusing the row, clicking an edit button next to the row, etc.)
Set contenteditable="true" on the element. This allows rich formatting but also requires that you keep track of the changes the user has made; they will not be submitted to the server unless they are placed into a form field.
You will likely want/need a snippet of JavaScript to change the label to an input (#2 and #3). You will need JavaScript to get the data to the server with approach #4.
I wanna create a table where I should hide some columns. Whenever I click on an arrow or some button The hidden columns should be display along with original columns in that table.
For example, I have 20 columns, I don't need show all the columns at the staring point of view. Suppose I want to display 5 columns in UI, renaming 15 should be hidden. Where can I put some arrow on right corner(in header line) of table to extend the table with remaining columns.
Is it possible with JSF with rich-faces or anything else.
Thank you in advance.
Take a look on this example on primefaces labs. It allows to dynamically add columns to a datatable. I am sure you can tweak it to get the behaviour you are looking for.
Use a <rich:dataTable. Set the rendered property of the columns which should be initially hidden by using a boolean property in your class.
<rich:dataTable value="" var="v" id="tbl">
<rich:column>Always visible column 1</rich:column>
<rich:column rendered="#{del.renderColumn}">Visible on demand</rich:column>
<rich:column>Always visible column 2</rich:column>
<rich:column>Always visible column 3</rich:column>
</rich:dataTable>
Use an <a4j:commandButton and set the property renderColumn as true at button action and reRender the table.
<a4j:commandButton value="Show" action="#{del.renderHiddenColumn()}" reRender="tbl"/>