I have responsive dashboard build with Material Ui Grid elements.
And one of the grid items wrapped in div element which breaks the layout.
Here is playground with div element - https://codesandbox.io/s/basicgrid-material-demo-forked-pkkil?file=/demo.js
Here is playground without div element, and this how it should be with div - https://codesandbox.io/s/b1wsf?file=/demo.js
div element cannot be replaced or removed...
Any suggestions?
Mui Grid component is designed the way that Grid container should always be parent of Grid item prop. Grid container is cloning Grid item and passing to it additional configuration it is not based on react context.
Only sane way to get this working is to remove div.
Or provide custom css styles to this to emulate grid spacing.
Related
I am creating a grid (so something with rows and columns with buttons in the cells) and a slider that should alter the number of columns.
The number of rows is virtually unlimited and, since the grid layout in bootstrap is implemented with a flexbox i should either swap column classes or redraw everything every onchange event.
is there another way in bootstrap or do i need to create a grid layout from scratch and alter the column layout each time?
i managed to do that by adding a counter of elements inside a row and whenever i reach the desired element number i append a new row and start adding elements to the last row
like so
if(indexofrow%element.getColNumber()==0){
indexofrow++;
document.getElementById("canvas").insertAdjacentHTML("beforeend","<div class='row flex-nowrap'/></div>");
drawSingleButton(i,element,arrayOfLayers);
}else{
drawSingleButton(i,element,arrayOfLayers);
indexofrow++;
}
it's probably a cheap workaround but for my case it works
I'm using this library https://github.com/bogoslavskiy/react-native-tabs-section-list
I want to put the components in the same screen above that tabs-section-list component when I pass property ListHeaderComponent={aboveMyListComps}
The component aboveMyListComps is being placed between the tabs and the section list.
I have already tried wrapping the whole screen inside a scroll view as a result either my tabs header scroll away from the screen, or when I try to use stickyHeaderIndices property of the tabs-section-list doesn't scroll.
example of the issue
In this example I want my text 'TEST' to be above the header tabs list
I am using bootstrap 4.0.0 collapse to hide and reveal a bootstrap "row". The row contains four columns - "col-md-3" - of buttons. This row is laying out just as I want it too until I add the "collapse" class, which then causes all the cols inside the row to stack like block elements.
Is this a known thing, that you can't put a row, or complex elements to be collapsed?
Below are two screenshots of before and after - with the element html visible on the :Before
After:bad
well the col-- css is a flexible container, that has padding and margin settings that change with screen size. There will be some elements that will be blank depending on screen size. When I build a menu I use fixed elements inside the collapse using ul and li tags like you would a nav bar. I have used the navbar code, then override colors inline by setting style attributes in the html tag. Also, you can dynamically insert display:none in an element via jquery or java might give you a better effect (which I use from time to time instead of the collapse routine bootstrap has set up.. ). You can also play with inserting offset-md-* class in if you just need to offset a div container. But I use that for centering a responsive div like a login screen.
I have hbox layout, where in the left it shows tree and on the right
it shows tabs.
But the problem is I should not use hbox, but I should use border
layout.
When I use two column layout code is breaking.
Providing my code with hbox layout.
Can you guys tell me how to make the below code work in border
layout.
https://docs.sencha.com/extjs/4.1.3/#!/api/Ext.layout.container.Border
I am trying to change border in the below part of code
var createTreeAndContentPanel = function(tree) {
var retval,
contentPanel;
According to docs, if you are using a "Border" layout, at least one of the child panel has to use region : "center".
So you need to apply region : center on your panel containing tabs, and region : west to your panel containing tree.
Finally you need to add these 2 panels inside a parent panel with a layout: border
From doc :
Any Container using the Border layout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.
I'm building a jQuery based tree menu using jQuery sortable(). Here is my current code: http://jsfiddle.net/8KDur/.
As you see, the sortable function works fine.
But, the ui-behavior while dragging a tree li-item over the other tree items doesn't work the way I wish too. I want the li-items to stay still and the border between them highlight while dragging. Indicating between which items it will be placed.
So, how do I get the items to stay still while dragging?
I'd rather not use plugins for this.
You can use the placeholder option to specify a CSS class to use as the border between the items. Then, set helper to 'clone' which will create a duplicate of the list item you are dragging. By default, jQuery UI will hide the helper using an in-line display: none, so it may be necessary to override that if you want the list item to remain visible and static.
http://jsfiddle.net/8KDur/33/