I am having trouble with this Github package for vuejs pagination. It seem to work on bootstrap 3 but when I use bootstrap 4, it just doesn't work. My problem basically is that bootstrap 4 doesn't style the list item correctly.
I put 'pagination' class on :container-class and it makes the list inline, but not style it like what a normal bootstrap pagination should look. It's just plain list that is inline. I even tried overriding it and putting my own 'mypagination' class on :container-class but still doesn't style it properly. Thanks in advance to you.
//VueJs Paginate code
<paginate
:page-count="20"
:click-handler="functionName"
:prev-text="'Prev'"
:next-text="'Next'"
:container-class="'mypagination'">
</paginate>
//My style code
<style scoped>
.mypagination{
list-style-type: none;
}
.mypagination li {
display: inline !important;
}
.mypagination > li > a,
.mypagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
</style>
You have to add the following properties for bootstrap 4:
<paginate
:page-count="20"
:click-handler="clickCallback"
:prev-text="'Prev'"
:next-text="'Next'"
:container-class="'pagination'"
:page-class="'page-item'"
:page-link-class="'page-link'"
:prev-class="'page-item'"
:next-class="'page-item'"
:prev-link-class="'page-link'"
:next-link-class="'page-link'"
:active-class="'active'">
</paginate>
Related
I am trying to make a component with buttons inside a div, I am having issues, because the styles are not applying on the buttons, I guess I should not use slot here. Can someone guide me?
Component
<template>
<div :class="[$style.btnGroup]" v-bind="$attrs">
<slot :class="$style[variant]">/>
</div>
</template>
How I use this
<ButtonGroup variant="warning">
<button>Test</button>
<button>Test</button>
<button>Test</button>
</ButtonGroup>
I use css module
<style module>
.btnGroup button {
position: relative;
border: none;
font-weight: 400;
border-radius: 0.25rem;
cursor: pointer;
font-size: 1rem;
padding: 0.5rem 1rem;
transition: 0.1s;
}
.primary{
background: var(--primary-bg);
border: 1px solid var(--primary-bg);
color: white;
}
.warning {
background: var(--warning-bg);
border: 1px solid var(--warning-bg);
font-size: 1rem;
padding: 0.5rem 1rem;
transition: 0.1s;
color: black;
}
etc. for each variant I have different style.
You are applying the class on the button group not the buttons that are inside, to solve this instead of binding the class to the slot bind another variable and use that variable binding on each button or you can solve it through css thats why i suggested you show us the css give a class to the buttongroup the way you are doing and in css do as so:
<slot class="buttongroupclass">/>
.buttongroupclass button{
//the css you want to apply
}
I have tried using a vuetify class based on breakpoint it worked
<v-app :class="{'yellow': !$vuetify.breakpoint.xs}">
I have a class named pagemargin in a vue file
But when I use this class it is not working, as in the following case
<v-app :class="{'pagemargin': !$vuetify.breakpoint.xs}">
why is it not working?
<style >
.pagemargin{
margin-right: 100px;
margin-left: 100px;
color: red;
}
</style>
Add !important to your styles. Vuetify adds its default style to the whole v-app so you need to override it.
.pagemargin{
margin-right: 100px !important;
margin-left: 100px !important;
color: red !important;
}
Using !important might work, but in long term as your application gets bigger, it could be costly. You should instead, solve this by providing a CSS that has a higher specificity than that of Vuetify. I provide you with an example:
<template>
<div class="my-div">
<v-btn :class="{'my-padding': !$vuetify.breakpoint.xs}" tile outlined color="success">
View
</v-btn>
</div>
</template>
<style>
/* this wont work */
.my-div .my-padding {
padding-right: 200px;
padding-left: 200px;
}
/* this works */
.my-div .v-btn.my-padding {
padding-right: 200px;
padding-left: 200px;
}
</style>
<style scoped>
/* this also works */
.my-div .my-padding {
padding-right: 200px;
padding-left: 200px;
}
</style>
You can read more about specificity here.
I am styling a Shopify site for the first and using the Minimalist theme as a base. I want to style the shopify-payment-button (But it now) button but have not been able to. I noticed looking that the page source code there is:
<style id="shopify-dynamic-checkout">
.shopify-payment-button__button--hidden {
visibility: hidden;
}
.shopify-payment-button__button {
border-radius: 4px;
border: none;
box-shadow: 0 0 0 0 transparent;
color: white;
cursor: pointer;
display: block;
font-size: 1em;
font-weight: 500;
line-height: 1;
text-align: center;
width: 100%;
transition: background 0.2s ease-in-out;
}
//etc, etc
being injected into the <head> which is overriding my styles. I can't find where this comes from to remove it. Would anyone know how?
Shopify injects styles and js for some elements on site inside {{ content_for_header }}, which you will find in theme.liquid file.
This tag contains default shopify files as well as files for some integrations and apps. For example if you install facebook pixel through shopify, the code for it will go to {{ content_for_header }}
It is not possible to control what goes to this tag directly. If you just need to change styling then I recommend to just overwrite styles, in worst case if you need to, use"!important" tag in css
Typically, to insert a Glyphicon inside a Bootstrap 3 app, it's as simple as:
<span class="glyphicon glyphicon-envelope"></span>
etc. In many apps, however, it is typical for Glyphicons to be "customized" so that they appear with numeric superscripts like so:
Above, this red/white "5" bubble might indicate that the user has 5 notifications. I'm wondering how this "numeric superscript" effect can be achieved in Bootstrap 3.
You mean something like this?
This is just some CSS basic styling, there is afaik no "standard" and certainly no special HTML tags nor "secret" bootstrap features that supports it. Below my suggestion - modify so it fit your expectations :
.rw-number-notification {
position: absolute;
top: -7px;
right: -6px;
padding: 3px 3px 2px 3px;
background-color: red;
color: white;
font-family: arial;
font-weight: bold;
font-size: 10px;
border-radius: 4px;
box-shadow: 1px 1px 1px silver;
}
markup :
<span class="glyphicon glyphicon-envelope">
<span class="rw-number-notification">7</span>
</span>
demo with some examples -> http://jsfiddle.net/rqfthhkx/
NB: Not completely related, but I do believe, though, that it is common practice to use the <i> tag when you are using glyphicons, fontawesome etc
<i class="glyphicon glyphicon-envelope"></i>
at least it renders as exactly the same -> http://jsfiddle.net/rqfthhkx/1/
Font Awesome
Example:
<i class="fa fa-envelope text-primary">
<span class="number-notification">7</span>
</i>
The .number-notification CSS is the same, except it seems impossible to adjust the position of the number container to fa-xx sizes and different font-sizes. The solution is to wrap the <i> element into <h> elements and specify the relative position in rem units :
.number-notification {
position: relative;
padding: 3px 3px 2px 3px;
background-color:red;
color:white;
font-family: arial;
font-weight:bold;
font-size: 10px;
border-radius: 4px;
box-shadow:1px 1px 1px silver;
}
.fa .number-notification {
top: -1rem;
right: 1rem;
}
h3 .fa .number-notification {
top: -1.2rem;
right: 1.2rem;
}
h2 .fa .number-notification {
top: -1.5rem;
right: 1.5rem;
}
h1 .fa .number-notification {
top: -2.2rem;
right: 1.8rem;
}
This should look more or less the same with different font sizes.
New fiddle -> http://jsfiddle.net/b86oj9gd/
I am trying to align a set of "buttons" made out of DIV elements that are arranged along the bottom of a web page using the CSS display: inline-block. I've attached a fiddle which illustrates the issue.
The problem is that this current code works on all modern browsers except Safari (7, 8). I don't know if this is a bug in WebKit that Safari uses, or something that I've allowed to happen by not using the right incantations.
The thing that triggers the unwanted behavior is the nested DIV.btn-sub; however, removing that text is not an option to "fix" the issue.
Here's the expected behavior (snap taken from Firefox 34, similar behavior on IE 9, 10, and latest Chrome):
Here's what happens on Safari:
Any help here would be appreciated!
It's usually best practice to use a list when creating inline-blocked elements in a row/list, such as a navigation.
The issue here seems to be the block being set with a padding directly; relative it's parent. Which somehow is turning it into a margin or something similar.
You can try stripping CSS until you get a full height out of the blocks, and then add another inner div which you can call .btn-padding which contains your top padding.
Here is similar.
body, html {
height: 100%;
margin: 0;
background: green;
}
#wrap {
display: block;
width: 100%;
position: fixed;
bottom: 0px;
height: 50px;
border:0;
background-color: blue;
color: #fff;
}
#btnls {
display: block;
list-style-type: none;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#btnls li {
display: inline-block;
margin-right: 10px;
background-color: purple;
min-width: 158px;
max-width: 300px;
height: 50px;
text-align: center;
vertical-align: middle;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#btnls li .btn-padding {
display: block;
padding-top: 10px;
width: 100%;
height: 50px;
}
#btnls li .btn-padding .sub-btn {
display: block;
font-size: x-small;
margin: 0;
padding: 0
}
<div id="wrap">
<ul id="btnls">
<li>
<div class="btn-padding">Foo
<div class="sub-btn">Bar</div>
</div>
</li>
<li>
<div class="btn-padding">Foo</div>
</li>
<li>
<div class="btn-padding">Foo</div>
</li>
</ul>
</div>