I don't know if I'm missing something or if this is a bug, paper-fab buttons always "force a new line". So, I can't get several paper-fab buttons aligned horizontally. I have tried <span>ing them:
<span>
<paper-fab mini icon='arrow-forward' on-click='onClickForward'></paper-fab>
<paper-fab mini icon='arrow-backward' on-click='onClickBackward'></paper-fab>
</span>
and they are stacked vertically.
Just set display to inline-block
<style>
paper-fab {
display: inline-block;
}
</style>
Related
I'm using Bootstrap 5 and I'm vertically center aligning this div and also hiding this section when the screen size is md and smaller. But for some reason it vertically center aligns only if I don't have the " d-none d-md-block". Once I add the " d-none d-md-block" in, it doesn't center vertically anymore. Any suggestions would be appreciated. Thanks.
<div
class="
d-flex
col-md-5
align-items-center
justify-content-evenly
px-5
bg-secondary
d-none d-md-block
"
> ```
d-flex sets display: flex in CSS
d-md-block sets display: block in CSS .. you're overriding the "flex".
Change your d-md-block to d-md-flex. (Also delete d-flex as you don't need it.)
I have a site where I have a full width menu, which has negative margins. It works perfect, except on Safari/iOS.
On Safari/iOS I can scroll horizontaly forever....WHY?
background-color: #0a6e96;
margin: -1px -9999rem;
padding: 1.2rem 9999rem;
margin-top: 48px;
Update - Solution
https://css-tricks.com/full-browser-width-bars/
This link has multiple solutions.
To avoid triggering horizontal scrolling, you need to set overflow-x:hidden on both the html and body elements.
I've run into an issue while trying to bottom-align a logo container to the zero-height parent. Preferably, I want to achieve this with pure CSS.
In the attached fiddle, I want to get the bottom of the control-group to be aligned to the top of the zero-height panel element. The markup needs to stay the way it is. Is it possible to do this without specifying static height or top offset? The parent needs to be zero-heght. Otherwise, if its above the content and it will have height, it will overlap the light-blue container, which will have other content. As such, content in the blue div will not be clickable in the part that is overlapped by the panel div. Any suggestions?
The problem can be seen here: http://jsfiddle.net/jQgHy/5/
I'm not sure if this is what you're looking for...
.control-group {
display: inline-block;
position: absolute;
vertical-align: bottom;
text-align: center;
bottom: 0;
}
http://jsfiddle.net/jQgHy/6/
This issue has been answered before. Sadly, vertical-align: top does not fix the problem for me.
Here's a JSFiddle: http://jsfiddle.net/CPAtE/2/
How can i vertically align my inline-block DIVs (to the top) ?
Use vertical-align: top; in your .slide class
FIDDLE
I have a header div, inside this is some content. The whole div is text-align:right. I want the content to sit on the right but more importantly sit on the bottom of the div, not the top.
#header {
height:79px;
background:url(images/jtl-logo.png) no-repeat left top;
text-align:right;
padding:0px 9px; }
Surely there must be a way of doing this in the CSS so that content always aligns to the bottom of it's container, it seems like it's incredibly necessary?
The only other way I can think to do it is applying padding to the header to push it down, but that seems a bit ridiculous when this is such a simple thing.
You could wrap up the text in another DIV or SPAN element and then apply CSS positioning to move it to the bottom.