I would like to have a sticky menu on my page but I'm unable to make it work.
This is my current setup:
<div class="ui basic segment">
<div class="ui grid">
<div class="three wide column">
<div class="ui sticky">
<menu-home-vertical></menu-home-vertical>
</div>
</div>
<div class="thirteen wide column" id="homeContent">
<div ui-view="main"></div>
</div>
</div>
</div>
And I initialize the sticky menu using:
$('.ui.sticky').sticky({context : '#homeContent'});
The problem was in no way related to Semantic UI, but more to the fact that I'm developing a single page application.
Everything on the website is loaded dynamically when it's needed so, most of the time, when the various Angular controller are initialized the content is not in place yet causing the view to have a 0 pixels height and thus the Semantic UI sticky module is initialized with a 0 pixels height context.
To solve this issue I'm simply refreshing the sticky menu on every scroll event. This makes sure that the sticky menu is working correctly.
#siannone If "the Semantic UI sticky module is initialized with a 0 pixels height context", does
$('.ui.sticky').sticky();
work? This makes it refer to itself.
I had similar problem. The content of "ui sticky" div was loaded dynamically. The solution for me was calling
$('.ui.sticky').sticky({context : '#homeContent'});
Each time when the content of the sticky div changed.
$.ajax({
url: '',
data: '',
success: function(content) {
$('#sticky_div_id').empty();
$('#sticky_div_id').append(content);
$('.ui.sticky').sticky({context : '#homeContent'});
}
});
Related
I'm trying to use the bootstrap-5 grid system inside a modal popup.
For testing, I simply took the main modal example from https://getbootstrap.com/docs/5.0/components/modal/, and added the grid example inside the modal-body:
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
....
Result: the grid is not respected in any way. But why?
https://jsfiddle.net/3041fLwk/
The issue is bootstrap doesn't implement responsive on modal.
It relies on parent window for media queries.
The same if you create a smallbox with limited width.
To implement responsive on modal is to use iframe, or gotta set breakpoint on modal yourself
I think your problem is coming from your use of ms-auto - when I removed all of the ms-auto classes the grid worked as expected.
When using a visible Semantic UI sidebar the content in pusher is too wide. It has the width of the browser window, not the width of the available space.
<div class="pushable">
<div class="ui left vertical inverted visible sidebar menu">
<a class="item" href="/">Item</a>
</div>
<div class="pusher">
My content
<table class="ui red table"><thead><th>1</th></thead>
<tbody><td>Test</td></tbody>
</table>
</div>
</div>
See a jsfiddle here:
http://jsfiddle.net/xh9p6tgb/1/
If you want to have an always visible sidebar-like element, then you could try using just Semantic UI Menu instead of sidebar. It's built in classes should be enough so that you can use it as a side menu and scale your content accordingly.
The sidebar isn't designed to automatically scale content that is within the pusher element. Instead, it it designed to be a transient menu which will either overlay or push content to the side.
You can change sidebar animation types during initialization using the animation option, for example:
// Add javascript here
$(document).ready(function() {
$(".ui.sidebar").sidebar({
transition: 'overlay'
});
});
However, if you want the sidebar to be animated but also have a pinned function, then you will most likely have to implement that yourself. Possibly something like adding a pinned class to the sidebar, or just use the visible class to determine if the pusher should shrink by using some CSS:
.ui.sidebar.visible ~ .pusher {
width: calc(100% - 260px);
}
Unfortunately, the animation looks a little strange like this but it's usable.
You can see it here http://jsfiddle.net/rkkmLtzn/
Is it possible to create a page in bootstrap with slider on only left half of the page and some text on right half of the page?
Will the website/page still be responsive?
If there is any such theme already, please suggest. (WordPress or bootstrap responsive)
That is not a problem at all. I suggest you take a look at the bootstrap documentation, specifically at the Grid section. It describes how to build the sites grid, which (by itself) will be responsive. If the column content behaves nicely when the viewport size changes, depends on the content you put in there.
For the slider, take a look at slick slider which is responsive.
Here is a quick bootstrap grid example for 2 columns next to each other that should give you an idea of how to do this:
<div class="container">
<div class="row">
<div class="col-md-6">
Left Column
</div>
<div class="col-md-6">
Right Column
</div>
</div>
</div>
I'm trying to implement a fixed nav bar, but after certain screen size (~width:989),
the nav bar moves down. It doesn't work on mobile either.
Image:
The navbar is completely stuck to the footer instead of staying on top of the page.
You can check the code at: http://www.lostsavings.co.il
You have a few other issues, but the major issue is that the nav-fixed-top content is at the bottom of the page right now... in other words, you have:
<div class="container"> content here </div>
<div class="navbar"></div>
<div class="footer"></div>
Move that navbar to the top of the natural document flow, as if you were using no bootstrap, jquery, etc...
<div class="navbar"></div>
<div class="container"> content here </div>
<div class="footer"></div>
You'll have to fine-tune quite a few margins, etc... and I see a few !importants that could be getting in the way, too, but I'm guessing some of that has been part of your attempt to troubleshoot this. Making the above change at least made the navbar appear at the top for me.
Been playing with boostrap for a few days and amazed at the capabilities it has to offer.
Have been trying to have a "header" of some sorts, which is affixed to the top when the user scrolls down.
You can find my current work here: http://mp3dj.free.fr/affix/site/
However you will notice that, when scrolling down, the "POST 1" suddenlty jumps to the top of the page. i.e there is no smooth scroll behind like here: http://jsfiddle.net/namuol/Uaa3U/
Current code:
<div class="container">
<div class="row affix-top" data-spy="affix" data-offset-top="60">
<div class="span12">
<div class="row">
<div class="span3">
<img src="http://www.socialfork.net/public/images/default-profile-photo-female.jpg" class="img-polaroid">
</div>
<div class="span9"><h1>Samantha Sam</h1></div>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="post1" class="box">
<h1>Post 1</h1>
<p> Scroll Down↓</p>
</div>
<div id="post2" class="box"><h1>Post 2</h1></div>
<div id="post3" class="box"><h1>Post 3</h1></div>
</div>
</div>
</div>
Any help appreciated!
What happens in your code is the row at the top changes its position to fixed when its offset to the top is smaller then 60px. The consequence is that it stops to consume any space above the next row.
In the jsfiddle you introduced there is a JS code you should understand and should help you.
This one is for you:
$('#nav-wrapper').height($("#nav").height());
It requires your header to be placed yet inside another div (class called nav-wrapper in fiddle). JQuery code above sets its height based on row height during initialization of the page. The height stays the same even if the top row disappears (of getting fixed).
Another part of the JS code:
$('#nav').affix({
offset: $('#nav').position()
});
makes you independent of the size of space above the top row, but in your case I think you do not need it (you can predict it always takes 60px).
when you use the solution from Marcin Skórzewski mind that if you're using a collapse in your navbar it effects the dropdown.
The height of the complete navbar is set using the small piece of JS code.
When your window gets smaller the navbar will be replaced with ||| (using default bootstrap)
When you're using a dropdown and press ||| to show the dropdown it will be placed behind the content below. It will not slide the content down. This is because the height of the navbar is set.
Possible solution 1: remove the height of the navbar when you click on ||| and place it back again when the dropdown slides back.
Possible solution 2: add a margin-top to the next element once the navbar sticks
update:
https://stackoverflow.com/a/15177077/1059884
an excellent solution using CSS