I am trying to load some javascripts on laravel but it is not loading, i can't figure out the problem, please someone help me.
here is the code
#section('script')
<script type="text/javascript">
$('#start_date').datepicker({
})
</script>
#endsection
Make sure that #yield('script') is defined in the parent blade.
When defining a child view, use the Blade #extends directive to specify which layout the child view should "inherit". Views which extend a Blade layout may inject content into the layout's sections using #section directives.
(...) the contents of these sections will be displayed in the layout using #yield
You can read more about it here
Related
I'm on Vue.js v2. I have a CSS stylesheet stored as a string in a variable.
import sitePackCss from '!!raw-loader!sass-loader!../../app/javascript/styles/site.sass';
I need to create a tag from my component.
<style v-html="sitePackCss" />
OR
<style>{sitePackCss}</style>
When I do either of these, I get the following error in the console:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.
How do I get this tag onto the page?
NOTE: I know this is a hacky, non-preferred way to include styles. This solution will only get used in the context of storybook, where I need to include specific CSS files for specific stories (without storybook/webpack adding them to every story). If I use normal webpack loaders, each tag is added to every story. Importing the styles as a string is the only way I've found to sidestep that behavior.
Try to add the style to the src tag of the style in your SFC :
<style lang="sass" src="../../app/javascript/styles/site.sass">
</style>
This seems to work!
import sitePackCss from '!!raw-loader!sass-loader!../../app/javascript/styles/site.sass';
In template:
<component is="style" type="text/css">${sitePackCss}</component>
Note: the sass files have references to fonts that were not working correctly using this technique. I had to update the staticDirs config to make those paths work. https://storybook.js.org/docs/react/configure/images-and-assets
I am learning web development and I am trying to use the COREui 4.0.1 Bootstrap admin template in an existing Symfony 5.3 project instead of standard Bootstrap 5 components and utilities. I am trying to get the page to look like https://coreui.io/demo/free/3.4.0/.
The project was created using symfony new my_project_name --full. I added Bootstrap CSS with https://getbootstrap.com/docs/5.0/getting-started/introduction/#css and JS with https://getbootstrap.com/docs/5.0/getting-started/introduction/#bundle to my base.html.twig.
Steps that I took:
Create a new controller
Create an associated view using a twig template
Replaced the Bootstrap JS with https://coreui.io/docs/4.0/getting-started/introduction/#bundle and CSS with https://coreui.io/docs/4.0/getting-started/introduction/#css in my base.html.twig
What I was expecting:
When accessing the controller/view I would see https://coreui.io/demo/free/3.4.0/
The actual result:
Minor styling changes (from COREui rather than original Bootstrap) but no layout changes
The CoreUI CSS and JS that you have added to your project is to be used in the same way that you would use Bootstrap components and utilities i.e. adding to existing HTML elements.
Viewing the page source at the demo you provided at https://coreui.io/demo/free/3.4.0/ shows the HTML elements that you would need to have in your own project, that would then have CoreUI (in this case) CSS and JS components applied to them.
Using that demo https://coreui.io/demo/free/3.4.0/, if you wanted a side navigation bar you would need to have a HTML element like:
<div class="c-sidebar c-sidebar-dark c-sidebar-fixed c-sidebar-lg-show" id="sidebar">
<div class="c-sidebar-brand d-lg-down-none">
...
Im new to Jekyll and I am making a site with custom html and css in order. Jekyll downloads the minima theme by default, so I overrode the homepage with the following html:
<!DOCTYPE html>
<html>
<head>
<title>testsite</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
all my html
<script>
$.ajax(an ajax call);
</script>
</body>
</html>
I am looking to add a custom stylesheet, yet I am having trouble correctly linking to within the theme. I have checked online but many forums seem out incorrect on the folder structure.
Here is the current structure.
--layouts
-home.html
--posts
--site
--assets
-main.css
-main.css.map
--jekyll
--update
--privacy
-index.html
--jekyll-cache
-config.yml
-Gemfile
-Gemfile.lock
-index.markdown
My question is, is there a simple way to add a stylesheet that will work on all pages when live? I can link a stylesheet the normal way id do it, however that doesn't work when uploaded to github. Would it be better to start from a build without a theme? If so how do I setup the gemfile?
Thanks!
Great simple approach. I love it. Here is how to proceed:
Remove Minima from your config file/project
Create a directory _includes
Move the head to header.html in _includes
Call the header in the home.html (and any other layout) file by using {% include header.html %}
Link the new CSS in the header.html file
Jekyll without themes (and plugins) is so much better. Looking for more? https://www.jekyllcodex.org
I am having some issues in CSS/Bootstrap work when it is rendered in a angular2 component.
when I try to render the CSS/html contents in Index.html file (with proper references for CSS,JS) the application/functionality works fine. But when the same html contents along with CSS classes is rendered in the angular2 component, it doesn't work.
Based on the searches on internet I have done all these changes but nothing makes it working. I have added encapsulation: ViewEncapsulation.None for that component, still the CSS functionality doesn't work along with angular 2.
also the order of JS references file are placed in the following order
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I have replicated the issue and checked into Github url
can somebody help me with this issue?
This is because we cant simply add js files in angular 2 by adding the ref link,
try this stack over flow solution
How to use jQuery with Angular2?
For Bootstrap you can use ng-bootstrap
https://www.npmjs.com/package/ng2-bootstrap
I have written an GWT app and a static Intro page that introduces the app. It is turning out to be convenient for the intro to be a separate .jsp page, rather than part of the app; however, I want the CSS styling to be the same for the app and the intro page. How do I include the same GWT CSS style for the static or .jsp page as for the GWT app?
just include it like a standard webpage like
<link rel="stylesheet" type="text/css" href="{Path to css here}"/>
For instance using the Clean css provided by gwt, defined in projectname.gwt.xml:
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
Your css will be stored in:
/projectname/gwt/clean/clean.css
Is that what you mean?