I'm trying to make a mixin to inherit from different bootstrap classes so in order to clarify my code.
So, instead of writing
<div class="row-fluid col-lg-12 page-header">
I would like to write something like
<div class="myGroup">
I've create a .less file:
#import 'bootstrap/less/bootstrap.less';
.myGroup{
.row-fluid; //Undeclared mixin
.col-lg-12; //Undeclared mixin
.page-header; //Loads Ok.
}
I'm compiling client-side. I receive "undeclared mixin".
Any idea? Thanks!
Columns in Bootstrap LESS source are generated dynamically via mixins in mixins.less.
This is the reason you can't call them directly as mixins.
Anyway I think it's better practice to give .col-lg-12 as a class to the element and not hiding it to your stylesheet. You shouldn't use .row and .col-* in same element either.
There is no such thing as .row-fluid in Bootstrap 3.
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="page-header"> ... </div>
</div>
</div>
</div>
Related
I am using the flex box in vue.js but the project cannot perform the functionality. the code is
<div class="d-flex">
<div class="p-2"><p>Resturants</p></div>
<div class="ml-auto p-2"><b-icon icon="three-dots-vertical"></b-icon></div>
</div>
and the output is the output image is
can you elaborate how to solve this task.
Can't comment, so i'll try to create an answer.
As other have suggested, it's strange that your box looks like this, without any css applied on.
What might be, is that the box is taking css from other components.
In every vue component, write the tag as follows
<style scoped>
this will apply the css only to that certain component.
Regarding your question, you could do something like this
<div class="row row-flex">
<div class="col-6">Content1</div>
<div class="col-6">Content2</div>
</div>
And then add your css.
Hope it helped
I’m having this issue, I searched in the forum but didn’t find anything related.
I am trying to use justify-center for small screens and justify-end for large screens. Reading the docs I found this:
So I tried to use it as justify-sm-center and justify-lg-end but haven’t been able to make it work. I made this fiddle to demonstrate it:
https://jsfiddle.net/leoprada/3b40vn6g/
<div class="row">
<p>Class: justify-center applied when BP lg (justify-lg-center) and justify-end on BP sm (justify-sm-end) </p>
<div class="row col-12 justify-sm-end justify-end-sm justify-lg-center bg-black">
<div class="col-sm-4 col-lg-6 bg-blue q-py-md text-center">
col-4
</div>
<div class="col-4 bg-green q-py-md text-center">
Col-4
</div>
</div>
</div>
I don’t really know if I am doing something wrong.
(I know how to make it work by my own using CSS but I’d rather use the predefined quasar class, of course)
You need to enable the cssAddon / flex-addon. If you didn't install quasar via its native CLI and thus don't have a quasar.conf, you need to import the flex-addon.sass file.
main.js/ts
import ...
// Import Quasar css
import "quasar/src/css/index.sass"
import "quasar/src/css/flex-addon.sass" // <--- NEW
createApp...
I don’t think the breakpoints work on rows (only items within rows), so I think to do what you want, you would have to use the Vue Class Bindings with breakpoints or platform detection. Something like:
<div class="row">
<div :class="$q.platform.is.mobile ? 'justify-end' : 'justify-center'" class="row col-12 bg-black">
<div class="col-sm-4 col-lg-6 bg-blue q-py-md text-center">
col-4
</div>
</div>
</div>
Thymeleaf th:attr not working with Vue bind property
<truncate th:attr="'v-bind:text'=${message}"/>
The above line not giving me error in both Vue and Thymeleaf but nothing display on page
below is the response from server side
Once I remove 'v-bind:' prefix and use some thing like "th:attr="text=${user.comment}" its working as expected
<div class="col-lg-12 col-sm-12 col-xs-12 row_block_padding" th:each="user : ${response.users}">
<!-- OTHER CODE -->
<div class="col-lg-10 col-sm-10 col-xs-10" style="padding-top: 15px;">
<truncate th:attr="text=${user.comment}"></truncate>
</div>
</div>
You'll need to use the th:attr directive. For example
<div th:with="message='Simple message'">
<truncate th:attr="'v-bind:text'=${message}"/>
</div>
See https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#setting-the-value-of-any-attribute
Update: to use th:attr with HTML5 invalid attributes (like v-bind:text), you need to quote the attribute name (fixed above).
This produces the following markup
<div>
<truncate v-bind:text="Simple Message"/>
</div>
You may note that this is not a valid Vue binding expression so perhaps you don't actually want to use binding and instead use
<truncate th:attr="text=${message}"/>
which would produce
<truncate text="Simple message"/>
<truncate th:attr="'v-bind='{text:'+${message}+'}'"/>
the solution of vue: another usage of v-bind
https://v2.vuejs.org/v2/api/#v-bind
I have a component inside a .vue file that can benefit from reusing a chunk of code. I know I can move that code to a separate .vue file and import it as a new component. However, this component would not be used anywhere else and I'd like to avoid cluttering the directory. Is it possible to declare this component's template inside the parent without using the in-code template:"<div>.....</div>" stuff?
This is the idea:
<template>
<div>
...some html here...
<div v-for="item in items">
{{item.name}}:
<div v-if="item.available">YES!</div>
<div v-else>NO :(</div>
</div>
...some other components and data here...
<div v-for="item in items">
{{item.name}}:
<div v-if="item.available">YES!</div>
<div v-else>NO :(</div>
</div>
</div>
</template>
I would like to be able to do something like this:
<template>
<div>
...some html here...
<div v-for="item in items">
<itemizer inline-template v-model="item">
{{value.name}}:
<div v-if="value.available">YES!</div>
<div v-else>NO :(</div>
</itemizer>
</div>
...some other components and data here...
<div v-for="item in items">
<itemizer v-model="item"/>
</div>
</div>
</template>
However, from what I understand this is not possible.
Unfortunately this pattern does not appear to be supported by the creator of Vue:
I personally feel the syntax is less maintainable than [Single File Components]
Note that we want to keep the SFC syntax as consistent possible, because it involves a big ecosystem of tools that need to support any new features added (e.g. Vetur would need to do something very different for handling SFCs with multiple scripts/templates). The proposed syntax, IMO, does not justify adding the new syntax.
https://github.com/vuejs/vue/pull/7264#issuecomment-352452213
That's too bad, as even beyond flexibility and developer choice, there is a good argument for inlining small functions that are not used by other components in order to reduce complexity. It's a common pattern in React and does not inhibit Single File Components when they're needed. In fact it allows gradual migration as inline components grow.
Here's one of the only resources currently that offers some potential workarounds:
https://codewithhugo.com/writing-multiple-vue-components-in-a-single-file/
I've tried them all and am not satisfied with any of them at this time. At best you can set runtimerCompiler: true and use template strings, but it'll add 10KB to your bundle and you'll likely miss out on full syntax highlighting available in the <template> element. Maybe you can hack Teleport, but I have not made a dedicated attempt.
Actually, this should work. Just register your Vue inline-template like this in the section of your parent .vue file:
<template>
<div v-for="item in items">
<test-template :item="item">
<h1>{{item.text}}</h1>
</test-template>
</div>
</template>
<script>
Vue.component('test-template', {
template:'#hello-world-template',
props: {
item: Object
}
});
export default {...}
</script>
In your parent HTML file, put this:
<script type="text/x-template" id="hello-world-template">
<p>Hello hello hello</p>
</script>
With vue3 there are multiple options:
with vue-jsx you can just declare a component in your script setup section and use that
const Named = defineComponent(() => {
const count = ref(0)
const inc = () => count.value++
return () => (
<button class="named" onClick={inc}>
named {count.value}
</button>
)
})
There is another option described by Michael Thiessen here
Also you can have multiple render function components in one file:
https://staging.vuejs.org/guide/extras/render-function.html
Although it is not supported in Vue core yet, there is a way to use this through vue macros project. See discussion here
I have just started working on turning a graphic design into a responsive website using Bootstrap 3. I would like to know the positioning of the .container in relation to other wrappers like, e.g. <nav>, <header>, <footer> or semantic custom wrappers like, e.g <div class="main-content">, etc.
I am not sure if I should wrap the above mentioned tags in the .container div or vice-versa - wrap the .container div in those tags.
Essentially, the question is whether the following are equal or there is a preference of order:
<div class="container">
<div class="main-content">
...
</div>
</div>
<div class="main-content">
<div class="container">
...
</div>
</div>
If it depends on the project specifics what markup to choose, what might be potential reasons for choosing one over the other?
I personally use following order
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- NAVIGATION -->
</div>
</nav>
<div id="content" class="container">
<!-- (MAIN)CONTENT -->
</div>
<footer>
<div class="container">
<!-- FOOTER -->
</div>
</footer>
</body>
so I can style the navigation nav and footer footer over the full width (e.g. background) and the content still offers the grid.
EDIT : It is based on Template Business Casual.
If you wish to style everthing to the same (responsive .container-)width you should better put everything inside the .container. This also depends on your CSS behind .main-content.
Maybe you could check the different examples (source code) from bootstrap to see which setting/design matches your preferences.