So, I have a header and a footer:
<div id='footer' class="ui bottom sidebar">
<div id='header' class='ui top sidebar'>
And, the JS:
$('#header').sidebar('show');
$('#footer').sidebar('show');
The problem is having two sidebars shown at the same time causes the first one to be readjusted. From what I see, Semantic uses margin to push elements on or off screen, presumably with some sort of CSS transition. By having the footer active, it seems to push the header off the screen. Making the header fixed didn't help the situation. How can I have two sidebars active at the same time with no conflicts?
Any suggestions?
By default, the Semantic UI Sidebar module is exclusive; in other words, only one can be open at a time. Semantic will hide other sidebars automatically when a new one is shown.
You can change this behavior by configuring your Sidebars like so:
$('.ui.sidebar').sidebar({
exclusive: false
});
$('.ui.sidebar').sidebar('show');
(Example jsFiddle)
This Javascript will cause both of your Sidebars to be set to non-exclusive, and then show them both. This functionality is noted in the Semantic UI docs for the Sidebar module:
http://semantic-ui.com/modules/sidebar.html#/settings
Related
This Stackblitz example opens a simple dialog which contains a radio group in the mat-dialog-content div.
You can see that the dialog-content shows an ugly scrollbar:
This does not happen when other components are used: e.g. input, etc.
Using chrome dev-tools, I can see that the mat-radio-buttons have a height of 20px:
but the mat-radio-group only has a height of 17px:
Is this a bug in angular material components (the example uses version 12.0.4), or is there a simple workaround/css that we can use to get rid of the scrollbar?
I've tried explicitly setting the height on the mat-radio-group, but this has no effect.
Notes:
in production we do of course have many dialogs and some of them are large and need the scrollbars
we need an application wide solution/workaround
simply hiding the scrollbars is not okay: it must remain auto so that the dialog can react to size changes (e.g. user rotates device, some items are shown/hidden dynamically, etc.
For now we came up with a workaround that fixes the issue in all our 30+ dialogs.
The nice thing is that we can apply it in one place, in styles.scss:
.mat-dialog-content {
padding-bottom: 10px !important;
}
We just add a padding to the bottom of the dialog content area and then scrollbars: auto works as expected in all our dialogs (small and large). i.e. when you make the browser window larger/smaller, the scrollbar is automatically shown/hidden.
And it also works when there are multiple mat-radio-groups in one dialog.
The additional padding between the content and bottom dialog-actions is acceptable for our ui.
Stackblitz example with workaround
The reason this happens is due to the ripple effect on the radio button - which takes up additional space and causes the scrollbar to show. See https://github.com/angular/components/issues/20344
There are a number of ways to resolve this, such as using padding or margins on the components or on the dialog content itself like you did. The important thing is that there is enough space added to accommodate the ripple.
I have a component sidebar which the user can scroll down. If the user clicks a button (external to the component) I use [ngClass] to add position:fixed to sidebar, and sidebar returns to its' original position. How can I prevent scrolling on sidebar without returning sidebar to its' origin position?
Edit: It was recommended that I provide code to explain my problem, so I created a stackblitz here.
The main pieces of the stackblitz example are the app.component, and the sidebar.component. To see my problem, scroll down on the sidebar, then click the stopScroll button, and see how the sidebar is moved back to its' original spot.
This is possible without any crazy scripting, but it requires you specify a fixed size for the container. By changing the overflow property of the container, we can "lock" the scroll to a specific spot.
Take a look at this StackBlitz
In Material Design Lite how do you specify the position of elements? I would like to show the sidebar under the navigation panel not on top of it like it is by default now: http://www.getmdl.io/components/#layout-section/layout
This isn't something support out of the box since it means the design will no longer adhere to Material Design. So if you wish to do this, you need to target the drawer in your own CSS and specify a top margin so it will sit below the navbar. Then deal with anything else that may break from the movement (I don't believe anything should though.)
I have run into an issue with the paper-dropdown-menu component, where it's expansion height seems to be limited by an enclosing core-collapse on its containing element. Is there a way to prevent this from occurring? (see images demonstrating symptoms below) Another related side effect seems to be that when the number of items in the dropdown creates a dropdown height that would normally expand below the bottom of the containing collapsible element, it causes the CSS top styling of the dropdown to be overridden, nudging the top of the element higher within the collapsible container element itself while it is expanded. Irregardless of its new top alignment, it still doesn't show the entire list of options as the height of the dropdown itself remains the same. Has anyone run into similar issues? I can post a jsbin, but its a bit convoluted due to me using a custom polymer element that consists of the icon, input control, and an optionally displayed/selectable unit of measure. So before doing that I was hoping someone might recognize this issue right away and be able to point me in the right direction. This is using chrome v38 and the latest paper-dropdown-menu and core-collapse components (bower ^0.4.0)
Unexpanded (note the top alignment):
Expanded (there should be 5 options, but they are being cut off by core-collapse and note the altered top alignment as well):
Proper operation (when dropdown height is same or less than containing collapsible element height):
In core-collapse there is new property 'allowOverflow' to allow collapsible element to overflow when it's opened. This should help paper-dropdown-menu to expand inside core-collapse. The new property is only in core-collapse#master branch and will be available in the next release.
<core-collapse allowOverflow>
<div class="content">
<paper-dropdown-menu>
...
</paper-dropdown-menu>
</div>
</core-collapse>
The new 'layered' attribute of the latest version of paper-dropdown resolves this issue.
I've run into some trouble with Bootstrap 3.2.0. Basically, I have a header menu with some li elements and inline with that I have a simple login form.
Please see my code here
the problem is that the css in not correctly handling the left and right floated elements
Weirdly enough, everything seems to work when only a single input element is present, as you can see here
Please note that the html is taken directly from Bootstrap examples at
- http://getbootstrap.com/examples/jumbotron/
- http://getbootstrap.com/examples/dashboard/
p.s. the Jumbotron seems to work just fine with the login form but I'm guessing that is because there is no ul/li left floating menu
I'd appreciate any help you can offer
Thank you
Edit
Hey guys and thank you for replies so far. I'm not sure whether this is the expected behaviour
->
i.e. the login form is pushed to the next row, but I would expect it to collapse everything into a "mobile" type of menu before pushing the form down onto the next row.
Edit 2
p.s. the screenshot above is from Firefox 31.0 (and I see the same Chrome Version 36.0.1985.125 m)
A few ways you can handle this...
1) Customize the Bootstrap CSS so the menu collapses at a different screen size: i.e. at http://getbootstrap.com/customizer, change #grid-float-breakpoint to = #screen-md-min.
2) Add some of your own custom CSS to shrink the input fields to ~ width:100px at the right time, via a custom class added to the input-group, and a media query:
#media(min-width:768px) and (max-width:992px){
.custom-class{width:100px;} /* tweak this px-count to get exactly what you want */
}
3) Using Bootstrap's hidden/visible column classes, put the login elements within a popover for only the sm screen size. This is the "Advanced" option, and is probably overkill, but fun to try. It would be something like:
...
<div class="visible-sm">
<div class="popover" html="true">Put your inputs, button and other HTML here</div>
</div>
<div class="hidden-sm">
<input ... ><!-- Put your regular login here -->