I have been working on building my first CSS site using divs and am having an issue with a button. While I am able to get the button to work on rollover, the link does not respond. Can somebody please advise. Thank you.
HTML:
<div class="wrapArrow">
<div class="arrow" style="cursor: pointer;"><span>home</span></div>
</div><!-- END wrapArrow -->
CSS:
.wrapArrow {
margin: 70px 0 0 0;
padding: 0;
width: 20px;
height: 20px;
float: right;
}
.arrow {
display: block;
width: 20px;
height: 20px;
background-image: url(../images/nav/arrows.gif);
background-repeat: no-repeat;
}
.arrow:hover {
background-position: 0 -20px; }
.arrow span {
display: none; }
Since your <span> is not displayed, your link has no content, so it gets collapsed to a width and height of 0, thus making it unclickable.
Why not just make the anchor itself have the arrow class?
<div class="wrapArrow">
<span>home</span>
</div><!-- END wrapArrow -->
.arrow a is 0 x 0 px
Makes it really hard to click. Believe me I tried.
Try:
.arrow a {
width: 100%;
height: 100%;
display: block;
}
It looks like you need to get rid of
.arrow span {
display: none;
}
Is there any reason that needs to be there? With display set to none you are hiding the clickable element that is necessary for the link to work.
Related
I'm having an issue with a fixed menu on iOS 10 Safari where the button sometimes becomes unclickable after scrolling. From debugging, the best I can tell is that the menu button's position isn't always updated properly after the scroll.
position bug screenshot
Sometimes it takes several clicks for the button to become responsive, and occasionally it forces the screen to scroll or zoom before the menu will open.
The issue only seems to be occurring on iPhone 7 using Safari, from what I've seen, but it may be present somewhere else I haven't found yet.
I've created a simplified version of the page with the issue here: http://meghandove.com/test.html
jQuery(document).ready(function() {
jQuery('a.menu-trigger').click(function(e) {
e.stopPropagation();
e.preventDefault();
if (jQuery('.menu').hasClass('menu-open')) {
jQuery('.menu').removeClass('menu-open');
jQuery('.menu').addClass('menu-close');
} else {
jQuery('.menu').removeClass('menu-close');
jQuery('.menu').addClass('menu-open');
}
});
});
body {
padding-top: 60px;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #FFFFFF;
transform: translate3d(0, 0, 0);
}
header .menu-trigger {
padding: 20px;
display: block;
text-align: center;
}
.menu ul {
height: 100%;
background: #FFFFFF;
margin: 0;
padding: 30px 0 0;
list-style: none;
position: fixed;
top: 50px;
right: 0;
}
.menu ul li,
.menu ul li a {
display: block;
}
.menu ul li {
display: none;
opacity: 0;
}
.menu.menu-open ul li {
display: list-item;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<header class="navbar">
<span>Menu</span>
<nav class="menu">
<div class="menu-ul">
<ul>
<li class="menu-item">About</li>
<li class="menu-item">Something</li>
<li class="menu-item">Something Else</li>
</ul>
</div>
</nav>
</header>
How to change chart's width to fill up div when hide/open left side nav menu using angular2-highcharts??
I tried to use style="display:block; width: 100% !important;" as recommended on most resources I found, but it didn't help.
Here is an example of using chart inside mat-sidenav-container and mat-sidenav-content:
Html
`<mat-sidenav-container class="sidenavContainer">
<mat-sidenav #sideNav opened="true" mode="side" class="filters-viewer-sidenav">
mat-sidenav
</mat-sidenav>
<mat-sidenav-content>
mat-sidenav-content
<button (click)="sideNav.toggle()">
mat-sidenav-button
</button>
<div style="width: 100%; height: 100%">
<chart [options]="options" style="display:block; width: 100% !important;"></chart>
</div>
</mat-sidenav-content>
</mat-sidenav-container>`
css
`html, body, mat-sidenav-container, .chart-wrapper {
margin: 0;
width: 100%;
height: 100%;
}
.sidenav {
width: 240px;
height: 100%;
box-shadow: 3px 0 6px rgba(0,0,0,.24);
}`
Added also screenshot: after I close left side nav menu, chart width stays the same.
still_same_chart_width_size
One of the solution was to delay rendering of the chart. I used ngAfterViewInit() lifecycle hook:
ngAfterViewInit() {
setTimeout(() => {
if(this.chart) {
this.chart.reflow();
}
},100);
}
This can be done with css
chart {
width: 100% !important;
margin: 0 auto;
display: block;
}
Check https://github.com/gevgeny/angular2-highcharts/issues/11
I´m using the JQUERY UI Accordion with full height and width.
All ok with that. But, when I try to put a DIV (cover) above all, it appears BEHIND the accordion. I tried all (all I can or know) and more, but nothing happened. The same result.
Example:
For Style
#cover{
position: absolute;
top: 123px;
width: 100px;
height: 100px;
background-color: red;
}
For HTML
<body>
<div id="cover"></div>
...
THE REST
...
Anyone had this problem or know HOW TO fix it?
Thanks you!
Try adding z-index
#cover{
position: absolute;
top: 123px;
width: 100px;
height: 100px;
background-color: red;
z-index: 10000;
}
On the other elements that are going to be behind it you can make their z-index lower.
I have a vetical flex box container with two flex boxes. Te bottom one is fixed size and the top one takes up the rest of the space. This works great.
<div id="outer">
<div id="A">
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
</div>
<div id="B"></div>
</div>
CSS:
body, html{
width: 100%;
height: 100%;
}
#outer{
width: 100%;
height: 100%;
background: yellow;
display: flex;
flex-direction: columN
}
#A{
height: 20px;
max-height: 100%;
width: 100%;
flex: 2;
background: #cccccc;
overflow: auto;
}
#B{
height: 200px;
width: 100%;
background: blue;
}
JS:
$("#B").resizable({
handles: "n"
});
I i now make the bottom one resizable with jquery ui i get a strange behaviour. For some reason jquery ui not only sets the size (height) of the bottom container but also the "top" property.
Is there anything i can do to keep resiable from setting this top property?
http://jsfiddle.net/t6B2e/8/
Your jQuery set your element in absolute position.
you can test and find out using !important to override some of the CSS set by jQuery: http://jsfiddle.net/t6B2e/9/
#B{
height: 200px;
width: 100%;
background: blue;
/* overrides any inline style or javascript style */
position:relative!important;
bottom:0!important;
top:auto!important;
}
I'm having some difficulty getting my website to display properly when viewed on the iPhone and iPad. The website displays properly when viewed on every desktop browser I've tried (safari, chrome, firefox), however, on the iPhone/iPad there is a tiny gap/space between the IMG and right box.
It works fine in Firefox. What is the problem?
Here's an inline link to JsFiddle.
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/>
<div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
#wrapper {
border-top: 8px solid #457b91;
max-width: 488px;
margin: 0 auto;
overflow: hidden;
}
#wrapper img {
width: 32%;
float: left;
}
#subject {
background-color: green;
float: right;
width: 68%;
padding-bottom: 32%;
position: relative;
}
#subject_wrapper {
padding-top: 12%;
position: absolute;
height: 100%;
width: 100%;
}
#subject span {
font-family: Thonburi;
font-size: 34px;
color: #ffffff;
display: block;
padding: 0 20%;
}
#subject span:nth-child(2) {
font-size: 18px;
line-height: 8px;
}
I don't have an iPd or iPhone to hand to check this, but try commenting out the space between your elements, thus:
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/><!--
--><div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
It's a pretty ridiculous fix, but it work for inline block elements, like menus made up of LIs.