I am trying to user carbon component in my angular application.
I included the given scss "../node_modules/carbon-components/scss/globals/scss/styles.scss" in my angular-cli file.
Now I am trying to use Modal in my component class as suggest here. but it's not working.I am unable to use Modal custom event in angular component file.
I am stucked from 2 days now I am reading library. If anyone have experience of Carbon Component.Please suggest...
You can provide CDN links in your index.html
CSS https://unpkg.com/carbon-components/css/carbon-components.min.css
ES5 https://unpkg.com/carbon-components/scripts/carbon-components.min.js
as shown here.
example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SignupFormProject</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href=" https://unpkg.com/carbon-components/css/carbon-components.min.css">
</head>
<body>
<script src="https://unpkg.com/carbon-components/scripts/carbon-components.min.js"></script>
<app-root></app-root>
</body>
</html>
Related
I'm using w3.css framework from https://www.w3schools.com/w3css/default.asp which is an alternative to Bootstrap.
IntelliJ idea does not show up code completion for this framework.
Does anyone know how to set it up in IntelliJ idea?
I did add the link to the head of page also but still no result.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>W3.CSS framework</title>
</head>
Did you try downloading the library locally per instructions in https://www.jetbrains.com/help/webstorm/2021.3/style-sheets.html#ws_html_code_completion?
Once you do this, completion should be there:
My html structure is like below, and the folder path is correct:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Application</title>
<link rel="stylesheet" type="text/css" href="../app/assets/appStyle.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">
<link rel="text/javascript" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js">
</head>
When I try the pages from the browser, they work. However, when I try them from localhost, it does not load css or the minified semantic ui. Could anybody help please? I have been struggling with this for 3 hours. Any help or hint is appreciated.
EDITED: I have a function like below, for routing in my app.js file. Can it be a reason?
// Make the user route to application.html
app.get('*',function(req,res){
res.sendFile(path.join(__dirname + '/public/pages/application.html'));
});
I think problem is here
<link rel="stylesheet" type="text/css" href="../app/assets/appStyle.css">
If you want to check that stylesheet is working properly, right click
the browser and click View page source.
Click the stylesheet link and check is it load the stylesheet
correctly.
If it is not working properly check your path and correct that.
You are using <link> tag for Javascript. <link> tag is not supported by browsers to load JS.
Please refer to this StackOverflow question: Can I load javascript code using <link> tag?.
<link rel="text/javascript" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js">
Use script tag to load JS.Try replacing above lines with:
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>
Let me know if this works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
</body>
</html>
it is not including these two files in my twig template can anyone help how
to include external css/js file inside twig template.(this is my twig template)
This should help:
set your app's base in the .htaccess to your public folder where you'd usually put all your css, js, media
call your css file from the base using href="{{ base_url() }}/css/main.css"
my website (www.sauleezy.altervista.org) has an error that I can't solve. I set two different .css files, one for desktop, style.css, and one for mobile, handheld.css. In my index I set this code:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css" media="only screen and (min-width: 1121px)">
<link rel="stylesheet" type="text/css" href="handheld.css" media="only screen and (max-width:1120px)">
and it works.
The problem is that if I resize the page on my computer I can see the right mobile version of my website, but if I try to visit it from my smartphone I don't know why but it doesn't resize the content in the right why as from the computer. I have the right view also on mobile only if I check on google chrome the option "Desktop mode". In this case I have not the desktop version but the mobile version as I see it form the resized window from the computer.
How can I solve it?
If you click on my website and try, I'm sure you can understand. I hope my explanation isn't too bad. I apologize in advance.
Your HTML has a fundamental error:
<!DOCTYPE html>
<html lang="en">
<link rel="icon"
type="image/png"
href="Images/Icon-SaulEezy.png">
<head>
You must implement <head> just after <html lang="en">, which is perhaps why your <meta name="viewport" content="width=device-width, initial-scale=1.0"> is ignored.
Change it to
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon"
type="image/png"
href="Images/Icon-SaulEezy.png">
Then check it in your mobile device.
I have made a website that works in Google Chrome and other major browsers. I want to publish it for Android. So I used PhoneGap to convert to Android. One problem was that PhoneGap does not use Bootstrap anymore, nor my JQuery.
Can you maybe help me because I can't find any clear explanation for how to fix this. Do I need to add something to the project in PhoneGap or is it easier in Android Studio instead of PhoneGap?
I thank you in advanced for helping me. I am really new to Android.
The Header
<head>
<meta charset="UTF-8">
<title>Clash Royal</title>
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/screen.css">
</head>
The script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="assets/js/script.js"></script>
Header
<head>
<meta charset="UTF-8">
<title>Clash Royal</title>
<link rel="stylesheet" type="text/css" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="assets/font-awesome-4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/screen.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Script
<script src="assets/js/jquery-3.2.0.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="assets/js/script.js"></script>
I need to download it local and also link it local and then it works