I am writing a mobile app and my upper right corner contains a function button. I need to move the status widget to the lower right button in order to access all the functionality on the page.
The easiest way I found was to add following CSS to my header:
<style type="text/css">
#velocity-status-widget {
top: initial;
bottom: 0px;
transform: translate(50%, 50%) rotate(45deg)
}
</style>
the key part is the top: initial in order to reset the value
Related
I want to move my hamburger menu icon, on mobile, to the right side of the screen. Currently it resides on the left. However, any attempt to do so with relative/absolute positioning moves the site title out of view (and makes the nav bar buggy). I can’t find a way to make things play nicely. Can anyone suggest a way to do this?
My site: www.tylercharboneauprofessional.com
remove left: .5em; and add right:0;
Fix css below:
#media only screen and (max-width: 640px)
{
.banner-content-page-title-description #mobile-navigation-label,
.banner-content-empty #mobile-navigation-label {
position: absolute;
top: .75em;
/* left: .5em; */
right: 0;
}
}
I am unsing the application layout in an application where there is no footer. Is there a way to get the lotusColLeft (or/and lotusColRight) to be the same length as the lotusContent div? The users are complaining a bit on the fact that the left menu's background color doesn't go all the way to the bottom of the page.
You can use Firebug or some other CS debugger to see the CSS for the left pane and the content pane and see if you can tweak the CSS (maybe try 100% for the height).
You may end up having to get the height of the content div and then set the left div to the same height in CSJS onClientLoad. You will also have to use the same code in a window resize event in case the user changes the browser window size.
Howard
OK, here is how I finally made this happen: I used a background image. Not ideal, I agree, but less problemeatic than the original solution (at the bottom of this answer):
.lotusContent {
background: url(leftColBkgd.png) repeat-y;
}
.lotusColLeft {
background-color: grey;
position: absolute;
z-index: 10;
}
.lotusMain .lotusContent {
padding-left: 230px;
}
Original solution:
.lotusColLeft {
background-color: grey;
min-height:2048px;
position: absolute;
z-index: 10;
}
.lotusMain .lotusContent {
padding-left: 230px;
}
i'm trying to make up a different look and feel on my sharepoint site. I try to make my main content's width down to 960px under my form tag in sharepoitn designer. when I refresh the page at the first it renders the main content down to 960px but when the page fishished loading the main content stretches itself to the whole screen's width.
I found out that it's because of the onload script running in body tag. but I caanot remove this script because this work has side effects on page functionality.
the function is _spBodyOnLoadWrapper().
does anyone know this function ? or does anyone know how to come up with this problem ?
UPDATE #1:
My css code is as follows.. I added this class to the main Form on master page:
.mainContent
{
width: 960px;
height:100% !important;
min-height:100% !important;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
direction:rtl;
}
UPDATE #2:
I use v4.master template.
I have taken the ribbon out of the form tag. it's directly after body tag. because I wanted the ribbon to be streched at the top. but when i add this line of code
<body onload="if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();">
the mainContent blows up. something at the header streches in the whole width and some panels at bottom remains 960px.
you got me interested so I recreated your issue. By default, the javascript will try to inline the width based on its calculations.
However, what you need is to set the class s4-notsetwidth on a wrapping container.
Here is what i did to fix your issue
Add this to the head
<style type="text/css">
#s4-bodyContainer {
width: 960px;
height:100% !important;
min-height:100% !important;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
}
/* Aligns the Top Bars */
.ms-cui-ribbonTopBars {
width: 960px!important;
margin-left:auto;
margin-right:auto;
}
/* Turns off the border on the bottom of the tabs */
.ms-cui-ribbonTopBars > div {
border-bottom:1px solid transparent !important;
}
</style>
Then locate the s4-workspace (that's the immediate parent of #s4-bodyContainer and add class s4-nosetwidth. That should work for you.
Use these two references to achieve exactly what you want (not sure if you want ribbon aligned or not), Randy Drisgill post and Tom Wilson's post.
My content scrolls beneath the left sidebar instead of disappearing when it reaches the sidebar. Both the left sidebar and the bottom footer are fixed.
http://karpouzaki.com/finaltouch/
Any suggestions?
You need to change your background from transparent to opaque. Add these styles:
#sidebar {
background: url(../img/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
height: 100%;
z-index: 1;
}
#footer {
z-index: 2;
}
That should do it - it gives your sidebar the same image background, but it looks like it flows fine into the rest of the page. It extends the height of your sidebar so that the rest of the content scrolls "beneath" it. And the z-index changes cause the sidebar to be above the content but below the footer.
How can I get an image button with hover effect? I have two button images one is simple and the other one is for the hover?
You can easily do it in CSS.
input[type='button']:hover
{
color: #00a;
//or background-image: url("url");
}
You can do it easily with css by using a sprite image and moving the background image depending if its hovered or not.
css:
a { display:block; width: 80px; height: 40px; background: url(bgImage.png) top;
a:hover { background: url(bgImage.png) bottom; }
You have to combine your "simple" and "hover" image into a single image for this to work.