So, I am working on a feature where I need to build a table which has some fixed and some dynamic columns. As the question indicates, I am using the Ant design table component.
In short, I have a column for the actions, within this column, I am conditionally populating its cells with either 2 or 3 buttons, each triggering a process.
Now, these buttons, by default only show the icon, however, when hovering over one of them they expand and thus take more space. My objective is to find a solution where the column`s width adjusts itself (i.e. expands to the right) such that all the content fits in on the same line. Furthermore, it is a requirement that the space of the column from both left and right should be kept to a minimum as much as possible, hence, the width adjustment.
Attempts:
use the className property and attempt to use min/max-width, width with all the properties and combinations - If we use the "auto" than, unfortunately, the width will be handled by ant design
use the width property on the column object
Here are some additional imgs the first one (1) represents the column object while the second one (2) represents the table with its properties
(1)
(2)
If there is anything else you think I could provide to further clarify this issue, please let me know, also, thank you in advance for taking the time solving this issue 👩💻👩💻
Related
I'm not looking for the height of every row in my month view in FullCalendar to be the exact same height; I just want to be able to see the full content of every cell in the calendar.
contentHeight: 'auto'
doesn't appear to solve anything in this view, and adjusting the contentHeight to a specific integer adjusts all rows evenly, which makes the calendar unnecessarily huge if it's just one particular cell, and thus row, that needs to be bigger to display all events.
Additionally, it appears that I'd have to figure out how big to set contentHeight in a fairly complicated manner, as 'auto' doesn't appear to make adjustments for additional events on one particular date.
It's easy to reproduce by adding around 10 events to one date, and setting contentHeight to 'auto'.
Is there any way to make this work?
I'm not really sure how you expected contentHeight to help you in this case, since the documentation makes clear that this affects the whole calendar area, not just individual rows.
You haven't made it entirely clear, but it sounds like you're trying to deal with a scenario where you have a lot of events on one particular day, and would like the calendar to expand the height of that row so they are all visible.
As far as I can observe, the calendar will do this for you by default. See this demo: http://jsfiddle.net/7nsbjya5/1/ . There are 9 events all on one day, and no events elsewhere in the month. The row on which the events occur is automatically expanded to accommodate them.
The only way I can see where this would not happen is if you had set the eventLimit value to something other than its default.
e.g. if you set
eventLimit: 3
then the calendar will never display more than 3 events in any cell, and will replace the others with a link where they are then displayed in a popover when clicked.
Whereas, if, as per my demo, if you either do not set eventLimit, or set it to
eventLimit: false
(which is the default anyway) then you should have no problem. You also should not have any need to set any value for contentHeight, unless you wish to use it for its stated purpose instead. Either way it has no effect on the height of individual rows.
N.B. If that isn't your problem, then you'll need to update your question with enough relevant code for us to be able to diagnose the exact issue. A screenshot of your problem might also be helpful.
I have a Angular grid (ag-grid) that will, based on scrolling/view, create div in the DOM to display data. I am writing a Selenium WebDriver test that would read the data from the grid and compare it to the data returned from the API.
Since some of the div's are not yet created (hidden behind Angular virtualization) WebDriver is not able to effectively capture the data.
Is there a way to force the grid to display all data?
there is a setting, gridOptions.rowBuffer, that tells the grid how many extra rows to render above / below the viewport. set this to a number greater than the number of rows you have and then all rows will be rendered. or if unsure, set it to 9999999.
ps you mention 'Angular Grid' and 'Angular Virtualisation'. to be correct, it is called 'Agnostic Grid' - the ag stands for AGnostic - and also the virtualisation is not Angular, grid grid has it's own implementation of row virtualisation.
Try explicitly clicking the scrollbar or panning the scrolled area in order to bring the desired div(s) into view to force Angular to instantiate the divs. You could try scroll-into-view on a known instantiated object on the edge of the instantiated div set, which would, I imagine, kick Angular into instantiating the ones just outside the view, in anticipation of continued scrolling. Wash, rinse, repeat if desired.
Here's a possibly helpful page about scroll to element in Selenium: Scroll Element into View with Selenium
Try setting domLayout to domLayout = 'autoHeight'
I'm building an app in which I need to use React to render a Bootstrap grid. I'm a React newb so please bear with me.
Frontend will receive N objects that need to be displayed in Boostrap columns, each in his own column. The problem is, I don't know how large is N so I don't know how many rows do I need.
Any ideas how to approach this?
Should I have just one component? Or three (Container, Row, Column)? Or something else?
First of all, consider if you even need custom components for Container, Row and Column. You can just use a div with the appropriate css class, I don't see that much value in wrapping this into a custom component. If you do decide to use a custom component, you may want to look at react-bootstrap, they already implemented these.
As for the layout, I believe you can place as many columns as you want in a row in Bootstrap layout and they will wrap as necessary (if there's more than 12), so it might be easiest to just have one row and put all the columns inside it (see Bootstrap docs).
There are different ways to approach this problem depending on the type of content that you are trying to insert into the grid.
First off, as far as columns go, Bootstrap uses a 12 column grid system. This will make your life a bit easier because you can divide 12 by the number of elements in each row. If your html is set up correctly you can use:
var numOfElements = document.getElementById('objectsWrapper').children.length;
If you're using images you may want to set a strict max-height and max-width (percentages) to restrict the images generated from messing up the grid.
Next, when the column exceeds 12 elements, you'll want to start a new .row if necessary. Create a new div, append it to your current container and set it as the currentDiv you want to add your children to.This step is important because your code needs to know which 'objectsWrapper' it's querying for children.
Wash. Rinse. Repeat.
Hope this helps.
I've built a very basic grid of divs by using float:
However when expanding one of the items placed in the right-hand side column, here is what happens (please excuse my crude/lame arrows I've used to illustrate what I'm trying to achieve):
Which is what I expected but not what I really want. I'm looking for a neat way of having boxes A and B move up to fill the empty spot and items C-H to move up one row so that available space is utilized most efficiently.
Here is the JSFiddle I've created to illustrate this problem (apologies it's not clickable, stack overflow rep thing again...) :
http://jsfiddle.net/VDV6S/4/
I would appreciate any suggestions.
You need jQuery Masonry, or something similar.
Alternatively, you can split the items into two columns manually: http://jsfiddle.net/thirtydot/VDV6S/5/
Another option is to use CSS3 columns, however the browser support might not be acceptable.
I'm using Adobe LiveCycle Designer to create dynamic forms which are automatically filled from an XML document. Unfortunately, I'm not very familiar with LiveCycle so I ran into a problem I cannot solve. Let me give you a simplified version of what I want to do and what I have tried so far.
I have a table with two columns, "Song" and "Lyrics". Each row of the table contains two textfields, one for the song and one for the lyrics, which are automatically populated automatically from an XML document. Unfortunately, some entries in the "Lyrics" column are too big so they expand beyond the page. In order to solve that, I wrapped each textField in a Flowed subform, and for each of them I checked the "Allow page breaks within context" option.
The problem with this approach is that the two textfields are no longer growing together. So, although I'm getting a big Lyrics which is spanning in several pages, the Song textField doesn't grow along with the Lyrics.
I was trying to find a solution for that and I realized that the only way might be to dynamically change (using Javascript) the height of the Song textfield to match the one in the Lyrics. But since the lyrics textField is set to "Expand to fit" I cannot take the height value, it always returns "0in" even though it's not.
Do you guys have any solution for getting the height of a field that is set to "Expand to fit", or maybe a better way to make the textFields grow together?
Thank you in advance for all your help
You have to use the following script in a layout ready event:
var heightField = xfa.layout.h(xfa.resolveNode(fieldName), "pt"));
Remember that you can access this property only in the layout ready event, when the form is rendered and so the height is effectively calculated.
In my opinion the best way to achieve your result is to put the two field in the same subform (autofit in height checkboxed) and then put the height of the two fields to the same value of the height of their parent. So, you can simply write something like that:
var heightField = xfa.layout.h(this.parent, "pt"));
this.h = heightField + "pt";