I have this code:
<td>
<WarningAmberIcon sx={{ color: '#cc0000' }} /> If you cannot print in colour, please click here for further instruction
</td>
When displayed on screen it looks like this:
How can the bottom of the icon be lined up with the bottom of the text?
You can add a custom style with css positioning
ex: sx={{ position: 'relative', top: '5px' }}
or you can wrap those icon and text in a new container and make it a flex container. then change the align-items value to flex-end
Using flex is one way of doing this:
<td>
<div style="display:flex; flex-direction: row; align-items: center">
your content
</div>
</td>
You might notice that text is not perfectly center, setting line-height to 1 will solve it.
Related
Title says it all - my divider is not lying in the middle of my text. My current result looks like this:
But I want my divider to be in the middle likeso (see red line)
What's weird is that the material ui documentation demonstrates that this is a default behavior but for some reason it is not the case for me.
My code is as follows:
<Divider textAlign="center" variant="inset"><Typography variant="h3">About</Typography></Divider>
Wrapping your Divider component in a div or a Box should do the trick:
<div>
<Divider>About</Divider>
</div>
I was having this issue and what i did to solve it is to give the typography a display flex, align and justifyContent to the center and also setting the width and the height to 100%
<Divider
textAlign="center"
sx={{
border: "1px solid #E6E6E"
}}
>
<Typography
variant="h3"
sx={{
display: "flex",
justifyContent: "center",
width: "100%",
height: "100%",
alignItems: "center",
}}
>
About
</Typography>
</Divider>
I am using css flex on my project but it adds an empty box at the end of the items. How do I remove it?
My code
<div className="form-horizontal">
<div className="form-control">
<label htmlFor="">Name</label>
<input type="text" name="" id="" />
</div>
<div className="form-control">
<label htmlFor="">Email</label>
<input type="text" name="" id="" />
</div>
</div>
CSS
.form-horizontal{
display: flex;
width: 100%;
white-space: pre-wrap;
flex-wrap: wrap;
}
Try this. This should solve your problem
.form-control {
width: 100%;
}
Well the display: flex; will make your child elements inside them have a display of inline, so they will stick to each other, unless you separate them with justify-content or align-items.
Now if you have 2 elements (the child's elements) which their combined width is still less than the width of container box (parent element), well the rest of width missing is still there, just that it's not being used! (Because you need to maintain the aspect/design of the page)
But that doesn't means that you have a new box in your flex-blox. It's just free space, not being used.
Graphic explanation of the problem
Now you can still use that free space there with the justify-content or align items property, or you can add a new child element to the flex-blox!
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.
I have a bunch of columns of info that look like this:
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
etc . .
given that people have different browser widths, if a person has a monitor with a small width, some of the columns wind up wrapping to the next line. In this case, i would want a horizontal scroll bar to show up and keep everything on the same line. What is the correct way of doing this?
Simply place your span elements in a container:
<div>
<span>...</span>
<span>...</span>
...
</div>
Then remove the float property from your span elements, and instead set them to display as inline-block and give your new containing element a white-space of nowrap to prevent them from falling onto a new line:
div {
white-space: nowrap;
}
div span {
display: inline-block;
width: 280px;
}
If you really insist on using the style property on each individual element (which is bad practice) instead of including CSS like I've used above, this would be equal to:
<div style="white-space: nowrap;">
<span style="display: inline-block; width: 280px">...</span>
<span style="display: inline-block; width: 280px">...</span>
...
</div>
I have been trying to align the "Low" text and arrow that I showed on image. Basically want I is to align the text and the arrow (Low) some pixels below the blue chart. i.e. chart 3.
I'm generating those blue bars from my database and creating a table. Here is the code:
.lower {
display: block;
font-size:7pt;
color:#666666;
position:relative;
bottom: 5px;
left:-25px;
}
<td valign="bottom" style="width:8px;height:20px;"
<div style="padding: 0px;width:8px;height:" . round($var/2.5) . "px;background-position:bottom;background-repeat:no-repeat; display: block;">
<div class="lower" >Low <img src="icon-sort-up.png" />
</div>
</div>
</td>
The round($var/2.5) that one calculates my high to align my "High" text and arrow but somehow is affecting my Low text.
a busy cat http://sandbox.visistat.com/partner-reports/live3/pulse.png
You are nesting your "lower" div into your "high" div, that is why the round($var/2.5) is also affecting your "lower" div. Since the round($var/2.5) is written inline instead of in a seperate CSS file it will disregard anything that was in your css file and take the inline style instead.
To prevent this you can either place the "lower" div below the first div instead of nesting inside it.
Also you are not closing your opening td tag in your code example, although that might be a typo.