Cards come with margin-right - javascript

I'm trying to display three cards in a grid. The media of the card has a max-width of 345px but because of that the card gets a lot of margin-right. Styling doesn't look good in a grid. Anyone know how I can get rid of the margin?
I have an example made in sandbox: https://codesandbox.io/s/6451nx4ypr

The issue is with the grid. The Card has max size, but the grid is larger. This leave some extra space. If you look in the debugger, there is no margin to change.
You can try the following:
const styles = {
card: {
maxWidth: 345
},
gridFour: {
maxWidth: 345
},
media: {
// ⚠️ object-fit is not supported by IE11.
objectFit: "cover",
}
};
And in the change the grid class to:
<Grid item sm={4} className={classes.gridFour}>
Sandbox: https://codesandbox.io/embed/k3k2m35mz5
You can also center the cards in the Grid:
const styles = {
card: {
maxWidth: 345,
margin: 'auto'
},
gridFour: {
align: 'center'
},
media: {
// ⚠️ object-fit is not supported by IE11.
objectFit: "cover"
}
};

I don't know if it works differently in React, but in Angular, I just apply classes to whatever it is I need to restyle and it seems to take.
If you have the objects in another container of some kind, make sure it doesn't apply some margin/space (like a flex container or something). Apply something to the container items to strip away any of that.
Simple example, this strips away all padding and margins and has the predictable effect on the backgrounds (I just tried it in a project, it works as expected):
mat-card {
margin: 0;
padding: 0px;
background-color: grey;
}
mat-card-content {
margin: 0;
padding: 0px;
background-color: red;
}

If you are familiar with bootstrap, there is this feature called grid offsets. Unfortunately, this is still not a feature to material-ui.
So, what you can do is remove the max-width on your cards. Then add an empty Grid to the sides to create an offset.

If you are expecting the width to be defined and should fluid on the screen when the screen width increased is as showed in this codepen link.
And this will have default width as 4 and doesn't have custom style to define a width to considered as responsive width.

Related

How to make react-chartjs-2 responsive on mobile?

I am using react-chartjs-2 in a project of mine and I cannot find the problem of the chart, because on mobile all the labels and legend are still big af. I tried responsive: true, maintainAspectRation: true. Nothing works
I've made you a demo page of how I've made my charjs responsive.
Basically you need to give the <canvas> element height:100% and pass these options:
options: {
maintainAspectRatio : false
}
Do not use responsive: true at all, it doesn't seem to do anything.
If you'r <canvas> is inside some container, I would suggest making that container responsive (with flexbox for example).
I also had the same problem on my nextjs app. My Bar Chart was not rendering properly on mobile viewport. I perused the main ChartJS docs on responsiveness and there's a part they talk about resizing the chart canvas when its container resizes. In my case, the container is just a div. Hence In order to fix the issue on mobile viewport, I set my div to be relatively positioned and also set view width and height but it messes up chartjs rendering on desktop screens
hence I had a CSS style that resets my height and width to auto on screens greater than 767px. Also, I set option maintainAspectRatio : false as per the chartJS docs.
#canvas-container {
height: 60vh;
width: 60vw;
position: relative;
}
#media (min-width: 768px) {
#canvas-container {
height: auto;
width: auto;
}
}
<div id="canvas-container">
<Bar options={options} data={data}/>
</div>
Do not forget to set option maintainAspectRatio : false
You can check out the main example from ChartJS Docs here. Hope this helps :)

ExtJS inline width causing a width bug in firefox

We are using ExtJS 4.1.2 to create a panel with a toolbar docked on the top. We have overridden much of the styling to achieve the look and feel we wanted. Despite our best efforts to align and tweak, we are experiencing a strange issue in Firefox where the page on which this panel appears gets a default width of 20000px. I believe the element at fault is some internal component that ExtJS creates with a single class of "x-box-inner". In the dom browser view I can see
<div id="mylist" class="x-panel listpanel x-panel-default">
<div id="toolBar###(ExtJSid)" class="x-toolbar-docked-top x-toolbarhttp://i.stack.imgur.com/ddvdF.png x-toolbar-default x-docked x-docked-top ..." style="width: 735px;..." ...>
<div id="anotherXtJSid" class="x-box-inner " style="width: 735px; ..." ...>
<div id="anotherExtJSid" style="width:20000;..." (no class)>
...
If I hover over the element, I see
If, in the browser DOM explorer I edit that 20000px width to "auto" then the firefox window scrollbar disappears, and the display is the right size.
I attempted to fix the problem with an overridden width to "width:auto" for divs at that level and below, in the scss that defines the panel:
...
.listpanel {
overflow: visible;
background: none;
border: none;
...
.x-toolbar-docked-top {
overflow: visible;
.x-box-inner + div { // added + div
overflow: visible;
width: auto; // added width here.
}
}
...
}
This class is used when creating the ExtJS panel:
Ext.define('List', {
extend: 'Ext.panel.Panel',
alias: 'widget.mylist',
... // no width defined. It messes up all components within panel.
height: 750,
frame: false,
cls: 'listpanel',
bubbleEvents: [
...
],
...
initComponent: function () {
this.callParent(arguments);
this.add({
xtype: 'listbody',
ownerCt: this,
...
},
...
The width:auto and + div on x-box-inner appears to fix the width, although I can still see the ExtJS element with width:20000pxin the DOM inspector. BUT, seemingly arbitrarily, this breaks the overfow: visible -- one of the panel's toolbar dropdown-popups now disappears beneath the panel when the user clicks the dropdown button.
Is there some (other) way to force the width of this mystery ExtJS element?
So, with further experimentation and some suggestions from my colleague the answer lay in
Using width: 100% instead of width: auto
Using > instead of + to affect all children for width
Making another rule for x-box-inner without the > div just for controlling the overflow: visible.
Making the rules !important so they aren't overridden by other styles.
The style sheet stayed the same, but with the following x-box-inner rule changes:
...
.x-box-inner > div {
width: 100% !important;
}
x.box-inner {
overflow: visible !important;
}
...

Apply custom css to sapui5 tile

I have created dynamic tiles for my SAPUI5 application, the tiles on this page need to be resized so I added a custom css style class.
.administrationTile {
width: 18rem;
height: 14rem;
}
Which I apply like this:
oTile.addStyleClass('administrationTile');
My problem is that this only adjusts the size of the tile itself, but doesn't change the size of the content in the tile. I previously did it like this in the onAfterRendering part:
setTimeout(function(){
for (var i = 1; i < 8; i++)
{
$("#MyTileContainer-"+i+".sapMTile").css({
width: "18rem",
height: "14rem"
});
}
$("div.sapMTileContent").css({
width: "18rem",
height: "14rem"
});
$("div.sapMStdTileNumDiv").css("width", "12rem");
}, 200);
Which does work, but it's a very ugly method because it doesn't work at all times and you see the tile changing in size (without timeout it doesn't even work at all)
My question is how can I apply the other classes (sapMTileContent and sapMStdTileNumDiv) that belong to this tile without this ugly workaround.
this only adjusts the size of the tile itself, but doesn't change the size of the content in the tile.
As far as I understand, you are modifying the tile width, but not the contents.
.administrationTile {
width: 18rem;
height: 14rem;
font-size: 4rem; /* <--- */
}
Look at it in this Fiddle
Have you considered this may be a CSS inheritance issue. If you inspect the object and focus on the object you are trying to influence and then look at the CSS styles that are being applied onto this object using Chrome's "Inspect element" right-click option you may want to check if the style is not being over-ridden later in the CSS chain.
(Hope this makes sense?)

Auto re-size container if inner elements too small

I have container, which is re-sizable and contains inner elements <div>, which can be placed in any order and I can add them to container any amount when amount of them rising, the become smaller. My goal is when inner divs height or width, becomes smaller than 100px then automatically re-size container.
There can be more than one element smaller than 100px. When container re-sizes, all elements become bigger depending of percents of their width.
Problem: when there is more than one small element, they send many events to container, I want to send one request to container to re-size if there is possibility that it is enough to make all element enough size.
I tried to watch width, but it sends to many requests.
scope.$watch(function () {
return element.width();
}, function (oldval, newval) {
clearTimeout(containerCtrl.resizedFinished);
containerCtrl.resizedFinished = setTimeout(function () {
console.log("New Value=" + newval);
if (newval < 100)
scope.resizeContainer(element.width());
}, 100);
});
Maybe someone can give me any suggestions?
I use Angular, jquery base module, js.
I think you try to achieve:
draggable components should be minimum of 100px wide
when you drag/drop component into container, all components should shrink, so that they fit inside container
when components cannot get any smaller, container should grow (with 100px for each added component)
Sounds like you could get the styling done with flexbox in css:
.container {
display: inline-flex;
flex-direction: row;
padding: 2px;
min-width: 500px;
height: 120px;
background-color: yellow;
}
.component {
background-color: grey;
flex: 0 1 200px;
min-width: 100px;
height: 50px;
margin: 2px;
}
That way you do not have to do any watching of components through jQuery.
If the components also should have variable height, and container can have multiple rows, things become trickier. Then you need to be more specific about constraints.
EDIT:
If you cannot use flexbox for IE9, then try:
add event listener to component being dropped inside container (not on resize of individual components)
check (read from DOM) how many components are in container
if (container width - (component width * old number of components)) < 100
then shrinking is not allowed, so expand container
else
loop over each component to shrink them

Remaking fixed grid to a responsive grid

I have implemented this fixed grid: http://jsfiddle.net/challenger/UxzCa/1. There are two requirements:
images should fit into a square card div (width/height can be different);
card dimensions shouldn't be fixed.
As for dimensions it is possible to implement using jquery and recalculate widths/heights on window.resize event. Are there alternative ways?
I have a partial solution that takes care of the image aspect-ratio issue and the fixed-width issue.
For the fixed-width of the grid, set the width: auto and this will allow the floats
to wrap to as many lines as required:
.grid-row {
width: auto;
margin: 0 auto;
}
The images need to scale with height if they are portrait (height/width > 1) or width if they are landscape (height/width < 1).
Define the following classes:
.table-cell img.portrait {
height: 100%;
}
.table-cell img.landscape {
width: 100%;
}
and then use the following jQuery method to set the correct class based on the aspect ration of each image:
$('.table-cell').each(function(){
var image = $(this).find('img');
aspectRatio = image.height()/image.width();
if (aspectRatio > 1)
{
image.addClass('portrait');
}
else
{
image.addClass('landscape');
}
});
See Demo Fiddle
Footnote
It may be possible to make the .card elements responsive and maintain their aspect ratio using some CSS techniques similar to the ones presented in the following question:
How do you vertically center absolute positioned text w/o declaring container size and w/o JS?

Categories

Resources