I have the following:
#if (Model.PageMeta.Sidebar == PageMetaSidebar.Small) { Html.RenderPartial("_SmallSidebar"); }
and in my include file:
<style "text/css">
#sbr { width: 193px; }
#lft { left: 205px; top: 85px; right: 5px; bottom: 30px; }
#top { left: 215px; top: 85px; right: 15px; }
#btm { left: 215px; right: 15px; bottom: 30px; }
#mdl { left: 215px; top: 85px; right: 15px; bottom: 30px; }
#media print {
div#lft {left:10px; right: 10px; top: 0px;}
div#top {left:20px; right: 20px; top: 0px;}
div#btm {left:20px; right: 20px; }
div#mdl {left:20px; right: 20px; top: 0px;}
}
}
</style>
However this gives me a compile type error:
_SmallSidebar.cshtml(7): error CS0103: The name 'media' does not exist in the current context
Does anyone out there know how I could fix this so it accepts that #media is not something that needs to be evaluated?
You can use ## which razor ignores and prints one #.
Related
I read several places that its a CSS issue but I can't figure out how to fix it.
When a user types information into the website, it does not display any text but the cursor moves as if text was typed.
CSS file
*:focus,
*:hover,
*:active {
outline: none;
}
html {
overflow-x: hidden;
}
body {
margin: 0;
color: #6a6f8c;
background: #fafafa;
font: 600 16px/18px 'Open Sans', sans-serif;
height: auto;
}
*,
:after,
:before {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after,
.clearfix:before {
content: '';
display: table
}
.clearfix:after {
clear: both;
display: block
}
a {
color: inherit;
text-decoration: none
}
.login-wrap {
width: 100%;
margin: auto;
max-width: 525px;
min-height: 1070px;
position: relative;
background: url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
-webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
background-size: cover;
}
.login-html {
width: 100%;
height: 100%;
position: absolute;
padding: 90px 70px 50px 70px;
background: rgba(40, 57, 101, .9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .4s linear;
transition: all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check {
display: none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button {
text-transform: uppercase;
}
.login-html .tab {
font-size: 22px;
margin-right: 15px;
padding-bottom: 5px;
margin: 0 15px 10px 0;
display: inline-block;
border-bottom: 2px solid transparent;
}
.login-html .sign-in:checked+.tab,
.login-html .sign-up:checked+.tab {
color: #fff;
border-color: #1161ee;
}
.login-form {
min-height: 345px;
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.login-form .group {
margin-bottom: 15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button {
width: 100%;
color: #fff;
display: block;
}
.login-form .group .input,
.login-form .group .button {
border: none;
padding: 15px 20px;
border-radius: 25px;
background: rgba(255, 255, 255, .1);
}
.login-form .group input[data-type="password"] {
text-security: circle;
-webkit-text-security: circle;
}
.login-form .group .label {
color: #aaa;
font-size: 12px;
}
.login-form .group .button {
background: #1161ee;
}
.login-form .group label .icon {
width: 15px;
height: 15px;
border-radius: 2px;
position: relative;
display: inline-block;
background: rgba(255, 255, 255, .1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after {
content: '';
width: 10px;
height: 2px;
background: #fff;
position: absolute;
-webkit-transition: all .2s ease-in-out 0s;
transition: all .2s ease-in-out 0s;
}
.login-form .group label .icon:before {
left: 3px;
width: 5px;
bottom: 6px;
-webkit-transform: scale(0) rotate(0);
transform: scale(0) rotate(0);
}
.login-form .group label .icon:after {
top: 6px;
right: 0;
-webkit-transform: scale(0) rotate(0);
transform: scale(0) rotate(0);
}
.login-form .group .check:checked+label {
color: #fff;
}
.login-form .group .check:checked+label .icon {
background: #1161ee;
}
.login-form .group .check:checked+label .icon:before {
-webkit-transform: scale(1) rotate(45deg);
transform: scale(1) rotate(45deg);
}
.login-form .group .check:checked+label .icon:after {
-webkit-transform: scale(1) rotate(-45deg);
transform: scale(1) rotate(-45deg);
}
.login-html .sign-in:checked+.tab+.sign-up+.tab+.login-form .sign-in-htm {
-webkit-transform: rotate(0);
transform: rotate(0);
}
.login-html .sign-up:checked+.tab+.login-form .sign-up-htm {
-webkit-transform: rotate(0);
transform: rotate(0);
}
.hr {
height: 2px;
margin: 60px 0 50px 0;
background: rgba(255, 255, 255, .2);
}
.foot-lnk {
text-align: center;
}
.fullwidth {
width: 100%;
}
.fulheight {
height: 100%;
}
.main {
background: #fafafa;
padding: 15px;
}
.btn__grp button:last-child {
margin-right: 15px;
}
.blank_input_hack {
height: 0;
width: 0;
opacity: 0;
}
.input option {
color: black;
}
#promoForm {
max-width: 600px;
margin: 0 auto;
}
/*.tooltip.ng-scope.ng-isolate-scope.top.fade.in{
word-break: break-word;
}*/
.color-box>div {
display: inline-block;
margin-bottom: 15px;
}
.color-box>div:not(:last-child) {
margin-right: 3px;
}
.color-box>div label {
margin: 0;
padding: 3px;
border: solid 1px #979797;
}
.btn.pull-right {
margin-right: 10px;
}
#user {
text-transform: lowercase;
}
input,
textarea {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
table tr th {
background: #337ab7;
color: white;
text-align: left;
vertical-align: center;
}
The website is https://braindrain.developmentserver.me
I think I have found the solution. Nice tip if you didn't know this, you can plug your iPhone into a Mac via usb and use the web inspector remotely. I found that you have a div before the username input form with the class blank_input_hack. Once I removed this, then the input works flawlessly, styled and all. Not sure why this was there in the first place, but there you go! Hope this helps!
I have this message thread component that has a header, content and a textarea and everytime. The issue here is in mobile views, when I want to type a message the keyboard on IOS (Iphones) pushes the divs up so the header would be hidden, I don't want this behavior, for Android it doesn't behave like this. This app is using React and scss and the code is this:
<div className="message-thread-wrapper d-flex flex-column">
<div className="messages-header d-flex flex-row justify-content-between align-items-center">
<Icon
className="back-btn d-lg-none"
icon="chevron-left"
onClick={(e) => {
e.stopPropagation();
actions.closeMessage();
}}
/>
<h5 className="messages-title text-truncate">
{participant.firstname && participant.lastname ? `${participant.firstname} ${participant.lastname}` : participant.name}
</h5>
<div className="messages-header-right d-flex flex-row align-items-center">
<Icon
className="settings-btn"
icon="settings"
onClick={(e) => {
e.stopPropagation();
this.toggleDeleteMenu();
}}
/>
}
<Icon
className="close-btn-cross d-none d-lg-block"
icon="cross"
onClick={(e) => {
e.stopPropagation();
this.setState(
{isMinimized: false},
actions.closeMessage
);
}}
/>
</div>
</div>
{showDeleteMenu &&
<DeleteMenu onClick={this.archiveMessage} onClickOutside={this.toggleDeleteMenu}/>
}
{
this.renderMessages()
}
<div
className="bottom-actions d-flex flex-row flex-nowrap justify-content-between align-items-center">
<TextArea
ref={ref => this.messageInput = ref}
className="input blue d-block"
name="msgText"
placeholder="Type your message..."
.
.
.
.
autoFocus
/>
<Button
className={`send-btn circle ${IS_SAFARI ? 'safari-fix-button' : ''}`}
icon="paper-plane"
onClick={this.onSendMessage}
/>
</div>
}
</div>
and the scss file:
.message-thread-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0;
z-index: 950;
.messages-header {
padding: 19px 16px 14px 16px;
width: 100%;
flex-basis: 57px;
color: white;
pointer-events: none;
position:sticky;
.back-btn {
pointer-events: auto;
}
.close-btn-cross {
width: 18px;
height: 18px;
pointer-events: auto;
}
.settings-btn {
width: 25px;
height: 26px;
pointer-events: auto;
}
}
.delete-menu {
border-radius: 2px;
background-color: white;
position: absolute;
top: 53px;
right: 0px;
z-index: 1;
.menu-arrow {
width: 15px;
height: 15px;
position: absolute;
top: 0;
right: 0;
background: white;
border-right: none;
border-bottom: none;
}
a {
padding: 18px;
font-size: 16px;
line-height: 1.5;
text-decoration: none;
z-index: 1;
cursor: pointer;
}
}
.messages-content {
height: 100%;
padding: 16px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
.dateline {
margin: 28px 0 11px 0;
line-height: 1.33;
text-align: center;
}
}
.bottom-actions {
bottom: 0;
width: 100%;
max-height: 130px;
min-height: 70px;
overflow-y: hidden;
padding: 0 0 0 24px;
background-color: white;
box-shadow: 0 -1px 3px 0 #d9dbdc;
.form-group-wrapper {
padding-top: 10px;
width: 100%;
align-self: stretch;
overflow: auto;
&.text-area-wrapper {
padding-right: 71px;
textarea {
min-height: 48px;
}
.form-bar {
display: none;
}
}
}
.button.circle {
width: 34px;
height: 34px;
padding: 9px 12px 9px 8px;
position: fixed;
right: 26px;
&.safari-fix-button {
bottom: 22px;
}
}
}
}
Note I deleted the properties that are not important for this question so it won't be too long.
This is how it currently behaves:
Iphone:
Android - Pixel 2XL:
I would appreciate if Any could help me. Thank you in advance!
I wark on my Mobile project and I use jquery mobile library version 1.4.5.
I have this png image:
Here is the CSS:
.ui-icon-measure {
background-image: url(img/length_measure.png);
}
#measureControl {
position: absolute;
left: 10px;
top: 3em;
width: 40px;
z-index: 9999;
}
#measureButton .ui-icon {
width: 30px;
height: 30px;
top: 13px;
right: 13px;
background-color: transparent;
background-position: center;
}
Here is HTML code:
<div id="measureControl" data-role="controlgroup" data-type="vertical">
</div>
Here how it looks in the view:
But I want it to be like that:
Any idea what do I have to change in the code above to get desired view?
The code below will produce this:
.ui-icon-measure:after {
background: url(img/length_measure.png) no-repeat !important;
}
#measureControl a {
padding: 20px;
}
#measureControl {
position: absolute;
left: 10px;
top: 3em;
width: 40px;
z-index: 9999;
border-radius: 13px;
}
I can't seem to get the header and footer to span across a mobile device such as iPhone, and the footer won't stick to the bottom. I've tried a meta code such as this:
My CSS mobile:
#charset "utf-8";
#logo {
left: 5%;
}
#navMenu {
position: relative;
left: 5%;
}
#content {
position: relative;
width: 95%;
height: 600px;
left: 2px;
right: 2px;
}
#footer {
position: fixed;
bottom: 0;
z-index: 5;
}
I've added this to the HTML meta:
meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0 maximum-scale=1.0,
Here is my desktop CSS incase something may override my mobile:
#header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 45px;
z-index: 1;
box-shadow: 0px 0px 0px 1px rgba(82, 82, 82, 0.2);
background-color: rgba(234,234,234,1);
}
#navMenu {
position: absolute;
left: 55%;
top: 55px;
width: 325px;
height: 39px;
z-index: 3;
}
#logo {
position: absolute;
left: 20%;
top: 95px;
width: 300px;
height: 85px;
z-index: 1;
}
#pageLocation {
position: absolute;
right: 20%;
top: 240px;
width: 69px;
height: 25px;
z-index: 5;
color: rgba(50,153,204,0.1);
}
#content {
position: absolute;
right: 20%;
top: 270px;
height: 600px;
width: 60%;
padding: 10px;
margin-bottom: 50px;
z-index: 2;
border-bottom-color: rgba(50,153,204,0.2);
border-bottom-width: thin;
border-bottom-style: solid;
border-radius: 5px;
background-color: rgba(204,204,204,.1);
border-right-width: thin;
border-right-style: solid;
border-right-color: rgba(204,204,204,0.2);
border-left-width: thin;
border-left-style: solid;
border-left-color: rgba(50,153,204,0.2);
box-shadow: 0px .5px .5px .5px #333;
}
#footer {
position: absolute;
alignment: center;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
z-index: 1;
text-align: center;
padding: 2px;
font-size: 12px;
line-height: 2px;
box-shadow: 0px 0px 3px 0px #333;
background-color: rgba(204,204,204,.7);
}
I've tried sticky footer techniques with no luck. I've gotten the footer with this method to stick to the bottom, but it just overlaps content when I scroll back up. Please help, this is very frustrating to get a simple iPhone/android capable footer that sits at the bottom of the page.
I am working on a Wordpress theme that has a parallax effect. On closer inspection, this theme is using the scrollorama script. (http://johnpolacek.github.io/scrollorama/)
When I initially downloaded the theme, the effect worked fine but since I have had to heavily customize this theme, the effect no longer works. The images that should move from A to B when scrolling are now just stuck at A and don't move. Clearly something I have done has put a spanner in the works but having never used scrollorama before, I am unsure what to look for.
I have looked at the original themes code specifically at the scrollorama parts and everything matches perfectly so has anyone got any ideas off the bat that could be causing the issue?
Could it simply be a compatibility problem? The only thing I am using other than scrollorama is an added image slider http://www.menucool.com/responsive-slider.aspx
This should be all the code that is being used for scrollorama:
HTML
<div class="scroll-block-wrapper">
<div class="scrollblock">
<div class="space-small-planet"></div>
<div class="space-jupiter"></div>
<div class="space-moon"></div>
<div class="space-spaceship"></div>
<div class="sky-sun"></div>
<div class="sky-plane"></div>
<div class="sky-clouds-1"></div>
<div class="sky-clouds-2"></div>
<div class="sky-clouds-3"></div>
<div class="sky-clouds-4"></div>
<div class="sky-clouds-5"></div>
<div class="sky-clouds-6"></div>
<!--waves and ship-->
<div class="wave-1"></div>
<div class="wave-2"></div>
<div class="wave-3"></div>
<div class="wave-4"></div>
<div class="wave-5"></div>
<div class="wave-6"></div>
<div class="wave-7"></div>
<div class="ship"></div>
<div class="wave-8"></div>
<div class="wave-9"></div>
<div class="wave-10"></div>
<div class="wave-11"></div>
<div class="wave-12"></div>
<div class="wave-13"></div>
<div class="wave-14"></div>
<div class="water-jellyfish"></div>
<div class="water-fishes"></div>
<div class="water-shark"></div>
</div>
</div>
CSS
.scroll-block-wrapper {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
left: 0;
}
.scrollblock {
position: absolute;
width: 1900px;
left: 50%;
margin-top: -20px;
margin-left: -950px;
}
.space-small-planet {
position: absolute;
top: 600px;
left: 311px;
width: 109px;
height: 108px;
background: url("/img/space-small-planet.png") 0 0 no-repeat;
}
.space-jupiter {
position: absolute;
top: 292px;
left: 67px;
width: 345px;
height: 238px;
background: url("/img/space-jupiter.png") 0 0 no-repeat;
}
.space-moon {
position: absolute;
top: 580px;
right: 39px;
width: 419px;
height: 416px;
background: url("/img/space-moon.png") 0 0 no-repeat;
}
.space-spaceship {
position: absolute;
top: 228px;
right: 238px;
width: 286px;
height: 167px;
background: url("img/space-spaceship.png") 0 0 no-repeat;
}
.sky-plane {
position: absolute;
top: 1510px;
right: -230px;
width: 224px;
height: 98px;
background: url("img/sky-plane.png") 0 0 no-repeat;
}
.sky-clouds-1 {
position: absolute;
top: 838px;
left: 293px;
width: 327px;
height: 106px;
background: url("img/sky-clouds-1.png") 0 0 no-repeat;
}
.sky-clouds-2 {
position: absolute;
top: 970px;
right: 46px;
width: 677px;
height: 171px;
background: url("img/sky-clouds-2.png") 0 0 no-repeat;
}
.sky-clouds-3 {
position: absolute;
top: 1632px;
left: 129px;
width: 605px;
height: 135px;
background: url("img/sky-clouds-3.png") 0 0 no-repeat;
}
.sky-clouds-4 {
position: absolute;
top: 1950px;
left: 60px;
width: 253px;
height: 81px;
background: url("img/sky-clouds-4.png") 0 0 no-repeat;
}
.sky-clouds-5 {
position: absolute;
top: 2220px;
left: 149px;
width: 346px;
height: 253px;
background: url("img/sky-clouds-5.png") 0 0 no-repeat;
}
.sky-clouds-6 {
position: absolute;
top: 2380px;
right: 192px;
width: 215px;
height: 104px;
background: url("img/sky-clouds-6.png") 0 0 no-repeat;
}
.sky-sun {
position: absolute;
top: 1800px;
right: 80px;
width: 876px;
height: 871px;
background: url("img/sky-sun.png") 0 0 no-repeat;
}
.water-jellyfish {
position: absolute;
top: 5090px;
right: 168px;
width: 235px;
height: 257px;
background: url("img/water-jellyfish.png") 0 0 no-repeat;
}
.water-fishes {
position: absolute;
top: 5114px;
left: 33px;
width: 481px;
height: 679px;
background: url("img/water-fishes.png") 0 0 no-repeat;
}
.water-shark {
position: absolute;
top: 5096px;
left: 50%;
margin-left: -309px;
width: 617px;
height: 932px;
background: url("img/water-shark.png") 0 0 no-repeat;
}
/*waves*/
.wave-1 {
position: absolute;
top: 3084px;
left: -200px;
right: -200px;
height: 32px;
background: url("img/waves/wave1.png") 0 0 repeat-x;
}
.wave-2 {
position: absolute;
top: 3101px;
left: -200px;
right: -200px;
height: 39px;
background: url("img/waves/wave2.png") 0 0 repeat-x;
}
.wave-3 {
position: absolute;
top: 3119px;
left: -200px;
right: -200px;
height: 62px;
background: url("img/waves/wave3.png") 0 0 repeat-x;
}
.wave-4 {
position: absolute;
top: 3156px;
left: -200px;
right: -200px;
height: 67px;
background: url("img/waves/wave4.png") 0 0 repeat-x;
}
.wave-5 {
position: absolute;
top: 3199px;
left: -200px;
right: -200px;
height: 82px;
background: url("img/waves/wave5.png") 0 0 repeat-x;
}
.wave-6 {
position: absolute;
top: 3244px;
left: -200px;
right: -200px;
height: 83px;
background: url("img/waves/wave6.png") 0 0 repeat-x;
}
.wave-7 {
position: absolute;
top: 3302px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave7.png") 0 0 repeat-x;
}
.wave-8 {
position: absolute;
top: 3362px;
left: -200px;
right: -200px;
height: 92px;
background: url("img/waves/wave8.png") 0 0 repeat-x;
}
.wave-9 {
position: absolute;
top: 3424px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave9.png") 0 0 repeat-x;
}
.wave-10 {
position: absolute;
top: 3493px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave10.png") 0 0 repeat-x;
}
.wave-11 {
position: absolute;
top: 3562px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave11.png") 0 0 repeat-x;
}
.wave-12 {
position: absolute;
top: 3643px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave12.png") 0 0 repeat-x;
}
.wave-13 {
position: absolute;
top: 3716px;
left: -200px;
right: -200px;
height: 122px;
background: url("img/waves/wave13.png") 0 0 repeat-x;
}
.wave-14 {
position: absolute;
top: 3795px;
left: -200px;
right: -200px;
height: 190px;
background: url("img/waves/wave-last.png") 0 0 repeat-x;
}
.ship {
position: absolute;
top: 3085px;
right: 100px;
width: 317px;
height: 330px;
background: url("img/ship.png") 0 0 no-repeat;
}
It was some odd issue related to fancybox. I removed the fancybox plugin then re-added and the images are now animated. Strange!