I am trying to send a mail via nodemailer with some texts and images,
it all worked fine until i had to center an image and then i sterted to run into some weird bugs with the stylings, i have 2 examples that just doesn't work :
the following code is my wrapper, and when it sents the part of 'flex-direction: column' is being ommited and in the devtools i see only the 'direction: ltr; display: flex;' as the inline style :
<div style='direction: ltr; display: flex; flex-direction: column;'></div>
the following code is an image i tried to center ( after the flex part didnt work as expected ) but this time the part of 'transform' is being ommited and i only get the margin :
<img src="cid:image2#cid" style='margin-left: 50%; transform: translate(-50%, 0)'/>
maybe someone have an idea what am i missing here ?
thanks
Here 2 option in 1 snippet, I would recommand to always use table in email structure.
PS: I was adding max-width and height to image to show it well on my demo. You can remove that.
table {
width:100%;
}
tbody {
width:100%;
}
tr {
width:100%;
display: flex;
justify-content: center;
}
<!------------------ 1st solution -------------------->
<div style='direction: ltr; display: flex; flex-direction: column;'>
<img src="https://cdn.pixabay.com/photo/2018/03/06/20/25/dog-3204497_960_720.jpg" style='margin:auto; height:auto; max-width:120px;'/>
</div>
<!------------------ 2nd solution -------------------->
<table>
<tbody>
<tr>
<td style="padding: 20px;">
<img src="https://cdn.pixabay.com/photo/2018/03/06/20/25/dog-3204497_960_720.jpg" style="height:auto; max-width:120px;" />
<div style="padding-top: 30px;">TEST TEXT #1</div>
</td>
</tr>
</tbody>
</table>
Related
Basically, I have this user-customisable CSS-grid (node: width and height don't have limits, and I do not want it to have such) and it can be really really wide and/or really really high, and if that happens, the scrolling just stops somewhere and the elements not in the middle of the grid just get made inaccessible.
This is what I have at the moment and I got zero idea how to make it scroll to all parts of the grid
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0px;
}
#board {
display: grid;
grid-template-columns: 26px
}
.tile {
width: 20px;
height: 20px;
border-style: solid;
border-color: rgb(64, 64, 64);
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center
}
<div id="game_div">
<div id="board">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<!--
There are a lot more tiles that get added via .appendChild().
Imagine like a few thousand more tiles here.
-->
</div>
<!-- Irrelevant Minesweeper stuff -->
<button onclick="help()">Stuck?</button>
<p id="minecount" style="display:inline"></p>
</div>
PS: Before anyone links me to this, I have tried to understand it and it hasn't worked, so I am asking more specifically. (also that as well)
EDIT: Thank you Teemu, I had to add flex-wrap: wrap to the body ruleset
I've got two images that need to be aligned on either side of the title, preferable on the edges of the page. I tried to use position relative but it's not responsive to other screen sizes.
Can someone show me an efficient way to do this, please?
Currently its like this, but i want the two images to be on either side of the title.
title{
width: 100%;
}
.web{
font-size: 120px;
}
.js{
height: 230px;
width: 240px;
}
.css{
height: 230px;
width: 440px;
}
<div class="intro py-3 bg-white text-center">
<img class="js" src="images/js-flat.png" alt="js">
<div class="title">
<h2 class="web text-primary display-3 my-4">Wev Dev Quiz</h2>
<img class="css" src="images/css2.png" alt="css">
</div>
</div>
never-mind, i fixed it with:
.intro {
display: flex;
justify-content: center;
flex-direction: row;
align-items: center
}
You can use display:flex property in your parent div. I did some changes of your html and css codes below.
Here is the html part. I deleted the div that has a title class because all elements that are needed to be align should be seperated each other if you use display:flex
Here is the HTML and CSS codes:
.intro {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center
}
.web{
font-size: 120px;
}
.js{
width: 240px;
}
.css{
width: 240px;
}
<div class="intro bg-white ">
<img class="js" src="images/js-flat.png" alt="js">
<h2 class="web text-primary">Wev Dev Quiz</h2>
<img class="css" src="images/css2.png" alt="css">
</div>
When you use display:flex all items are aligned as horizontally. But we want to align them vertically. So we need to use flex-direction:column (its default is row). To align these items center, we also need align-items because this is used to align in cross axis which is perpendicular to the main axis.
Codepen: you can check it here
I have been studying CSS flex recently and was trying out some simple tasks with it. One of these tasks was to make a timeline with alternating elements being above or below a mid-line.
I would like to be able to set an initial width and a fixed height, so that when the content exceeds the height of the div and overflows, the width will expand to accommodate the content, and hopefully there will be no overflow.
https://codepen.io/anon/pen/roVOXB
<div class="content">
<div class="box">
<div class="above">Content of the div</div>
<div class="below"></div>
</div>
<div class="box">
<div class="above"></div>
<div class="below">Content of the div</div>
</div>
<div class="box">
<div class="above">Content of the div</div>
<div class="below"></div>
</div>
<div class="box">
<div class="above"></div>
<div class="below">Content of the div</div>
</div>
<div class="box">
<div class="above">Content of the div</div>
<div class="below"></div>
</div>
</div>
.content {
display: flex;
}
.box {
display: flex;
flex-direction: column;
}
.above, .below {
height: 350px;
display: flex;
min-width: 300px;
border: 1px solid #000;
}
.above {
display: flex;
align-items: flex-end;
background: orange;
}
.below {
display: flex;
align-items: flex-start;
background: aqua;
}
I know it might be a simple solution and its staring me right in the face, but I have tried everything with max-widths, max-heights, overflows and wrapping the text but nothing can help me achieve the desired outcome so far.
I would really appreciate any help. Thanks!
You can change the elements dynamically using the following JS:
var allElements = document.querySelectorAll('.below, .above');
allElements.forEach((Ele) => {
if(Ele.scrollHeight > 350){
Ele.style.minWidth = (Ele.scrollHeight) + "px";
}
});
What is does it iterate through all the elements with classes below and above, then checks if it uses more height than the height: 350px, if it is > 350px, then it will adjust accordingly.
Just add the above JS code in your codepen JS editor, and you're good to go. Try adding more content to it and it will dynamically change the width w/o overflow.
If the number of columns is static, you can remove the min-width from .above, .below.
Add min-width: 2700px; to .content.
I have been playing with the included CSS/HTML to implement tooltips that I can use HTML inside to enrichen them. The problem is that the website where this is intended for has a CMS front-end that uses CKEditor(4) and CKEditor doesn't like span elements - it seems to duplicate them and move the duplicated one outside the div. This seems to be a known issue/feature.
I don't have FTP access either so bypassing CKEditor isn't an option, and anyway I actually find the WYSIWYG quite useful, especially for tables.
My question is this: Is it feasible to use javascript that executes when the page finishes loading that grabs the HTML from somewhere (I guess a string constant declared in piece of javascript) and wraps it in <span>..</span> and injects it into the page at the right spot? I'm prepared to give it a go, but I thought I should check first if it's a hare-brained idea/it can't work/there are much simpler ways.
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 400px;
background-color: lightyellow;
color: maroon;
text-align: left;
font-family: Tahoma;
border-radius: 6px;
padding: 5px 5px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<div class="tooltip">Hover over me (tooltip HTML is inside a <span> - CKEditor breaks this HTML)
<span class="tooltiptext">
<h3>Tooltip using <span> and allowing HTML</h3><hr>
<br>
<table align="center" border="1" cellpadding="3" cellspacing="1" style="width:80%;">
<tr>
<td style="color:red;">Label 1:</td><td>data</td>
</tr>
<tr>
<td style="color:blue;">Label 2:</td><td>data</td>
</tr>
<tr>
<td style="color:green;">Label 3:</td><td><img src="https://upload.wikimedia.org/wikipedia/commons/4/47/5bzH6DGdLHw.png" style="height: 24px; width: 24px; display: block; margin-left: auto;margin-right: auto;"/></td>
</tr>
</table>
</span>
</div>
<br>
<br>
<div class="tooltip">Hover over me (tooltip HTML is inside a <div> - CKEditor doesn't break this HTML)
<div class="tooltiptext"">
<h3>Tooltip using <div> and allowing HTML</h3><hr>
<br>
<table align="center" border="1" cellpadding="3" cellspacing="1" style="width:80%;">
<tr>
<td style="color:red;">Label 1:</td><td>data</td>
</tr>
<tr>
<td style="color:blue;">Label 2:</td><td>data</td>
</tr>
<tr>
<td style="color:green;">Label 3:</td><td><img src="https://upload.wikimedia.org/wikipedia/commons/4/47/5bzH6DGdLHw.png" style="height: 24px; width: 24px; display: block; margin-left: auto;margin-right: auto;"/></td>
</tr>
</table>
</div>
</div>
<br>
<br>
In answer to your question, yes you can use javascript to dynamically insert elements after the page has loaded, however, if you simply want to use a span but a bug is preventing that particular tag then why not just use a different inline level element (<i> or <label>). After all thats all a span is.
edit
I've just had a look at your html markup and realised you are wrapping a load of block level elements like h3 and table inside your inline level span which is invalid html. I don't think this is actually a bug. Try it without the h3 and table inside and see if it still moves your span. Also why are you using a span here? If you want a container for the h3 and table to be inline then change the span to a div and set the div to display: inline-block
I want that the logo stays in the middle of menu items in the navigation, that it seems like the logo "splits" the navigation like in this example. It is important, that the logo stays also in the middle of page. So the menu items are arround them but the logo is "fixed".
I add a sepeartor div dynamically with javascript to the middle of menu items (when six items, the seperator stays after the third) to create the effect I discribe above.
.seperator {
display: inline-block;
height: 10px;
margin-left: 69px;
margin-right: 206px;
width: 10px;
}
But when the editor adds a new menu item to the navigation or renames an item (CMS), the logo is not centered anymore. With fixed margin it will not work but I don't know how to calculate dynamically the width or margin size. I want to add the value via javascript. I think this is the only way it could work.
So I need a script or a helpful idea to do this.
Responsive solution, bare HTML & CSS:
<div class="navBar">
<table class="menu">
<tr>
<td class="left">
<table class="nested" >
<tr>
<td>first</td>
<td>second</td>
</tr>
</table>
</td>
<td class="logo">
<a href="#">
<img src="http://i48.tinypic.com/2mob6nb.png" alt="Michigan State" />
</a>
</td>
<td class="right">
<table class="nested" >
<tr>
<td>third</td>
<td>fourth</td>
<td>fifth</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<style>
.navBar {
width: 100%;
margin: 0 auto;
}
.menu {
width: 100%;
}
.menu td {
text-align: center;
}
.menu .logo {
width: 22%;
}
.menu .logo img {
width: 200px;
max-width: 100%;
}
.left, .right {
width: 39%;
}
.nested {
width: 100%;
}
.nested td {
text-align: center;
}
</style>
View on Codepen
Okay, I tried a few things and I don't wanted to use two navigations but I did:
<div class="inner">
<div class="desktop_navi">
<ul>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
<div class="logo"><img width="281" height="280" src=""></div>
<div class="desktop_navi">
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</div>
Thats my new HTML-Markup. Here the style I use:
.inner {
display: table;
width: 100%;
}
.inner .desktop_navi,.logo {
display: table-cell;
}
.inner .desktop_navi {
text-align: left;
}
.header .inner .desktop_navi:first-child {
text-align: right;
}
This is not the best solution, but it works, is responsive and there are no problems with older browsers. If anyone finds a realy good solution with a single navigation, please let me know!
flex box might work for this.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/