I have a table, and in the tbody I have an inline edit popup that is absolute positioned.
I have a table footer that has display inline-block that contains buttons that are floated to the left and right. It looks like:
<div class="table-footer">
<div class="new-row-button">
<lightning-button variant="base" label="New Row" title="Add new row" icon-name="utility:add" onclick={addNewRow}></lightning-button>
</div>
<template if:true={changesWereMade}>
<div class="save-cancel-wrapper">
<lightning-button variant="brand" label="Ok" title="Make changes" onclick={handleSave}></lightning-button>
<lightning-button label="Cancel" title="Discard changes" onclick={revertChanges} class="slds-m-left_xx-small"></lightning-button>
</div>
</template>
</div>
What happens is I end up with this:
Even though the drop down supposedly has a z-index of 9001. The inline editor is inside the tbody tag. I have tried to raise the z-index of the tbody element, the table element, the inline editor, no luck in getting it to go over those buttons. The only thing I got to work was make the table-footer relative positioned and assign a z-index of -1. But this makes my buttons unclickable as they are now 'below' the page.
Does anyone have any css advice on how to get these buttons underneath the inline editor? (The table element and table-footer div are at the same level in the element hierarchy)
You can use the display flex css property for your footer to replace the float. Something like this :
footer {
display: flex;
flex-direction: row;
justify-content: space-between;
}
footer .button {
flex: 1;
}
footer .button:first-of-type {
align-self:start;
}
footer .button:last-of-type {
align-self:end;
}
<footer>
<button> Add me </button>
<button> Delete me </button>
</footer>
Hope to help you.
Related
I'm working in a project where we have implemented ng-bootstrap and I'm now working on the toast-component and to it more suitible for our company.
What I'm trying to achive right now is to make a button inside of the toast to be on the far right while the text will be on the left. Right now the button comes directly after the text, which leaves a lot of space to the right of the button.
In the documentation (https://ng-bootstrap.github.io/#/components/toast/overview) they say:
We provide a dedicated ngb-toasts CSS class you could use, or write your own styles in case some specificities would be needed.
However per my understanding is that it only styles the toast it self and not the things inside of it, which is what I want to do.
I'm trying to achive this by adding in flexbox
SCSS
.toast {
display: flex;
flex-direction: row;
justify-content: space-between;
.text,
button {
align-self: center;
}
}
HTML
<ngb-toast *ngFor="let toast of toastService.toasts" [class]="toast.classname" class="toast">
<ng-template [ngIf]="isTemplate(toast)" [ngIfElse]="text" class="text">
<ng-template [ngTemplateOutlet]="toast.textOrTpl"></ng-template>
</ng-template>
<ng-template #text class="text">
<span>
{{ toast.textOrTpl }}
</span>
</ng-template>
<button class="btn ml-2" [class]="toast.classname" (click)="toastService.remove(toast)">
{{toast.button}}
</button>
</ngb-toast>
When I build the application and runs it, I can see in the browsers devtool that ng-bootstrap has added a new div with class="toast-body".
First question I have is why does it get added and for what reason?
This new div then contains my text and my button, which means that the they aren't affected by my flexbox that I added in the (now parentclass to toast-body).
I tried to address this issue in a simple way by adding in the newly created div in my style.css as well.
SCSS
.toast {
& >.toast-body {
display: flex;
flex-direction: row;
justify-content: space-between;
.text,
button {
align-self: center;
}
}
}
Sadly this approach doesn't work, the styles aren't hitting <div class="toast-body">.
What do I need to change / do in order to get the result I want?
How can I make sure that my styles trigger <div class="toast-body"> and the content inside of the div?
I'm developing an Ionic app, and having trouble with my header component. Its elements are wrapping with small screen sizes, and I would like them not to.
Here's the goal:
Here's what's happening now:
I know I could set a fixed width to the header, but I would like not to. I also wouldn't like to use JavaScript to calculate the width.
Here's the HTML/Angular/Ionic code for the title component:
<h1 *ngIf="backButton; else titleBackButton">{{ title }}</h1> <!-- show if backButton != true -->
<ng-template #titleBackButton> <!-- show if backButton == true -->
<button ion-button round class="button-back">
<ion-icon name="arrow-back"></ion-icon>
</button>
<h1 class="floated-title">{{ title }}</h1> <!-- this has been floated to the right -->
</ng-template>
Here are my CSS styles:
.button-back {
margin: 17px 0 0 10px;
}
.floated-title {
float: right;
}
Any time you want to force elements to line-up in a row, and never wrap, give the parent container display: flex. This automatically applies flex-wrap: nowrap and flex-direction: row.
The above suggestion applies to plain CSS. Some frameworks may set different defaults.
For instance, in React, flex-direction defaults to column.
Alternatively, you can apply white-space: nowrap to the container, which suppresses all line breaks inside the container.
I have two buttons that I want to align to be in the same line, and for some reason the second one is below the first one...
I thought grouping them in one div will help.
this is my current html, there is probably some difficulty with my attempt to group <md-switch> with <button>.
<div>
<button md-button (click)="publish()" class="md-primary">Update</button>
<md-switch [(checked)]="data.cb1">Sho: {{ data.cb1 }}</md-switch>
</div>
If I am adding a style attribute to it, only the button reacts, so obviously something is going on with the md-switch.
<md-switch> is a directive and no button. So the HTML will be replaced/parsed by angular which (as I think) outputs a block-level element.
Solutions for that would be to use either display: inline-block; or float: left;.
display: inline-block; is easier but will add 1px margin to your elements.
For floats the <button> has to be display: block;, too.
I am building new website and I've run into a little problem.
When I added next to my div and after the div end, but the hover does not work on the div. When I delete <a href"about.php"> and </a> the hover works.
Here is HTML code:
<div id="centerbox">
<div class="profile"></div>
<a style="display:block" href="about.php"><div class="about"></div></a>
</div>
</div>
And here is CSS Code
#centerbox {
width:988px;
height:462px;
margin-top:8.7%;
margin-right:auto;
margin-left:auto;
}
.about {
width: 150px;
height: 150px;
display: block;
margin-left:15.8%;
margin-top:-150px;
background:url(/images/about1.png);
background-repeat:no-repeat;
}
This problem is that the div is a block element and the a tag is an inline element. A block element cannot go inside of an inline. You'll need to change your <div> to a <span> or something that is inline.
When an block element is inside the inline the browser will usually try to fix it by moving it out of the inline element.
If you need the effect of the block element on say the <span> mentioned above you could add display:block to the span.
See this post for further clarification
Make the .hover on your (a) tag rather then the class you are applying it to that should probably work :)
I solved it. I changed the <a style="display:block" href="about.php"><div class="about"></div></a> to <div class="about" onclick="window.location = 'about.php';">
You don't want to store a div inside of an ref tag. You can give that ref tag a class though which will give it styling for that class
I want to hide an anonymous-child div which has a child-div also. I want also to display the anonymous div by clicking on div#child2.
I don't have any authority to change/add/remove ids or classes.
So I did this:
<div id="parent">
<!-- the anonymous div which I want to hide and display by clicking on div#child-2 -->
<div>
<div id="Container1" >
<div id="Container1">
<object>.....</object>
</div>
</div>
</div>
<div onclick="appear()" id="child-2">
<div id="child-of-child"></div>
</div>
</div>
CSS
div#parent div:first-child {
display: none;
}
Javascript
<script type="text/javascript">
function appear() {
document.getElementById("Container1").document.display="block !important";
}
</script>
The problem is that this type of css has affected the div#child-of-child and div#Container1 because the css reffering to every first child of any div.
So, my first question is:
How can I hide the anonymous div without having any effect to another div and display that later by clicking on div#child-2.
Second:
In this type of javascript code the styling of "block !important" works as it is?
Third:
The div#child2 doesn't have any content by itself. It includes another div which has content. If I set on div#child2 an event like onclick="appear()"; it works?
Forth:
In case that there is no way to avoid any effect to other divs is there any way to display the anonymous div and div#Container1?
Try this to only hide the first child within the #parent div:
div#parent div:first-child div:first-child {
display: none;
}
EDIT
To make Container1 appear afterwards, do the following in js (notice: I removed `!important' as I don't believe that is allowed, removing it made the code work - you can try it out below through the Fiddle link):
function appear() {
document.getElementById("Container1").style.display="block";
}
FIDDLER