I need android like floating action button at the button of my jsp page.The button should remain at the bottom irrespective of the scrolling. Any options available ?
If your button has id fixedbutton. You can specify this in the CSS as:
#fixedbutton {
position: fixed;
bottom: 0px;
right: 0px;
}
Related
I am using Bootstrap template SB Admin (https://startbootstrap.com/templates/sb-admin/) which has a hide/show side nav using a menu button on click. I want to retain the standard functionality on full screen which defaults to show the side nav unless specifically clicked to close.
On smaller screens/mobile the default behaviour is to hide the side nav unless clicked to open, which is fine however I want the nav to auto-close when clicking outside of the nav div - but only on mobile.
I can't work out how to trigger different behaviour based on breakpoints - any ideas would be greatly appreciated. Thanks.
Are you using the dist files or src files?
If you are using the dist files you can simply add this to your css, no extra jquery or js required.
#media (max-width: 992px) {
.sb-sidenav-toggled #sidebarToggle::before {
content: '';
position: fixed;
display: block;
z-index: 0;
top: 0;
left: 225px;
bottom: 0;
right: 0;
}
}
What this does is when the side nav is set to open, there is a class added to the body tag. .sb-sidenav-toggled.
We are also wrapping this using a css media query to make sure we are only on tablets/mobiles (991px below).
Then on the #sidebarToggle button (when open using this parent body class .sb-sidenav-toggled) is creating a fixed pseudo ::before element (which is transparent) which covers the body area you want to be clickable to close side nav.
The magic is, because this pseudo element parent is the sidebar nav button, it means when it is clicked it triggers the standard close side nav event. And when it closes, the .sb-sidenav-toggled body class is removed, in turn removing the pseudo element.
If you are using scss files in the src folder, then you can use the sass below...
#include media-breakpoint-down(md) {
#sidebarToggle {
.sb-sidenav-toggled & {
&:before {
content: '';
position: fixed;
z-index: 0;
display: block;
top: 0;
left: 225px;
bottom: 0;
right: 0;
}
}
}
}
There is a X button on chatango widgets which if user clicks on it, the chat box will disappear and there is no way you can have chat again,
I checked the embed codes guide in chatango room configuration, I found this: "showx Show close button" I insert "showx":0 into my page's script tag, in brackets right the place it should be
{"handle":"eurousd","arch":"js","styles":{"a":"000066","b":62,"c":"000000","bpos":"tl","d":"000000","e":"ffffff","f":62,"h":"ffffff","i":62,"k":"3366ff","l":"3366ff","m":"3366ff","o":62,"q":"3366ff","r":62,"sbc":"bbbbbb","surl":0,"allowpm":0,"fwtickm":1,"pos":"bl","showx":0}}
but still shows that x button :/
do you know how can i remove that?
I created an <a> to overlap the X button:
<a class="bugfix" href="URL TO YOUR CHAT BOX" target="_blank"></a>
Then, this to your CSS:
.bugfix {
width: 25px;
height: 25px;
right: 0%;
background-color: #242731;
position: absolute;
}
Note that your chat needs to have position: relative;. You can do that by wrapping the <script> inside a <div> then you can use CSS.
I have found the technique to customize file input element through putting a regular button in "front of it" and make the file input element with opacity: 0. Like this:
#wrapper {
position: relative;
overflow: hidden;
}
#button-on-top {
width: 200px;
padding: 10px;
}
#file-input-below {
position: absolute;
top: 0;
left: 0;
width: 200px;
padding: 10px;
}
<div id="wrapper">
<button id="button-on-top">Upload</button>
<input type="file" id="file-input-below">
</div>
But why does it actually work that when you click the button "above", the click goes to the real file input button and activates it? Normally, when there's an element "below" another, it doesn't register a click.
Such as with different kinds of overlays where buttons underneath cannot be clicked?
Thank you for an explanation in advance.
HTML files are rendered from top to bottom, so your input field is rendered later. That means if you put absolute to your button the input field slides under it.
But if you put your button below your button will slide under your input field.
If you still want to make it work put to your button an index-z of 1
#button-on-top {
z-index: 1;
}
and your input field should have an lower z-index then your button if you want to make your button clickable
#file-input-below {
z-index: -1;
}
OK, so here's what I'm trying to do (rather a lot more complicated than what you'd guess from the title...) :
My (test) page is : http://83.212.101.132/betdk/home/two
I have integrated this Bootstrap snippet : http://bootsnipp.com/snippets/featured/login-form-with-css-3d-transforms
As you can see, there's the login form on the right side. When you click that gray-ish little triangle at the top right (or left) corner, the form flips.
Now, the thing is :
How can I set some content (centered - e.g. a little icon) INSIDE this gray triangle? (instead of that awkward "sign in -->" thing...)
Tried using content: or something along these lines, but since I'm not such a ... CSS guru, I haven't managed anything.
So,... any ideas?
You can set some content with the :after pseudo-element:
#triangle-topright:after {
content: "A";
position: absolute;
right: 0;
top: 0;
text-indent: 0;
}
#triangle-topleft:after {
content: "B";
position: absolute;
left: 0;
top: -50px;
text-indent: 0;
}
Then you could use an icon font to put an icon in there.
I'm using the twitter bootstrap fluid css to build a cms(Dotnetnuke) skin. The cms displays a control panel which is fixed to the top of the page when an admin is logged in.
This is how it looks like
<div id="dnnCPWrap"> ... </div>
#dnnCPWrap {
width: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: 1001 !important;
}
The bootstrap fluid's menu looks like this
<div class="navbar-fixed-top"> ... </div>
.navbar-fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
As you can see, they both are fixed to the top of the window and since the fluid menu has a higher z-index, it covers the cms's control panel. Question is, is it possible to have them stack on top of each other with the control panel stacked on top?
Note:The cms's control panel is only displayed when an admin is logged in so users don't see it. Thanks
I think the quick solution is to edit here the css:
#dnnCPWrap {
width: 100%;
position: fixed;
left: 0px;
top: 0px; /*PUT THE HEIGHT OF THE USER NAV MENU */
z-index: 1001 !important;
}
With that solution the admin panel is displayed below the nav menu of the user.
If you want to have the admin menu first, I think that you have to overwrite the css of the user menu when you log as admin and edit top:/*HEIGHT OF ADMIN MENU*/
This is the solution I came up with:
New css class:
.navbar-admin-mode {top: 36px;z-index:1000;}
Javascript:
$(document).ready(function() {
var cp = $("#dnnCPWrap")[0];
if (typeof cp !== "undefined") {
$(".navbar-fixed-top").addClass("navbar-admin-mode");
}
});
Since the admin control panel div(#dnnCPWrap) only exists if the user is logged in as admin, the css class is only added to the skin's menu only for admins.
Sorry, can't comment yet. For Dnn 7.2.x the selector should use #ControlBar_ControlPanel instead of #dnnCPWrap to make it work.