i installed phonegap on xcode and i create a new project. I included jquery mobile in my project but when i start it on the simulator it's not load the css files. When i open the same code in a Browser then it loads the css files of jquery mobile.
Thank you in advance!
The only way I've found to counter this is to include the styles as a <style> tag in the header of all of your HTML pages for the app.
There must be a better way, but I've never gotten linked CSS files to work properly.
Related
I tested a React app design using css and bootstrap in Code Sandbox (online editor).
The problem is, when I copied the files to a real react app in my computer, the page styling is different than what I designed in code Sandbox.
Is there anything missing I have to add to my code?
The style in Sandbox..
The style in my computer browser..
I found the solution.
The problem is when uploading the files from CodeSandBox, the css file has the line,
#import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-
reset/2.0/reset.min.css");
removing it solved my problem.
I am working on a reactJS application that uses ant design for the UI. Recently we released this application to production where the computers are pretty locked down. This application is an intranet application and these computers have no internet access. So, because of that, the ant design icons on the modals were showing up as empty boxes. I did some digging and saw that the icons are using CSS classes.
For example, this is the CSS class for the red error "X" on the error modal:
.anticon-cross-circle:before
{
content:"\E62E"
}
I'm not too familiar with the CSS content attribute so I went to www.w3schools.com and read up on it a bit and tested this particular content value on their Try It page for this attribute and I got the empty box that I got in my production environment.
Does anyone know what needs to be done to import these icons into my project so that they can be used offline?
Thanks
What I think is happening is that Ant Design is defining the CSS font definition with a URL to the corresponding font-file. Since the computers are offline, it cannot find those definitions.
In the documentation I see that they also provide SVG Icons, which should work completely offline. I think this is worth a try. The steps to implement this can be found here and it should be available from version 3.9.0: https://ant.design/components/icon/#SVG-icons
Have you tried downloading the icon library into your project folder?
https://github.com/ant-design/ant-design-icons/tree/master/packages/icons-react. Looks like they have assigned their own codes to their own icons so you'll need to have them offline.
You will nessd the css file tabler-icons.css and the woff file tabler-icons.woff and assign a font-family named tabler-icons within your style.css using #font-face
I have a website that is not responsive. My task is to make it responsive. I didn't have source files, the client requires a CSS and js files that he will add to the website. I am doing it by editing live via chrome developer
I want to know that is there any extension or software which I can use to insert code live into the website.
Thanks
Sadly Nope!
But you can style it in (chrome developer mode mobile view) and paste its media query css in separate file and then send it to them so that he add that style in style sheet at the end. Added screenshot for reference.
https://www.screencast.com/t/vWhqsxVsq
I know that my question has already a huge number of topics, but I think it could be helpful for the community to have a clear answer in one topic.
This is about modifying your CSS while using Mobile Angular UI, with a bootstrap template.
This is how a project is organized with Mobile Angular UI :
bin
bower_components
hooks
node_modules
platforms
plugins
src
www
I have my index.html in src/html/ and my other webpages in src/templates.
My index importations look like :
<link rel="stylesheet" href="css/app.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
thanks to that, I can see the bootstrap template on my webpages. But I don't know how to modify it. The two solutions I saw are creating a design.css and import it after the two other .css, but it doesn't work.
I also saw that normally we should import bootstrap.min.css, but it has no effect on my webpages.
So How could I modify the global design for my webpages, like for example the background color, keeping the Bootstrap template ? Shall we go into the less files ? What's the aim of these two css responsive.min and app.min ?
How should we organize the CSS files while working with Mobile Angular UI ?
Thanks a lot !
By the way, which version of Mobile angular UI are you using ? I think those stylesheets are not available. I have git cloned the project, and i can't see them.
And now I can answer your question. If you download the framework well, you will have a src directory. In this src directory you have less/variables.less, where you can change most of the customizable elements of your interface.
Then you gulp build again to have appropriate dist/css/*.css elements.
Hope that help.
I'm a beginner coder and am trying to integrate my css into my app. Using Rails 4 + Bootstrap 3.
I wrote out the html + css for the front-end of my app prior and it all worked fabulously. I moved everything to my folder and edited my V + C accordingly.
I have installed the bootstrap-sass gem successfully. Have updated my assets application and js. I have a .scss file importing bootstrap and my Google fonts.
Bootstrap, Bootstrap js, and Google fonts are working selectively/randomly on certain pages, but not fully on a page or they just don't work at all or they are there but all messed up now. (ex. modal not working on one page, but js element on another page works) I am trying to call the css files from where they are locally stored.
My questions:
1. Is there something I would need to edit to integrate the two in addition to the above?
2. Do I have to transition my css into another file?
3. If there is no easy way to fix this, should I just start over with my css?
Would appreciate any tips. Thanks!
A good starting point would be to check your sources under the inspector, to make the that the css and javascript are both being required. Also check the console for whether there are any javascript errors.
Assuming you are on google chrome, and on a mac, that would be cmd+alt+i, and ctrl+alt+i on windows.
You can also check which files are being included through checking page source by right clicking most parts of the page.
If they are being required and styles are not being applied then something else is probably getting in the way( i.e. bootstrap javascript files are being required twice, css is being overwritten because of load order, etc)