I have a dynamic p-table with columns that auto-adjust their sizes. I also want the table header to stick in place when scrolling a page. In my current attempt, setting the autoLayout property to true and making table header sticky don't work simultaneously.
Is there a way I can make the table header stick and at the same time maintain the autoLayout property?
Inside the p-table tag in the HTML file, I have [autoLayout] ="true"
And I have this is #Component:
styles: [`
:host ::ng-deep .ui-table .ui-table-thead {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
#media screen and (max-width: 64em) {
:host ::ng-deep .ui-table .ui-table-thead {
top: 0px;
}
}
`]
Related
I currently have my header sticky but of some reason it has an opacity. I want it to be relative and sticky but I can't assign both to the header.
This is what I have:
.header {
height: 80px;
padding: 0px;
background-color: #007eb6;
position: sticky;
top: 0;
}
Use the z-index property to stack your div on top of everything with the position: sticky,
if you mean that you want your header to scroll down with you when you're scrolling, then you're looking for position: fixed.
And for the opacity part, it's most likely your header is inside a div which has the opacity property, so check that as well or get your header div out of it.
Hope this helps.
.header {
height: 80px;
padding: 0px;
background-color: #007eb6;
z-index: 99;
position: sticky;
top: 0;
}
<div class="header"> header here</div>
<div>here's another content</div>
It's hard to understand what you want to achieve, so I apologize if this isn't quite what you hope to find.
I tried this:
https://playcode.io/1038441
Here, you see 'Moo' has your styling, and it isn't transparent or translucent. So, I suspect you have another style that's introducing that. You might check to see what your element has inherited, or you might explicitly set your .header to have an opacity of 1 (.header{ opacity: 1;})
As you scroll the blathering text, it scrolls under the 'Moo' header, which is what sticky does.
It can be 'relative' in the sense that you could give a 'top' of 10px, and it will be offset from the top by 10px, but still 'sticking' to the location.
I am working on location picker inside modal popup using Bootstrap3 CSS and JQuery location picker. Normally Bootstrap3's modal body size expands if content needs it.
What I need to do is to force modal to have relative to screen size because initial DOM content is empty and is filled via JQuery (Google maps initialization).
The problem is, that when setting relevant divs to have style= height:100%, body is overlapping its parent with the exact height of its sibling modal headers div.
How to prevent such behaviour and make modal body fill free space and not overlap parent component?
Here is working example
https://jsfiddle.net/qfqjq82r/
Ok after some consulting I have found the workaround/answer.
The trick was to threat divs like table and table rows. After adding some additional styling, dialog looks exactly like it should.
https://jsfiddle.net/qfqjq82r/7/
And the css:
#location-picker .modal-content {
display: table;
width: 100%;
}
#location-picker .modal-dialog{
width: 80%;
height: 85%;
}
#location-picker .modal-body{
height: 100%;
display: table-row;
width: 100%;
}
#location-picker .row{
padding:15px;
}
.full-height{
height: 100%;
}
Simple question, how do I set up a page overlay (just a semi-transparent black cover) so that it's 100% of the viewport's height and width, including scrollbars?
I've already tried:
body{
background-image:url(../pictures/background2.png);
background-position:top;
background-size:100% 100%;
background-repeat:no-repeat;
margin:0;
border:0;
height:100%;
}
/*Loading*/
#loadingoverlay {
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.7);
filter:alpha(opacity = 80);
top:0;
bottom:0;
z-index:99;
}
It only covers the viewport without scrollbars. In other words the moment I scroll down, the content below one screen height doesn't get covered by the overlay.
Obviously this won't work either:
/*Loading*/
#loadingoverlay {
position: absolute;
height:9999px;
width:9999px;
background-color: rgba(0,0,0,0.7);
filter:alpha(opacity = 80);
top:0;
bottom:0;
z-index:99;
}
As that just stretches the viewport into 9999x9999.
The scrollbar is not a part of the "viewport". You're styles and javascript have domain over the viewport but not the scroll bar. You can turn off scroll bars but you can not have an overlay go over it. It's possible to do windowless Flash but that's not an implementation you want.
I want to create a sticky header bar for a website just like the sticky header on this website (http://www.fizzysoftware.com/) if any on can can help me out with coding or any resource that helps me to create the same. Your reply would be of great help to me.
In your CSS, add
position: fixed;
to your header element. It's just that simple, really.
And next time, try to use right click on something you see on website and choose "Inspect element". I think that every modern browser has it now. Very useful function.
If you want to make it sticky when it's scroll down to a certain point then you can use this function:
$window = $(window);
$window.scroll(function() {
$scroll_position = $window.scrollTop();
if ($scroll_position > 300) { // if body is scrolled down by 300 pixels
$('.your-header').addClass('sticky');
// to get rid of jerk
header_height = $('.your-header').innerHeight();
$('body').css('padding-top' , header_height);
} else {
$('body').css('padding-top' , '0');
$('.your-header').removeClass('sticky');
}
});
And sticky class:
.sticky {
position: fixed;
z-index: 9999;
width: 100%;
}
You can use this plugin and it has some useful options
jQuery Sticky Header
CSS already gives you the answer. Try this out
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
now add the class sticky to any menu sidebar or anything you want to stick to the top and it will automatically calculate the margin and stick to the top. Cheers.
If you want simplicity in a HTML and CSS option to create a Stiky NavBar you can use the following:
Just create a navbar like this one:
<nav class="zone blue sticky">
<ul class="main-nav">
<li>About</li>
<li>Products</li>
<li>Our Team</li>
<li class="push">Contact</li>
</ul>
</nav>
Remember to add the classes in this case I created a Zone (to separate my HTML in specific areas I want my CSS to be applied) blue (just a color for the nav) and sticky which is the one that gonna carry our sticky function. You can work on other attributes you want to add is up to you.
On the CSS add the following to create the sticky; first I am gonna start with the zone tag
.zone {
/*padding:30px 50px;*/
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
now with the sticky tag
.sticky {
position: fixed;
top: 0;
width: 100%;
}
Position fixed meaning it will always be in the same position; and with top 0 I will always be at the top and a 100% width so it covers the whole screen.
And now the color to make our navbar blue
.blue {
background: #7abcff;
You can use this example to create a sticky navbar of yours and play around with the CSS properties to customize it to your liking.
Try This
Add this style to the corresponding
style="position: fixed; width: -webkit-fill-available"
OR
<style>
.className{
position: fixed;
width: -webkit-fill-available;
}
</style>
How to make DOJO CheckedMultiSelect text wrapped and how to enable horizontal scrolling in the same control, if the select text is larger that the control size
All you need is to overwrite CSS rules. See working example at jsFiddle: http://jsfiddle.net/phusick/qrSWu/
For both of your needs you need to limit the width of dojox/form/CheckedMultiSelect. It can be done adding narrow class to the markup <select data-dojo-type="dojox/form/CheckedMultiSelect" class="narrow"> or JavaScript (via className):
.narrow .dojoxCheckedMultiSelectWrapper {
width: 100px;
}
For horizontal scrolling add also scroll class (class="narrow scroll"):
.scroll .dojoxCheckedMultiSelectWrapper {
overflow-x: scroll;
}
For wrapping the option text add wrap class (class="narrow wrap"):
.wrap .dojoxMultiSelectItemLabel {
white-space: normal;
}
.wrap .dojoxMultiSelectItemBox {
vertical-align: top;
margin-top: 3px;
}
Depending on the order you include stylesheets you may need to add !important.