The top black navbar doesnt show
i made a fresh install :
composer.phar create-project --prefer-dist phundament/app my-app
(made the virtualhost and rename the htaccess)
i left all the config params as default (sqlite)
All install great, no problem.
But the top black navbar doesnt show as he had to.
seems to be a css problem but i cant find the solution,
i tried enable de LESS copiler , same result
ideas ?
Screen:
It is a css problem. The navbar requires an extra class navbar-inverse see http://yii-booster.clevertech.biz/widgets/navigation/view/navbar.html for more information.
Related
I make a vue project using this documentation: https://vuejs.org/guide/quick-start.html#creating-a-vue-application
And I wanted to added tailwind css to this project. So I used this guide (from point 2 Install Tailwind CSS): https://tailwindcss.com/docs/guides/vite#vue
But, I see no changes and get this warning:
warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
I followed the instuction as it is.
I tried following the content-configuration and I double checked it to see all files in place.
I was expecting tailwind.config.cjs file should be generated but instead tailwind.config.js is generated.
Updates:
On repeating all the steps using this link: https://tailwindcss.com/docs/guides/vite#vue
At step 4:
Add the Tailwind directives to your CSS, When I replace the content for style.css as asked in the step.. Exactly after this point, the error is shown.
Fixed.. Asking in the discord community this was the response:
Thank you for supplying a remotely-hosted repository. It seems to work
fine for me, it could be that you're suffering from a bug that this PR
solves: https://github.com/tailwindlabs/tailwindcss/pull/9650. You
could temporarily try insiders version and see if that fixes it for
you
npm install tailwindcss#insiders
I just gave solution to the same problem. You might have the same...
I had my tailwind.config.js like this:
module.exports = {
content: ["./src**/**/*.{html,js}"],
},
...and I changed the destination folder from "src" to "public", and it worked for me.
Like this:
module.exports = {
content: ["./public/**/*.{html,js}"],
},
Hope this will help you. Good luck and happy coding !
I want to use ag-grid-vue without npm installing it.
code: https://codepen.io/riodw/pen/zYYOjdE
So I found this: Is it possible to use ag-grid with vue without a builder?. Followed that guid, and was basically able to get something to render but it get's stuck on "Loading..."
I downloaded ag-grid (from here: https://github.com/ag-grid/ag-grid)
Went into cd ag-grid-master/packages/ag-grid-vue
npm installed npm install
Then built npm run build
This generated the "ag-grid-vue.umd.js" file.
Modified that file to put AgGridVue on the window where AgGridVue is returned:
window.AgGridVue = AgGridVue;
return AgGridVue;
Then include that file with the ag-grid-community file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/21.2.1/ag-grid-community.min.js"></script>
<script src="/global/js/ag-grid/ag-grid-vue.umd.js"></script>
And ag-grid renders!
Problem is it get's stuck on loading and I don't know if there is a solution.
Are there any possibilities to help here?
Any help would be great. If not I'll have to use something else as installing is not an option for me unfortunately.
Image of render:
Debug mode codepen:
https://cdpn.io/riodw/debug/zYYOjdE/LDkmdEDdQpzA
Everything you do is correct except one tiny thing.
I've found the solution, when I've used vue.js (not minified version), then Vue itself has thrown a warning;
Indicating that, in the "ag-grid-vue" tag, you should not use :rowData as below;
<ag-grid-vue :rowData="rowData" :columnDefs="columnDefs"/>
this usage is wrong as stated in the console warning from Vue.
You should use kebab-case instead of camel-case as below;
<ag-grid-vue :row-data="rowData" :column-defs="columnDefs"/>
This actually works as expected.
I beleive, camel-case works in an environment with the presence of module-loader.
Environment
Laravel Mix Version: laravel-mix#2.1.0
Node Version: v8.2.1
NPM Version: 6.10.0
OS: Linux (Ubuntu 18.04)
Description:
I'm trying to identify which CSS process is the culprit of some wrong CSS being applied with npm run production but I'm not being able to do it. Some Bootstrap 4 CSS properties are being translated/simplified and it's producing wrong styles. I tried a lot of solutions (in my local webpack.mix.js => mix.options). I've tried to disable purifyCss (I discovered it's not using it), uglify, force outputStyle to 'expanded' (in .sass() method), etc. None of them worked.
As a workaround, I could add a new "prod" ENV and perform minification and other things directly from my webpack.mix.js, but I don't like this solution, specially when I think it's just because of a setting/flag somewhere I could easily change (if I knew which one).
Thank you.
Steps To Reproduce:
npm run dev: background-position: center right calc(0.375em + 0.1875rem)
npm run production: background-position: 100% calc(.375em + .1875rem)
Well, it looks like it was a bug in a mixin:
https://github.com/twbs/bootstrap/commit/de1a6e3201a2f047c5abd2430795be32d37e9a35#diff-4fcf7dc3cf66b28cb08274cc30798d70
https://github.com/cssnano/cssnano/issues/712
Updating to latest Bootstrap version solves the issue.
I just started getting this error today, and it broke my whole site (because like a fool I'm loading Vuetify on page load).
Does anyone know what this means or how to fix it? Googling around didn't reveal anything helpful.
Edit:
To anyone who finds this because their site is also broken, it may be because of where you were loading vuetify.min.css from. For me I was getting at page load like so:
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
And solved the problem by importing it from the installed package instead with
import 'vuetify/dist/vuetify.min.css'
in app.js.
I'm still interested in learning about this v-ripple business, though.
I got into the same problem and I solved by installing
material-design-icons-iconfont
Run the following command to install:
npm install material-design-icons-iconfont
or, if you are running from yarn then:
yarn add material-design-icons-iconfont
Now import in main.js file:
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
You can read the vuetify documentation for more information:
Vuetify Documentation
I ran into this same issue today and started going down the route of importing it as suggested above when I noticed the header:
#charset "UTF-8";
/*!
* Vuetify v2.0.0-alpha.14
* Forged by John Leider
* Released under the MIT License.
It looks like they bumped the dist version (I'm working with 1.5.12). I updated my link href to:
https://cdn.jsdelivr.net/npm/vuetify#1.5.12/dist/vuetify.min.css
...and my site was put back together again. It's probably better practice to bring it in as a module but that'll be something for the backlog. Hope this helps somebody.
For me, the problem was I had both tslint and eslint installed. After I disabled eslint, it worked.
is it possible to set the orientation a .mp4 file in the video.js player? I don't see properties to do so such as Orientation="Portrait", but I was wondering if setting the width and height at runtime would do this.
You should try out this plugin.
Video.js Zoom Rotate
A videoJS plugin to easily rotate or zoom in a video
https://github.com/xbgmsharp/videojs-rotatezoom
Joe DF answer is the solution. However I struggled to get it working properly and so I decided to share the step by step of what worked for me.
OK, first I tried like hell to get the videojs.zoomrotate.js plugin working without using 'bower' but unfortunately there is no way of doing it so you will HAVE to use it. In my case I use Visual Studio and Visual Source Safe so npm, git, etc, are useless in my setup and that's why I didn't want to install such stuff. The good news is that you can uninstall everything after to get VideoJS and the rotate plugin working. Finally it's important to let you know that I did it from Windows 10.
Let's see how to do this:
Download and install 'Git'.
Download and install 'npm'.
Open the command prompt (cmd) and install 'bower' typing:
npm install -g bower
Tip: If you got any error, just close your command prompt and open it again.
No worries, as I said you can uninstall everything later if you don't want to keep it.
Now we will install VideoJS. I already had it in my project but I choose to make everything from scratch to ensure it would work no problem. At this point I recommend you to CLOSE your command prompt and open it again to avoid get errors from npm.
Open command prompt and install VideoJS. Type:
npm install --save video.js
At last install videojs.zoomrotate.js. Type:
bower i --save videojs-rotatezoom
Now close your command prompt, open Windows Explorer. Navigate to c:\users\your_user_name\
You will see a new folder that was created by bower named bower_components. Enter it. You will find two subfolders in it, one for VideoJS and another for the plugin.
Enter video.js folder and then dist folder. You want only two files from there: 'video.js' and 'video-js.css'. Copy both to the folder in your application where you put your scripts.
Return to the bower_components folder and enter videojs-rotatezoom folder. Now enter the src folder. Copy the file 'videojs.zoomrotate.js' to your application scripts folder. Now you have everything you want.
You can uninstall npm and git and delete all left overs from the c:\users\your_user_name if you want, because you don't need it anymore.
Now it's time to put the videojs into your html file. Copy and paste this:
<link href="/your_script_folder/video-js.css" rel="stylesheet" />
<script src='/your_script_folder/video.js'></script>
<script src='/your_script_folder/videojs.zoomrotate.js'></script>
<div id="divVideo" class="video">
<video id="my-video" class="video-js" controls="" preload="auto" style="width:800px;height:600px;" >
<source src="yourvideo.mp4" type='video/mp4' controls='false' />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
<script>
var my_video_id = videojs('my-video');
my_video_id.zoomrotate({
rotate: 90,
zoom: 1.5
});
</script>
</div>
That's it! If you follow the steps correctly you should have it working by now. Just set the rotate and zoom attributes as you need.
Enjoy!
The best to fix this it to rotate the actual video file. You can do this by using VLC Player.
Go to Tools > Effects and Filters.
Click on Video Effects->Geometry.
Enable Transform and select Rotate by 90 degrees from the dropdown.
Other video libraries should rotate it too. (e.g. Windows Movie Maker)
the other option is to add this to your css
video{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
Note that this will transform your controls also however