Currently, I have a table next to the Show Cases button, as shown in the JSFiddle below and as shown in the image below:
Is there a way I could display the table towards right hand side of the screen and have the table position top part start next to Show Cases button? Something like this (image edited using paint just to give an idea)?
To move the elements up, delete align-items: end.
To move the table further to the right, you can add a value of margin-right to the submit button.
Thanks. That works. However, I have one more row below Show Cases button and that seems to be starting from the bottom of the table.
You should not need all those <div> elements, as demonstrated here:
As there is no row below Show Cases in your JSFiddle, it is not possible to say why your extra row is starting from the bottom of the table. If you use your browser’s developer tools to examine the HTML, is the HTML for the extra row after the HTML for the table (which is not an HTML <table>)?
Sorry, I should have posted a JSFiddle demonstrating the same. Here it is..
It contains the initial changes you suggested.
Your JavaScript is inserting the ‘table’ into the <div> element which has id="jqxgrid". Your HTML for the second row currently comes after that.
I have considered keeping all the “controls” (including Show Cases button) together in one Flexbox container so they wrap as necessary: not constrained to two rows regardless of browser width. In the CodePen below, I have introduced an outer Flexbox container to include the "Information" panel. This too has flex-direction: row by default. I was hoping to arrange that the controls wrap within their Flexbox container before the information panel wraps below the controls, but this does not happen. From this on StackOverflow, there does not seem to be a satisfactory solution, although I think @media could be used but that would be starting to bodge things. I note that your "Information" panel, which looks like a table, is not responsive.
Thanks. I will give it a try.
Yeah, that’s how jQWidget library works.
If you change the flex properties they will e.g.
.controls {
/* flex: 0 1 auto;*/
flex:1 0 0;
etc...
That wraps much better unless I misunderstood 
Thanks Paul. Yes, that wraps better but on a wide browser window a wide gap can appear between the Show Cases button and the "Information" panel. A value of max-width on the controls element could sort that out.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.