I am developing an app with jquery-mobile. (yes, and app, it'll run within cordova(aka phone gap))
On the nexus 7 (the target device for the app), The font displays for many things are way too small. I can barely read it and I'm young. Many of the users of this app will have poor eyesight.
Is there any simple way to change the font-size with jquery-mobile?
When I try to add entries in a custom css file, there are unexpected results (Formatting goes out, etc) I have also tried theme-roller, but that only allows you to change the font-family, not the font-size.
eg:
body p {
font-size: 1.5em;
}
Even just a general explanation about how to write a css file for jquery-mobile would be very helpful.
OK, I've worked it out.
In the jquery-mobile-1.2.0.css file is the styling for query-mobile. You modify this stuff.
There's some cryptic info on the jquery-mobile website that will make sense once you've read this.
So, to change the font-size for within all you go to the jquery-mobile-1.2.0.css file and add:
.ui-li p {
font-size: 1.5em;
}
It seams that most of the jquery-mobile elements have .ui- in from of their normal html tags. They have a special class or something. (If anyone wants to elaborate on this it'd be great.)
Setting global <body>'s font-size should be enough:
body {
font-size: 15px; // You can even use !important
}
Related
i understand v-cloak is used to display nothing when a new page is loaded.
in my rails app, when i try to switch page (i am using vue component in Rails View), there is a short glimpse of Vuejs codes displaying curly braces before another new page is load. i am entirely baffled and not sure if this is turbolink related as there is no error message found in browser console, or in the rails git logs.
this short glimpse of Vuejs displaying curly braces before another page is loaded, is really annoying, can anyone help on this?
v-cloak is used to do this.
official APIļ¼
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
tips: written [v-cloak] in #import loaded css file can't work for this problem.
another way: around target tags.
Apart from using [v-cloak] which is a generic way of completely hiding an element until Vue inits, two more usable "tools" are v-text and v-html directives, coupled with computed properties delivering the strings the above directives expect from more complex logic.
Not only do they hide the content until init time, but they can also serve as selectors for the unparsed template elements, as they get removed from the element once Vue parses it. So you could apply backgrounds, width, min-heightto those elements, without the need to spiff your layout with preload classes and remove them on mounted().
An important note here is that transitions won't work on those elements, because Vue purposefully rebuilds the entire DOM of the template once it mounts. If it didn't, enter animations wouldn't work as expected. So there can be no transition from h2[v-text] to h2, because the element is completely replaced. But you can take that into account and start your enter transition from how the [v-text] element was styled.
It's probably not the solution you're looking for (it's more designer's work than programmer's, really) and it's definitely not a magical one liner: it has to be solved on a page by page basis.
But this is how pre-loaders are done (the technique is the same in any modern FE framework, it's just that sometimes you need to spiff your markup with preload classes and remove them on mounted, ngAfterViewInit or componentDidMount).
To be able to style this at your own pace, simply disable JavaScript (or don't init Vue, if you prefer) so you set every detail right. But don't overdo it.
Here's a basic example showing you don't need a whole lot of detail to get a decent effect. It's a matter of roughly matching element heights and coding in some striped CSS backgrounds, really (throw in a blur filter, if you want to get really fancy):
Vue.config.productionTip = false;
Vue.config.devtools = false;
setTimeout(() => {
new Vue({
el: '#app',
data: () => ({
Message: 'Message',
Description: `<p>I'm baby tousled echo park pabst polaroid synth marfa. Migas small batch paleo pop-up street art, chia sriracha cronut ramps succulents portland. YOLO normcore taiyaki organic. Green juice helvetica single-origin coffee polaroid swag selvage schlitz. Artisan la croix unicorn cardigan meh everyday carry wolf thundercats.
<p>Iceland hoodie vice, chicharrones gentrify dreamcatcher ethical jianbing blog truffaut pinterest VHS flannel selfies bushwick. Flannel activated charcoal bespoke master cleanse, chambray tumblr four loko helvetica chicharrones ugh aesthetic irony godard. Beard farm-to-table mumblecore wolf typewriter try-hard shoreditch church-key scenester tousled letterpress yuccie bitters. Selfies +1 man bun, jianbing hell of tote bag crucifix flexitarian. Cronut mumblecore knausgaard meditation authentic lumbersexual listicle pok pok coloring book pitchfork gentrify. +1 offal cronut, flexitarian glossier shoreditch biodiesel stumptown tumeric seitan polaroid.
<p>Narwhal williamsburg adaptogen, four dollar toast retro chillwave occupy kombucha YOLO marfa franzen kogi biodiesel street art next level. Viral blog taxidermy twee echo park roof party. Hammock street art tumeric selvage sartorial. Paleo hashtag activated charcoal, heirloom quinoa cred blog ethical.`
})
})
}, 1000)
#app h2[v-text] {
width: 200px;
background-color: #f8f8f8;
height: 1em;
}
#app div[v-html] {
min-height: 250px;
background-image: repeating-linear-gradient(
180deg,
#fff,
#fff 10px,
#f5f5f5 10px,
#f5f5f5 20px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2 v-text="Message"></h2>
<div v-html="Description"></div>
</div>
When applying this technique, do not use images, as they require loading as well. Work with CSS only and make sure that CSS is available in <header> (or at least before the app element). Last, but not least, keep in mind your preload has to match your app at all screen widths.
I know this question has been asked (Change color of mat-spinner) but I was wondering if there's been a solution to not using the deprecated ::ng-deep?
In addition, I've also tried the method suggested in the link but that doesn't work:
HTML
<mat-progress-spinner *ngIf="pending" mode="indeterminate" class="mat-spinner-color"></mat-progress-spinner>
SCSS
.mat-spinner-color::ng-deep circle{
stroke: #FFFFFF !important;
}
Thanks in advance!
::ng-deep is not officially deprecated and is contingent upon browsers removing support for it, per angular.io, until then, meaning is officially deprecated by the browsers, it should be preferred over /deep/ and >>> for broader compatibility.
As such we plan to drop support in Angular (for all 3 of /deep/, >>>
and ::ng-deep). Until then ::ng-deep should be preferred for a broader
compatibility with the tools.
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
If your preference is to avoid ::ng-deep you will need to apply your modifications for the mat-spinner to the root styles.css in your project
in styles.css
.orange-spinner circle{
stroke:orange !important;
}
add class
<mat-spinner class="orange-spinner"></mat-spinner>
Stackblitz
https://stackblitz.com/edit/angular-czd4zq?embed=1&file=styles.css
Please note:
Per UmutEsen comment below, the correct solution is to setup a theme and leverage the color input on the mat-spinner.
https://material.angular.io/guide/theming
I have a custom font in my app/assets/fontsfolder but on production, the font is loading slowly leaving buttons blank before the font renders like this:
and then after 3 seconds, this:
What is going on? What can I do?
my css looks like this:
#font-face {
font-family: 'Reckless-Medium';
src: font-url('Reckless-Medium.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
$reckless-medium: 'Reckless-Medium';
and this:
.btn {
display: inline-block;
font-size: 15px;
font-family: $reckless-medium;
Why does rails make a get request to get the font?
Started GET "/assets/Reckless-Medium.otf" for 127.0.0.1 at 2018-10-19 00:53:29 -0400
Is the font located on another server?
Why do rails make a GET request to get the font?
Because you tell it does so. font-url('Reckless-Medium.otf') eventually commands client's browser to download the font from your webserver.
Is the font located on another server?
Not sure. As I see the font you use is custom. I found it on https://befonts.com/reckless-font.html . For fast loading, it could be uploaded on some CDN servers, of Google or CloudFlare for example, and hardlinked to be downloaded from there. But it's too new, so it's doubtful the font is popular enough CDN majors accepted it to their warehouses.
To make fonts (and all static content) to load faster you can move your static files to some CDN service. For example, check https://www.cloudflare.com/ as an option.
I am trying to debug a crashing application in Microsoft Edge, but it gives the friendly error page:
This page is having a problem loading
We tried to load this page for you a few times, but there is still a problem with this site. We know you have better things to do than to watch this page reload over and over again so try coming back to this page later.
In internet explorer there is a way to turn off the friendly error messages. Is this also possible in Microsoft Edge? I'd like to know on which line of code the problem occurs.
It seems there are none at the moment. You can use the F12 developer tools for debugging though. The friendly page includes the actual HTTP response code so you can have an idea. Also, if you require more details you can check the full details on the request/response using the F12 Network tool to get the data the server is responding with.
You are probably affected by this unclosed bug.
No easy way to fix it right now, the not friendly error message will probably not help much (as you are not getting a server side HTTP error, is just the browser that raise an error and truncate the communication).
On the other hand the developer tool will not help also: Edge "smartly" close automatically it when the error happens and if you reopen the history is empty (no way to keep it, tried all of the buttons).
I have this issue on a site I'm developing but I'm not able to understand what's happen.
EDIT - after a long time I fixed this issue in my environment. Unluckily I'm pretty sure this will not help too much other devs because the bug seems to happen for a lot of different reason, but still... that's my usecase.
What was freezing my site was a combination of CSS media-queries (follow the less used):
#media (min-width:calc(#screen-mobile-size + 1px)) {
.hero_mobile {
display: none;
}
.hero_desktop {
display: inline;
}
}
...and few lines below...
#media (max-width: #screen-mobile-size) {
height: auto;
max-height: 600px;
.hero_mobile {
display: inline;
}
.hero_desktop {
display: none;
}
}
I tested a lot of combination but there's only one rule: I can't provide both media queries, it doesn't matter what there's inside them! It simply break the browser.
In my case the fix was quite easy: just preventing the first CSS rule to be embedded inside a media query, so...
.hero_mobile {
display: none;
}
.hero_desktop {
display: inline;
}
// ...
#media (max-width: #screen-mobile-size) {
height: auto;
max-height: 600px;
.hero_mobile {
display: inline;
}
.hero_desktop {
display: none;
}
}
When you see that, try hitting F12 and in debugger tab, setting break-on-all-errors. When you refresh, the last one it breaks on before the page reloads for some odd reason and triggers that error page, is likely the thing triggering some obscure bug.
You will likely find that Edge doesn't handle jQuery("someselector:visible") and refreshes, yet it does work with jQuery("someselector").filter(":visible"), but that's likely just an obscure bug in old jQuery 1.x.
In my Ruby (1.9.2) Rails (3.0.x) I would like to render a web page as PDF using wicked_pdf, and I would like to control where the page breaks are. My CSS code to control page breaks is as follows:
<style>
#media print
{
h1 {page-break-before:always}
}
</style>
However, when I render the page with wicked_pdf, it does not separate the document into two pages. Is there something else that I must do to get page breaks with wicked_pdf?
For some reason, the "#media print" didn't quite do it. I just went with
.page-break { display:block; clear:both; page-break-after:always; }
for the CSS rule, and then I stuck the following in my page for a page break:
<div class="page-break"></div>
That just worked.
Tried Jay's solution but could not get it to work (maybe a conflict with other css)
I got it to work with this:
<p style='page-break-after:always;'></p>
I had the same problem and I discovered something that might help. This was my page break CSS code:
.page-break {
display: block;
clear: both;
page-break-after: always;
}
This didn't work because of TWO reasons:
I. In one of the SASS imported file I had this line of code:
html, body
overflow-x: hidden !important
II. The other problem was bootstrap
#import "bootstrap"
It looks like because of the float: left in:
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
the page break is no longer working. So, just add this after you import bootstrap.
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: initial !important;
}
None of these solutions worked for me. I did find a solution that worked for many people in the gem issues here - https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1524
you want to add CSS on the element that needs the page break. In my case, it was table rows, so I added:
tr {
page-break-inside: avoid;
}
Make sure that the stylesheet link tag includes media='print" or media='all' if you are using an external stylesheet:
<%= stylesheet_link_tag 'retailers_pdf',media: 'all' %>
or
<%= stylesheet_link_tag 'retailers_pdf',media: 'print' %>
otherwise wicked_pdf will not pick it up.
Also note that if you are in the middle of a table or div with a border, that the page-break attributes will not work. In this case, it's time to break out jQuery and start splitting things up. This answer: https://stackoverflow.com/a/13394466/2016616 has a good snippet for position measurement. I am working on clean and repeatable table-splitting code and will post it when I have finished it.
i had the same issue and what ended up working for me was to make sure that my element with
page-break: always;
was on the root of the document, seems when its nested inside of other elements, especially ones with height assigned, the declaration gets ignored.
hope this helps someone.