I feel like this should be easier for me to solve but for some reason I can't get it to work right.
I would like the Navigation to be fixed at the top on mobile. What am I missing?
http://www.valleygolfwillmar.com
You just need to modify this rule
#media only screen and (max-width: 768px) {
#header {
position:fixed; /** Change to fixed **/
}
}
currently it is set to relative on mobile
Edit Code updated with appropriate class
Related
I want to disable sticky toolbar which appears on top of page when page is scrolled. How it can be done ?
I resolve this problem by CSS
.ck.ck-editor__top.ck-reset_all {
z-index: var(--ck-z-modal);
position: sticky;
top: 0;
}
.ck.ck-sticky-panel__placeholder {
display : none !important;
}
.ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
position: unset;
}
The fact that the toolbar appears in the wrong place when the editor is in an overflowed container is a bug that we are aware of. But in this case, I'd recommend you to not use the classic editor at all. If you want to have more control over where the toolbar goes, e.g. the DecoupledEditor (demo) allow controlling the toolbar. This editor type doesn't do anything with the toolbar itself – it just creates it and it's up to you where you're gonna insert it.
Another option would be implementing your own custom editor, but that'd be necessary only if you wanted to make even more customizations
I'm having same issue with the classic-editor, the position of the .sticky_panel is changing on the event of focus in the .editor_editable.
at some point when it's not visible within the display and click inside it goes all up to first element .
CSS only:
ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
position: absolute !important;
}
In my editor build, I did a hack like this:
const stickyUpdateInterval = setInterval(() => {
editor.ui.view.stickyPanel['_checkIfShouldBeSticky']();
}, 100);
editor.on('destroy', () => {
clearInterval(stickyUpdateInterval);
});
This is just a crude hack that will update sticky balloon all the time.
If you know exactly in which overflow container your editor will be mounted, you can do something more clever, like listen to scroll events and update only then (this is what CKEditor is doing for the window, BTW, that's why it's not working when you put it in a container).
I have spent some time trying to get the CKEditor Classic component "sticky toolbar" to work nicely in Angular with a scrolling pane and there are 2 issues I had to overcome.
The position of the toolbar when sticky this defaults to the top
of the browser page (view port) - so (in Angular) you need to
configure this setting in the HTML template :
[config]="{ui:{viewportOffset:{ top: 58, right: 0, bottom: 0, left:
0}}}"
Making the editor respond to scrolling. This was a more difficult
one to resolve for me. The solution I have is (thanks to panta82
above) is to catch the scroll events and call a function in the
editor to check if the toolbar should be sticky or not .. it's
called checkIfShouldBeSticky :)
Here is a working sample in StackBlitz
I faced the same issue,
if you have header then below css will also help
#media only screen and (max-width: 767px) {
.ck-sticky-panel__content {
top: 180px !important;
}
}
#media only screen and (min-width: 768px) {
.ck-sticky-panel__content {
top: 128px !important;
}
}
document.getElementById('main')?.addEventListener('scroll', () => {
setTimeout(() => {
// eslint-disable-next-line no-underscore-dangle
editor.ui.view.stickyPanel._checkIfShouldBeSticky()
}, 100)
})
I'm a semantic-ui newbie, usually I use bootstrap 3.0 and i really like the "visible-xs" feature, someone have a workaround for this on semantic-ui ?
Basically, it's just
.visible-xs { display: none !important; }
#media (max-width: 767px) {
.visible-xs { display: block !important; }
}
Just add it somewhere to the CSS.
You can use container's visibility for that:
http://semantic-ui.com/elements/container.html#/introduction
But be carefully, they only works for containers not individual elements.
If you want to use it like Bootstrap on particular elements, you can use some of this snippets:
https://github.com/Semantic-Org/Semantic-UI/issues/1114
And this is actually the discussion to allow that support on semantic ;)
I'm using Bootstrap 3 and trying to remove/exclude the breakpoint between medium and large devices. I have a existing website which is optimised to 970px which looks great. What I am trying to do is remove the md > lg breakpoint so that even on large widescreen desktops the maximum body width is 970px and still centred.
Anyone know if there is a quickfix solution to this?
Any advice would be much appreciated
Decbrad
If you're overriding the bootstrap breakpoint (and using containers properly), adding this below the bootstrap breakpoint media queries in the bootstrap CSS file should work for you.
If using LESS
#media (min-width: #screen-lg) {
.container {
width: 970px;
}
}
OR, you can simply override the bootstrap container in your own CSS (just make sure you load it after bootstrap.css)
#media (min-width: 970px) and (max-width: 2500px) {
.container {
width: 970px;
}
}
OR you can find the media query in the bootstrap.css file on around line 1240 and simply change it there
#media (min-width: 1200px) {
.container {
width: 1170px; /* change 1170 to 970 */
}
}
the less way is good but this one is more flexible and reliable:
#media (min-width: #screen-sm) { .container { width:#screen-md; } }
Because in bootstraps default values the width of #screen-md is 992px.
Now you will just have a breakpoint for small devices (smartphones) and any other bigger devices. they will all get the same layout
You can set a max width on the containers:
.container-fluid,
.container {
// Disable large-desktop breakpoint.
max-width: $container-md;
}
No need for media queries or anything.
The $container-md value is typically 970px, unless you changed the $grid-gutter-width. For LESS, replace the $ of variables with an #. For regular CSS, replace the variable with the hard coded pixel size.
I try to switch the display mode via javascript.
Assuming i have the html element with a class "display_mobile" i tried:
#media only screen and (max-width: 767px), html.display_mobile {
/* mobile mode definitions */
}
but this does not works.
Any idea how to solve this?
Like this. Media queries do not allow to use selectors in condition.
#media only screen and (max-width: 767px) {
html.display_mobile .any-definition {}
}
I am doing a project using the new updated Bootstrap 3 RC1.
There are may new features with the new Bootstrap 3 which are much different than the previous versions.
I figured most of the changes but one I can't resolve:
when the menu has many items it breaks in Ipad and other tablets becuase it doesnt get collapsed like it automatically collapsed on mobile (which is good)
I would like to know how do I "force" ipads to act like mobile and show a collapsed menu or better yet - how to collapse the menu if it has many items and on certain screens and smaller it breaks
here are screenshots of my live project:
-- Menu on Big Screens --
-- Menu on Ipad Landscape --
-- Menu on Ipad Portrait --
-- Menu on Mobile --
I simply want the ipad to act like mobile. notice that the portrait does act like mobile as far as the content but not the menu.
Please read: http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/
The collapsing of your menu is defined in the less files. (Download the latest version from:https://github.com/twbs/bootstrap )
In variables.less you will find #grid-float-breakpoint: #screen-tablet; where #screen-tablet is 768px.
So by default your menu will collapse when the screen width is below the 768px;
The ipad landscape has a screen width of 1024px so the menu will NOT collapse. The ipad portrait screen width is 768 px so the menu will NOT collapse.
See also navbar.less:
// Responsive navbar
// --------------------------------------------------
#media screen and (min-width: #grid-float-breakpoint) {
To change this behavior you have to change the #grid-float-breakpoint b.e set to 767 and recompile your css files.
NB You also mentioned: "notice that the portrait does act like mobile as far as the content but not the menu."
You use "col-lg-" as prefix for your grid rows. "col-lg-" elements will stack below the 992px (ipad portrait) and become horizontal above 992px (ipad landscape).
Just ran into this issue as well. I suggest you visit:
Bootstrap customization
Find the field #grid-float-breakpoint and set it to the screen width after which menu should collapse. There you could use variables from previous section, namely from Media queries breakpoints to set proper points.
Also, take a moment and check through all available variables to change. Creating a well-customized Bootstrap package might save you hours of dev. work, if not more.
For those poor souls who are not using less, you would have to modify the bootstrap.css and change media queries associated with navbar that have a breakpoint of 768px to 992 px.
For example, change
#media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 0;
}
}
to:
#media (min-width: 992px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 0;
}
}
The no less implementations I found didnt work
Couldn't find the styles to make this happen on its own anywhere, ended up finding this - https://coderwall.com/p/wpjw4w
I was able to correct our issue by changing the #media (max-width: 768px) query to 767px instead. One of the links above referenced a 1px issue on iPad which breaks differently and was forcing the mobile version of the website instead.
If anyone is using the standard bootstrap.css file, I had to change it in 3 places:
around line 3780
/*changed from 768 to 992 */
#media (min-width: 992px) {
.navbar-header {
float: left;
}
}
around line 3799
/* changed from 768 to 992 */
#media (min-width: 992px) {
around line 3924
/*changed from 768 to 992 */
#media (min-width: 992px) {
I hope this helps someone :)
I had the opposite problem. On iPad the navbar was not collapsed (as expected), but the styles for a collapsed navbar were applied. I got it solved by changing the media query for the collapsed navbar adding -1 to match with $grid-float-breakpoint as follows:
#media (max-width: $screen-sm-min - 1) {
//styles for collapsed navbar (which won't show up on iPad portrait)
}