Objective:
To create two divs, side-by-side on a page. Together they should cover 100% of the page. using latest versions of react + MUI.
div on the left should have a fixed width (say 200px).
div on the right should cover the rest of the page.
In CSS, one could use calc(100% - 200px) to dynamically compute the width of div on the right.
Issue Faced:
I couldn't use that in MUI. I tried inline styling ( style={{width='calc(100%-200)'}}), which compiles but doesn't work. I also tried makeStyles(), but with no avail.
I deeply appreciate the community's help in this matter.
For anyone curious about how to write this using makeStyles():
const useStyles = makeStyles({
width: 'calc(100% - 200px)'
});
Or if the pixel amount is dynamically generated in the javascript layer:
const elWidth = getMyElementWidth(); // returns '200'
const useStyles = makeStyles({
width: `calc(100% - ${elWidth}px)`
});
The main issue, as dlewiski's answer points out, is the need to include spaces around the operator and to include the px unit.
I've often made the "forgetting to include spaces around the operator inside calc()" mistake.
I just want to point out that the key issues I see is no spaces between the '-' and no 'px' after 200.
So you have style={{width='calc(100%-200)'}}
Should be style={{width='calc(100% - 200px)'}}
I realize this is already shown in the original answer but I thought some more clarification on the specifics of the issue would help.
If your code doesn't work anymore in MUI v5, check if you're using theme.spacing() because there is a breaking change in the newer version. From the migration guide:
theme.spacing now returns single values with px units by default.
Correct code in:
V5
width: `calc(100vw - ${theme.spacing(3)})`
V4
width: `calc(100vw - ${theme.spacing(3)}px)`
Live Demo
since style is an object you can't use =.
the right way to do it:
style={{width: 'calc(100% - 200px)'}}
if not applied, try
style={{width: 'calc(100% - 200px) !important'}}
Related
In Tailwind Officail docs, there are lots of width utilities we can use.
However, the maximum fixed width I can specify is w-96, which is width: 24rem; (384px)
I've noticed a weird class called w-px, at first glance, I thought I can do w-600px, but it's not working, it is exactly 1px.
I am currently migrating my old project to Tailwind CSS, so there are going to have lots of weird widths I need to specify, but Tailwind CSS doesn't provide them by default.
If I can just do w-600px would be nice, or am I missing any other better approach?
If you configure your Tailwind install to run in just-in-time mode, and you are running tailwind 2.1+, you can use their arbitrary value support. https://tailwindcss.com/docs/just-in-time-mode
For example, I needed a width of 600px, here is how I specified it:
h-[600px]
Can you please check the below code? Hope it will work for you.
#1 You need to add the below code in tailwind.config.js
module.exports = {
theme: {
extend: {
width: {
'600': '600px',
}
}
}
}
#2 After that you can use w-600 in your HTML file like below.
<div class="w-600">...</div>
You were just missing the brackets [ ]. Try this:
w-[600px]
Take a look on the section "Arbitrary values" that most part of Tailwind classes have. There you can see how you can set any value you want.
Arbitrary values for with https://tailwindcss.com/docs/width#arbitrary-values
If you need to use a one-off width value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
<div class="w-[600px]">
<!-- ... -->
</div>
I am working on an Angular project. I have this table, which I build but I don't know in advance how big the font should be. Because of that i created this function (this is the code i have inside of it):
$('.td').css({
'font-size': Number(this.f) + 'px'
});
//Mobile
$('.mobileTdLong').css({
'width': Number(this.f) + 150 + 'px'
});
$('.mobileTdShort').css({
'width': Number(this.f) + 40 + 'px'
});
//Desktop
$('.tableDesktopShort').css({
'width': Number(this.f) + 100 + 'px'
});
NOTE: f is a variable from user input.
The code I have written isn't the best one for my problem because it doesn't permenantly change my table font.. It just flickers (from 20px which is set by default in .css file, to this.f value). The reason I need this is because every 10 seconds the table values are refreshed.
I hope I provided enough information.
Thanks
You should get rid of everything that is jquery related. It does not belong in an Angular solution
And then you should handle the styling with CSS media queries
AngularJS 1.7 or Angular 6.0?
instead of a jquery lite selector, you can try inline styles :
<table [ngStyle]="getStylesTableOnMobileView()">
...
</table>
you can also do same with ngClass.
You shouldn't use jQuery in Angular. If you need to dinamically change classes of html elements I recommend you to use [(ngClass)] or media queries.
This seems to be some css issue and some guru would know how to fix right away.
I am using https://github.com/kekeh/mydatepicker which works as i require except i need to make some layout changes to the input box.
i am able to see desired changes if i do that in the chrome browser via developer tools but not able to get them working by applying the css.
so if you take a look at the screenshot:
https://www.dropbox.com/s/2dhri8ylss3pfgd/Screenshot%202017-09-30%2018.27.41.png?dl=0
i need to set the height to 25px rather 34px.
try to override class like .selectiongroup etc. doesnt help
you should use the height attribute to override input height.
private myOptions: IMyDpOptions = {
firstDayOfWeek: 'su',
editableDateField: false,
openSelectorOnInputClick: true,
height: '25px'
};
<my-date-picker [options]="myOptions" [(ngModel)]="XYZ" (dateChanged)="XYZ($event)"></my-date-picker>
Can anyone tell me how to tell Github, that I want to see code reviews on Pull Requests in full screen width. Code lines are often longer than the area provided by Github and there is a lot of unused screen real estate.
Is there a setting in Github or a Chrome extension or Tamper Monkey or something like that.
Use Stylebot chrome extension
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en
I use my own style for my favourite websites, I love it.
Plus point is that you can use the styles created by other peoples also. Someone might have already done the things you need there. Or else you can modify on your own.
I have few CSS rules for you,
.repository-with-sidebar .repository-content {
width: calc(100% - 50px);
}
.container {
width: 90%;
}
Github's CSS has changed, so the new styles should be:
.container-lg {
max-width: inherit;
}
You can create a shortcut in your browser to automatically apply this style:
javascript:(function(){var a=document.getElementsByClassName("container-lg")[0];a.style.max-width="inherit";})();
There's a class on the body called full-width for that, so all that's needed currently is:
document.body.classList.add('full-width');
This can also be added as a bookmarklet:
javascript:(function(){document.body.classList.add('full-width');})();
Don't know why the OP said it's not a problem anymore, if you're doing a code review of your own work you won't be comparing it against another in side-by-side view.
Fix for full screen:
Inspect element on the white space to the left of the code
You'll be brought to a tag, expand this
Click on the 3rd div child of 'main'
Scroll down through the css on the right hand side until you find ".container-xl"
Untick this and you'll get the code full screen
If you want to you can write a console script or use one of the plugins mentions above but I find this method the simplest to remember and apply on anyones machine.
This is no longer an issue after GitHub introduced side-by-side code review. That really works well.
I would like to dynamically generate textareas, with JQuery Mobile, with varying numbers of rows. I was intending on using knockout for this, data-bind to the rows attribute.
E.g. here: http://jsfiddle.net/j7b9A/2/
<label for="textarea-1">5 rows:</label>
<textarea rows="5" name="textarea-1" id="textarea-1"></textarea>
<label for="textarea-2">10 rows:</label>
<textarea rows="10" name="textarea-2" id="textarea-2"></textarea>
However, JQuery Mobile seems to ignore the rows attribute, which is well-documented: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea, and is even included in JQuery Mobile's own documentation: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/textinputs/index.html#Textarea.
A comment here states that setting the height and width overrides the rows attribute: https://stackoverflow.com/a/7194692/1061602. It seems that it is because JQuery Mobile is doing a transition when the textarea expands. So is rows attribute always being completely overridden?
Another similar question is here: How to make text area to be height of 10 rows fixed?, but this doesn't help me as I don't want to fix the height of all textareas, I would like them to vary, as they can normally using the rows attribute.
Also what I have noticed, which I can't explain, is that in my own code, a rogue style="height: 184px;" is added to one of my textareas, but not another. The other just uses the standard style of 50px, as highlighted in this answer: jQuery Mobile and textarea rows - this would seem to indicate there is something else going on, but I can't reproduce this yet in a simple fiddle.
I've had a quick look at the JQuery Mobile source but I can't see the rows attribute being used at all?
What would be the best way of specifying a range of row heights for a range of bound JQuery Mobile textareas?
all you need is... add this
textarea.ui-input-text { height: inherit !important}
jQM enhances textarea by adding different classes for responsiveness and styling purposes. The fastest and easiest way to maintain rows height is by overriding jQM class.
Demo
CSS solution:
.custom_class {
height: auto !important; /* !important is used to force override. */
}
JS solution - set height after textarea is enhanced.
setTimeout(function () {
$('textarea').css({
'height': 'auto'
});
}, 0);
JQuery Mobile is intended to be responsive, so by design it's not going to take up space until you need it. If you add data to the textarea, either via input or via code, you can see that it grows as needed.
If you want to override that size when it's empty, you have two options:
Use the method Omar mentioned, which is to turn off the JQM role, as you did in the JSFiddle example.
The other is to override the default class, as seen in this answer.
I had the same problem and I finally found a solution. you can set ' data-autogrow="false" ' in textarea element, after that you can set rows attribute or height in css. it does works in jquery mobile 1.4.0+
Text area content auto scroll when more lines. max-height as you wish.
Add css
textarea.size{max-height:30px;}
<textarea name="textarea-1" id="textarea-1" style="max-height:30px;">
You can use this : data-autogrow="false"
like this :
<textarea rows="10" name="textarea-2" id="textarea-2" data-autogrow="false"></textarea>