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.
Related
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'}}
I have a site.css and something similar to mobile.css.
What I am building is a webpage where you can preview the app you've made. Imagine it like a site devided in half where one half has a panel with controls while the other one has the preview (div), curently designed as a mobile phone.
So what I am actually doing is a mobile phone on my site (preview), but the problem is that I dont know how to use the mobile.css file in the preview div only.
Is there a way to import a CSS file for one div (and its children)?
A simplified look of my page: https://jsfiddle.net/kc8rgde2/1/
<iframe>, <style scoped> or external CSS preprocesors are not an option.
EDIT:
I kinda decided to go with SASS as it was the easiest to understand and Visual Studio had a nice extension for it.
Thank you for all the help.
I had an idea. It could work, and it needs a lot of testing.Check this fiddle ->
https://jsfiddle.net/kc8rgde2/2/
Basically, as you can see, in the fiddle there's no bootstrap loaded.
I load bootstrap, and access the file using the CDN link from an AJAX request.
The response of the ajax, is the content of the bootstrap css file (minified version) - (check the console!)
What i do after, is replacing all the classes (dots) with ("#phonePreview .") and this prepends the phone preview div id to all the classes.
$(document).ready(function() {
$.when($.get("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"))
.done(function(response) {
var res = response.replace(/\./g,'#phonePreview .')
console.debug (res);
$('<style />').text(res).appendTo($('body'))
});
})
Prepending the parent id means that the classes are applied only to #phonePreview children.
It's just a starting point, but with some work it could work!
If you want to use styles specifically for devices under a certain size you could use media queries:
#media only screen and (max-width: 431px) {
.myDiv {
style: style;
style: style;
}
#div2 {
style: style;
style: style;
}
}
max-width: 431px means devices that are 431px or lower in width. You could also use height and change it to min-width.
I cannot seem to get my jQuery Mobile styles to apply to my dynamically filled select. I have tried adding themes, adding the styles manually, refreshing, $('.ui-page-active').trigger('create'); etc. with no luck. The select:
<select id="CandidatesListBox" data-placeholder="true" onchange="myMethod()" style="width: 100%" aria-haspopup="true" class="candidatesList" data-theme="c" ></select>
To fill it:
var geocodeOption = document.createElement('option');
//fill option
if (_isMobile) {
$('#' + geocodesList.id).append(geocodeOption);
$('select#CandidatesListBox').selectmenu();
$('select#CandidatesListBox').selectmenu('refresh', true);
}
The select dropdown itself has the correct styles, but nothing else does. If I add
geocodeOption.className = geocodeOption.className + ' ui-btn'; the select just looks like a select and a button, and again the options contain no styling.
I also tried to read the jQuery forms link 1 and link 2 with no luck. I am using jQuery Mobile 1.4.2.
This is not actually an issue. I was unable to style the options, because in general, options cannot be styled. That was not a problem though because the Android OS handled the option styles. I was unable to see this because Google Canary did not render the Android option styles, but instead rendered the Windows option styles.
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>
Im using an icon-sheet with all my icons in it, and now referencing them in my CSS.
Each icon is 32*32 and is in a grid like this :
AA BB CC DD ...
A1 B1 C1 D1 ......
A2 B2 C2 D2 .......
UU XX YY ZZ ......
etc.
Where AA = icon, A1=hover, A2=active.
It works ok, in the CSS right now its like this :
.icon {
height:32px;
width:32px;
background-image:url('/img/slbuttons.png');
}
.AAicon {background-position:0px 0px;}
.BBicon {background-position:-32px 0px;}
.CCicon {background-position:-64px 0px;}
etc...
What im looking for is somehow to make it abit more simple, the icons doesnt change in size (32*32) so instead of manually writing each of the different icons, i just want to reference that ex. :
AAIcon = x0,y0, BBIcon = x1,y0, CCIcon=x2,y0
A1Icon = x0,y1, etc. etc.
instead of i have to sit and write each 32,64,96,128, etc myself - wasnt it possible to make a (xpos=gridcount*32, ypos=gridcount*32) ?
Reason why i want this is i just changed my icon-pack size and then i have to rewrite ALL those values again, and each block icon/hover/active are actually the same except for the coordinates, would be a big help if i could just have a global varialbe that defines the size and then thats used automatically to adjust the positioning later on.
Dont know if i can that in CSS, maybe thats CSS3 or ?
Im not an expert at all in CSS or WEB development so its probably an easy one.
In pure CSS, no you cannot do math. It is strictly a styling language. There are a few options when it comes to dynamically styling your page.
You can use SASS and LESS, which are their own languages, run through a processor (SASS uses Ruby, LESS uses JavaScript) to generate the stylesheet.
The second option would be to use JavaScript, and for a beginner, jQuery would probably be the easiest option. Once you have included the jQuery source using something like <script src="js/jquery.js"></script> (or alternatively the Google CDN), you are free to utilize the jQuery library in addition to standard JavaScript.
A short snippet to get the height of an image:
<script>
var imgHeight = $('.icon').height(); //remove the height and width from your CSS first!
var imgWidth = $('.icon').width();
</script>
You can then use jQuery to manipulate the CSS dynamically based on the height of the background image:
<script>
var iconA = $('.AAIcon');
iconA.css('background-position','imgHeight');
</script>
jQuery
Yes you can! By using a css preprocessor you can do math, variables and so much more. The two popular ones are SASS and LESS. SASS is gaining a lot of traction and is what I use. Here is a great rundown of it.
http://css-tricks.com/video-screencasts/88-intro-to-compass-sass/
With a css preprocessor you can do exactly what you are talking about. Good luck! And enjoy easier css!