I have a site I created: http://www.raggeddaisy.com
On my Wooden Signs pages and Chalkboards pages, the 'Request More Information', only the top little bit of the button is clickable. The code is the same as my Magnetic Board and Wooden Benches pages. Why would this be? Thanks in advance for your help.
<div id="requestInfoButton">
<form action = "ContactUs.cshtml">
<input type="submit" class="button" value="Request More Information">
</form>
</div>
#requestInfoButton {
font : 10pt 'Century Gothic';
padding-top : 2.25pt;
position : absolute;
left : 500.00pt;
top : 400.50pt;
width : 150pt;
height : 16.50pt;
}
That's because your div with id 'optionsWoodenSignLargePrice' is covering it. I wouldn't advice the styling you've used for just the text and especially the absolute positioning.
However, removing the width and height attributes from the div#optionsWoodenSignLargePrice styles does solve your problem.
It looks like you have two divs that are absolutely positioned with a fixed width that cover the majority of that request more info button. If you remove the width on div#optionsWoodenSignSmallPrice and div#optionsWoodenSignLargePrice your button will be clickable.
Related
PrimeNG DataTable provides a [scrollable] property to define vertical and/or horizontal scrolling. This has to be used with a combination of a set scrollHeight and/or scrollWidth.
How can I have a table that will adjust to whatever the height/width of the window along with maintaining the scrollable feature?
Here is the code I've tried:
<div class="ui-g-12">
<p-dataTable class="ui-g-12" [value]="rows" [hidden]="this.apiService.spinnerIsVisible"
[style]="{ height: 'fit-content', 'margin-top': '10px' }"
[resizableColumns]="false" columnResizeMode="fit" emptyMessage="No records found"
[responsive]="false"
[globalFilter]="tableSearch"
[editable]="true"
[scrollable]="true" scrollHeight="100%" scrollWidth="100%">
<p-header>
<button pButton type="button" icon="fa-refresh" (click)="refresh()" style="float:left"></button>
<label for="tableSearch">Global search: </label>
<input id="tableSearch" #tableSearch type="text" placeholder="type here">
</p-header>
<p-column
*ngFor="let col of cols" [header]="col" [field]="col"
[style]="{'width': '250px', 'min-width': '50px', 'word-wrap': 'break-word'}"
[sortable]="true"
[filter]="true" filterPlaceholder="" filterMatchMode="contains"
[editable]="true">
</p-column>
</p-dataTable>
</div>
But it only solves the responsive width problem. On the screenshot you can se the table which is horizontally scrollable:
Since the height attribute of the p-dataTable is relative to parent in case of percentage value, I've tried to make the parent div to fit content by adding style="height: 100%" to the parent div. Here is the updated code:
<div class="ui-g-12" style="height: 100%">
<p-dataTable class="ui-g-12" [value]="rows" [hidden]="this.apiService.spinnerIsVisible"
[style]="{ height: 'fit-content', 'margin-top': '10px' }"
[resizableColumns]="false" columnResizeMode="fit" emptyMessage="No records found"
[responsive]="false"
[globalFilter]="tableSearch"
[editable]="true"
[scrollable]="true" scrollHeight="100%" scrollWidth="100%">
<p-header>
<button pButton type="button" icon="fa-refresh" (click)="refresh()" style="float:left"></button>
<label for="tableSearch">Global search: </label>
<input id="tableSearch" #tableSearch type="text" placeholder="type here">
</p-header>
<p-column
*ngFor="let col of cols" [header]="col" [field]="col"
[style]="{'width': '250px', 'min-width': '50px', 'word-wrap': 'break-word'}"
[sortable]="true"
[filter]="true" filterPlaceholder="" filterMatchMode="contains"
[editable]="true">
</p-column>
</p-dataTable>
</div>
I also applied following changes to my styles.scss file to make it work (found this in some other question on stackoverflow):
html, body {
height: 100%;
}
But it also didn't work for me:
On the screenshot the height seems to be right, but it is not. When I scroll down, firstly, it goes as it should, but then when close to the end of the table, the scroll bar comes out of the view so I can't see it while I'm still able to scroll. So seems like the datatable is little bit higher than it should be.
So how do I solve this? Any help would be appreciated!
I use this at p-table (not sure if will work on p-datatable).
[scrollHeight]="'calc(100vh - 204px)'"
I don't know if this fits exactly your case, but I solved my issue by setting the scrollHeight datatable property to:
scrollHeight="50vh"
vh refers to:
vh Relative to 1% of the height of the viewport
Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.
You can test different values of the vh and see what fits better.
more on:
https://www.w3schools.com/cssref/css_units.asp
You can get inner height and inner width in ts file like
setInnerWidthHeightParameters()
{
this.innerWidth = window.innerWidth;
this.innerHeight = window.innerHeight * 0.70;
}
and use it as
[scrollHeight]="innerHeight +'px'"
to set it dynamically, it worked for me.
for other who search similar problems, i solve them this way:
mark PARENT div in template with (for example) #leftSidebar
in component use view child :
#ViewChild('leftSidebar', { static: true }) leftSidebar: ElementRef;
you can access it and get position and size like this:
let rect: any = this.leftSidebar.nativeElement.getBoundingClientRect();
let x: number = rect.x;
let y: number = rect.y;
let width: number = rect.width;
let height: number = rect.height;
you can do like Arthur described above and set:
[scrollHeight]="height+'px'"
My story:
Since version 9.1.0, the component is automatically rebuilt depending on the size of the window. But in my case, there were no changes to the window size, but there were changes to the dom tree, since additional elements were removed.
My solution:
scrollHeight='flex';
It didn't help me, because I had a specific pagination that was tied to the scroll, in the end I just, when changing the dom, additionally called the resize event.
setTimeout(() => window.dispatchEvent(new Event('resize')));
Prime NG table introduced flex mode for viewport height adjustment
scrollHeight="flex"
It will take the full height of parent element.
ScrollHeight needs to be 100%.
Using w3css with a pinned navbar (ie enclosed in a with class w3-top) how can I know the height of the navbar (which will vary with screen size) so I can leave this much space at the top of my non-pinned content so the navbar doesn't overwrite content?
My best solution so far is to duplicate the navbar in javascript and insert that at the top of the page without the w3-top class so that there is a hidden element which is always the same size at the top of the page.
...
<div id="pinned_nav" class="w3-top">
<ul class="w3-navbar w3-light-grey w3-border">
<li>
...
<script type="text/javascript">
//Duplicate the nav without pinning it to the top - this means that the other content will adjust to height of pinned nav
var nav = document.getElementById("pinned_nav");
var nav_copy = nav.cloneNode(true);
nav_copy.classList.remove("w3-top");
nav.parentElement.insertBefore(nav_copy, nav);
</script>
...
Since this seemed less error prone than just copy and pasting the HTML block.
But it's still rather clunky and I just wondered if there was a simpler way I was missing.
Other questions like this one which are not w3css specific suggest using a fixed margin to skip a pinned toolbar but I can't see how to determine this margin height with a responsive navbar.
You could use a Javascript script to get the height and append it however you want to use it.
function getHeight() {
var nav = document.getElementById("pinned_nav");
var nav_height = nav.offsetHeight; //append this var where you need to.
alert(nav_height);
};
window.onload = getHeight();
window.onresize = getHeight(); //edit, added for if you resize the page
#pinned_nav {
height: 100px;
/*as example */
background-color: red;
}
<div id="pinned_nav" class="w3-top"></div>
EDT
Added resize event subscription.
I want to relocate my bootstrap popover in the left side, i.e. I want to move the whole popover in the left side, while the white arrow would stay in one place.
I would like to have the effect which is on google.com website, when you click blue icon you see popover but its content is relocated while the white arrow is located under the user.
I know that I can use something like this:
.popover {
top:0 !important;
margin-top:10px;
}
Unfortunately, it relocates the whole popover altogether with white arrow.
What I have now (popover is on the right side and there's no place between screen edge and my popover)
What I want to have (small distance between popover and monitor's edge):
“I want to change the position of content of this popover so that this
arrow will be placed further on the left„
When the popover is shown the arrow position is calculated in Tooltip.prototype.replaceArrow based on width/height and placement. You can force a specific position with this CSS :
.popover .arrow {
left: 90px !important; /* or 45% etc */
}
But that will affect all popovers. Popovers is injected and removed to and from the DOM, and there is by default no way to target visible popovers individually. If you want to style the arrow on a specific popover, a workaround is to hook into the shown.bs.popover event, detect which popover that is being shown, and style the arrow for that popover if needed. Example :
.on('shown.bs.popover', function() {
var $popover = $('.popover')[0];
switch ($(this).attr('id')) {
case 'a' : $popover.find('.arrow').css('left', '10px');break;
case 'b' : $popover.find('.arrow').css('left', '40%');break;
case 'c' : $popover.find('.arrow').css('left', '180px');break;
default : break;
}
})
To get this to work, there must be only one popover shown at a time (see fiddle). It can be worked out with multiple visible popovers also, but then we need to add some HTML to the popover content.
see demo -> http://jsfiddle.net/uteatyyz/
As what I have understood so far, you want to achieve the popover to the left of the button.
Please check this Plunker Link
HTML Code:
<div class="pull-right">
<button type="button" mypopover data-placement="left" title="title">Click here</button>
</div>
Angular Code:
var options = {
content: popOverContent,
placement: "bottom",
html: true,
date: scope.date,
trigger: 'focus'
};
I have edited the answer as per the images that you have shown.
If this is not is answer, then please comment below.
Regards D.
I have a responsive fluid design portfolio with 3 columns. Something is wrong with the CSS that I am having trouble pinpointing.
If I have exactly 3 items on a row, it appears fine. However, if the last item ends on a line with only 1 or 2 columns, then the whole format gets distorted. This can be seen by resizing the browser.
If you can help me pinpoint the CSS fix for this, I will appreciate it GREATLY.
The example page is here: http://bit.ly/KzfN2g
I believe this is the main css style that is the culprit of the problem, however I could be wrong:
.mosaic-block-three {
margin-right:3%;
width:29.3%;
background:url("../img/progress.gif") no-repeat scroll center center #F5F5F5;
border:1px solid #FFFFFF;
box-shadow:0 0 4px 0 #888888;
float:left;
margin:10px 40px 30px 0;
overflow:hidden;
position:relative;
width:291px;
}
whoa, holy registered trademark batman! i would put a
<sup>®</sup>
if i were you :) but to the question at hand...
why do you have so many lists with only one item? you've also got some styles in there that aren't defined, but i think your biggest problem is that you have items within
<li>
that are floated while the containing elements are not.
try floating .portfolio-three-item then clearing the contents within it. having floated elements inside non-floated elements (without using a clearing class or
<br clear="all" />
confuses the browser and it doesn't look as though any of the contents need to be floated.
I was able to accomplish this using simple jQuery to get the height of the image on page load and declare the height in css, then get the height of the image on window resize and redeclare it in css
$j(document).ready(function() {
// Set portfolio image item height after images load,
$j(".mosaic-backdrop img").load(function(){
var portfolioItemHeight = $j(".mosaic-backdrop img").height();
$j(".portfolio-three-item").css("height", portfolioItemHeight);
});
// reset portfolio image item height each time window is maximized
if(screen.width > 1200) {
$j(".mosaic-backdrop img").load(function(){
var portfolioItemHeight = $j(".mosaic-backdrop img").height();
$j(".portfolio-three-item").css("height", portfolioItemHeight);
});
}
// reset portfolio image item height each time window is resized
$j(window).resize(function() {
var portfolioItemHeightReized = $j(".mosaic-backdrop img").height();
$j(".portfolio-three-item").css("height", portfolioItemHeightReized);
});
});
Thank you, #kristina childs, for helping me realize it was that the height was not set properly!
In my page I use ajax loader gif. When the button is clicked the ajax loader is shown, however the text below it moves to upwards and I want them to be constant I mean not to move.
Is there a way to do this? Thanks for help.
It can be seen from here as well:
http://www.dilyurdu.com
function AjaxLoader()
{
document.getElementById("translation").innerHTML="<img src='ajax-loader.gif' />"
$.ajax({
type: "POST",
url: "test1.php",
success: function(response) {
$("#translation").html("hello");
}
});
}
<div class="informationArea">
<h2><span id="infoaream">caballo</span></h2>
<div id="wordDetailArea">
<h2>Translation:</h2><p><span id="translation">dog</span></p>
<h2>Context:</h2><p><span id="context">I have got a dog.</span></p>
</div>
</div>
This is because the height of <p> tag changes according to its content.
The fix is to use a fixed height.
<p style="height: 25px;"><span id="translation">dog</span></p>
Note: As of ajax request the length of your content may not be consistent. So you should choose a highest value for height
What happens is that your #translation span has a height of 18px, however the ajax-loader.gif has a height of 16px causing the jump, spans and p are inline elements and expand and contract depending on the information that's in them
<div id="translation" style="height: 18px;">hello</div>
or
<span id="translation" style="display:block;height: 18px;">hello</span>
should do the trick.