I was wondering how I can remove the bootstrap 3 disabled icon.
Thanks in advance.
for buttons,try this:
.btn[disabled] {
cursor: default !important;
}
for other elements,use inspect element and check active class for cursor: not-allowed; and replace it as code above
Related
I'm trying to change the CSS feature vue-intro tutorial for my web app. I'm having trouble with how to change the tooltip button color, themes in vue-intro.js.
I want to change Next button color. so, how to change CSS in nuxt.js project.
I added the below code as a plugin. but I can't change the CSS
import Vue from 'vue'
import VueIntro from 'vue-introjs'
import 'intro.js/introjs.css'
Vue.use(VueIntro)
Here's an SCSS utility to generate the CSS for it:
$btn-color: #f50;
$text-color: white;
a.introjs-nextbutton {
background-color: $btn-color;
border-color: darken($btn-color, 4.2%);
text-shadow: none;
color: $text-color;
&:hover {
background-color: lighten($btn-color, 4.2%);
border-color: $btn-color;
color: $text-color;
}
&:focus {
box-shadow: 0 0 0 0.2rem transparentize($btn-color, .42);
background-color: $btn-color;
border-color: darken($btn-color, 4.2%);
color: $text-color;
}
}
I have done something similar before. I think the only way to do it is to overwrite the className or not import the intro.css (make your own). You need to "inspect element" to find out the introJS className from the library. Basically their className start with prefix introjs-something.
I can even do things like display none for previous button or change its color. See picture below.
Click this to see My Inspect Element to find introjs classes
I'm a bit of a noob to ionic so this may be a dumb question.
On the press of a button I want to overlay my entire app with a black image (or make everything invisible) but still have the buttons working underneath.
My app is based on the tab sample app.
So far I've tried the following
app.scss
.dark-overlay {
background-color: #000 !important;
opacity: 1;
}
my-tab.html
<ion-content class="dark-overlay" (ng-hide)="showOverlay">
....
<div tappable (click)="stealthMode()"><img src="assets/img/stealthMode.png" width="100%" scroll="false"></div>
my-tab.ts
stealthMode () {
this.myElements = document.querySelectorAll("dark-overlay");
for (var i = 0; i < myElements.length; i++) {
myElements[i].style.opacity = 0;
}
}
Even if i can get this to work it's not going to be the final answer as setting the opacity in app.scss to 0 still leaves the tabbar visible but I need that to go black too.
I think it's related to property binding.
Any ideas?
Thanks
you need to use pointer-events to let events go through your dark overlay.
I have demonstrated that in this Plunkr (go to second tab which shows home page)
style.css
.dark-overlay{
position:absolute;
width:100%;
height:100%;
background-color:#888;
opacity:0.9;
top:0px;
left:0px;
z-index:1000;
pointer-events: none;
}
and have this in home.html
<button (click)="stealthMode()">Tint</button>
<div class="dark-overlay" [hidden]="showOverlay"></div>
and this in home.ts
showOverlay:boolean = false;
stealthMode(){
this.showOverlay = !this.showOverlay;
}
You can make a binding to render that part dynamically using angular directives.
Check this for clean implementation:
ngIF
Here is the fiddle. I've put a Select box as sample. It seems that it can't be shown inside modal. How can be it solved?
...................................................Update.....................................
To solve this, I've added this CSS:
.bootstrap-select.btn-group .dropdown-menu.inner {
position: static;
}
Now, the Select-Option are showing, but it seems that the dropdown taking the real space which increasing the height of popup. But, I expect dropdown will cross the popup window if the height of dropdown is much. How can I make it?
Updated Fiddle
See the updated jsFiddle: http://jsfiddle.net/mijopabe/gj9axc18/5/ You need to add this to your CSS:
.modal { overflow: visible; }
.modal-body { overflow-y: visible !important; }
I also took the liberty of including the plugins corresponding CSS file from a CDN:
//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css
Expectation:
http://i.stack.imgur.com/VXtqY.png
I tried and the error is that everything is within the navbar
Please help-me a create a logo outside and inside of navbar
From my understanding you need to customise in CSS
CSS
.navbar-brand{
height: auto;
}
DEMO http://www.bootply.com/117177
Updated version
.navbar-brand{
height: 411;
}
DEMO http://www.bootply.com/117647
I'm working with Bootstrap 3 and the client wants the website container width to be set to 960px. Do I directly edit the CSS file or what is the best way to do this? I heard something about "Less". Do I customize the download? Thanks!
Update: the site does NOT need to be responsive, so I can disable that responsive-ness and just add the 960px width to the CSS and be done with it or does this cause problems elsewhere?
For Bootstrap3, you can customize it to get 960px by default (http://getbootstrap.com/customize/)
change #container-large-desktop from ((1140px + #grid-gutter-width)) to ((940px + #grid-gutter-width)).
change #grid-gutter-width from 30px to 20px.
then download your custom version of bootstrap and use it. It should be 960px by default now.
I wanted the max width to be 810px, so I used a media query like this:
#media (min-width: 811px) {
.container{
width:810px;
}
}
Bootstraps gridsystem is FLUID. This means it works in percentages.
So just set a width to page wrapper, and you are ready to go
HTML:
<body>
<div class="page-wrapper">
<!-- Your bootstrap grid/page markup here -->
</div>
</body>
CSS:
.page-wrapper {
width: 960px; /* Your page width */
margin: 0 auto; /* To center your page within the body */
}
The easiest way is to wrap everything in a container like this..
.container-fixed {
margin: 0 auto;
max-width: 960px;
}
http://bootply.com/94943
Or, you can go with LESS/custom build: http://getbootstrap.com/customize/