We Keep Coding

Add space and keep elements on the right side

I have these 2 children elements and I want them on the right side(I have that working just fine), but now I want to add more space between them and having a hard time to get that to work. Can someone tell me what I'm missing, please? thanks
section {
background: yellow;
display: flex;
justify-content: flex-end;
}
<section>
<button>Cancel</button>
<button>Confirm</button>
</section>

gap property can help you
section {
background: yellow;
display: flex;
justify-content: flex-end;
gap: 5px;
}
dont create more containers if you can avoid this. This is my principle

You can assign a default class to your buttons, or set a new class to your elements, and specify (for example) a margin that will be applied.
consider the following example:
section {
background: yellow;
display: flex;
justify-content: flex-end;
}
.elementContainer{
margin: 5px;
}
<section>
<div class='elementContainer'>
<Button variant="secondary">Cancel</Button>
</div>
<div class='elementContainer'>
<Button variant="primary">Confirm</Button>
</div>
</section>
This will add a 5px margin around each item with the element class.
you may change this style according to your needs.

You can use column-gap
So try this:
HTML:
<section>
<Button variant="secondary">Cancel</Button>
<Button variant="primary">Confirm</Button>
</section>
CSS:
section {
background: yellow;
display: flex;
justify-content: flex-end;
column-gap: 10px;
}

How to center Google sign in Button in a Svelte App

I'm trying to center the Google sign in button in my svelte app, but this doesn't work. Same thing also happen using a Svelte Atoms component FileUpload. If I use a standard button, this will be centered in the app. Does anyone has an idea how I can solve that problem? My code is based on the svelte template, here the specific part:
<main>
<div class="g-signin2" data-longtitle="true" data-onsuccess="onSignIn"></div>
<button>Gte an random number</button>
<FileUpload title="Upload file" subtitle={fileName} on:change={onChange} />
<h1>Hello {name}!</h1>
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
</style>
Thanks
Paulo

This is a question of CSS, there are several ways to center your component.
main {
...
display: flex; /* or grid */
justify-content: center;
align-items: center;
}

Styles contradicts with my HTML Code

I have created one travel page via HTML and CSS and I have added button to add another trip in the same but after clicking on the button more than 5 times the form is getting out of region. It seems the issue is coming from styles but i am unable to figure out the same.
Click here to replicate the issue
<div class="form-row">
<button class="btn btn-primary" type="button" onclick="displayResult()">Add another trip</button>
</div>

Check your JSFiddle and found the issue.
You have to add following class in your css.
form .form-row{margin-left: 0;}

you have this in your css :
.form-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -5px;
margin-left: -5px;
}
here margin-left: -5px makes the content moves to left every time the element is created then change margin-left: -5px' tomargin-left: 0px`.
After changing Css your css will look like this
.form-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -5px;
margin-left: 0px;
}

It seems like the way you are adding the new form sections when clicked on the 'Add another trip' is wrong. The <div class="form-new" id="space"></div> element that you have placed to insert the new form section is inside the previous <div class="form-row"></div>. You should not place it there but just after it. Try to understand with this example.
This is what you have now.
<div class="form-row"></div>
<div class="form-row"></div>
<div class="form-row">
<div class="form-new" id="space"></div>
</div>
Try making it this way,
<div class="form-row"></div>
<div class="form-row"></div>
<div class="form-row"></div>
<div class="form-new" id="space"></div>

Aligning divs using the baselines of child divs in css

I can align two div's by simply setting their display to inline-block and using same line-heights like shown in the below:
However, what I want is that aligning two nested divs according to the baseline of the inner divs like this:
I can achieve this also using jquery by taking the longest heading's height and set all the headings' height to this value.
var fitSizes = function () {
var h = 0;
$('h1').each( function(){
if(h < $(this).outerHeight()) h = $(this).outerHeight();
// select biggest height
});
$('h1').each( function(){
$(this).outerHeight(h);
// set all h1 heights to the biggest height
});
};
fitSizes();
But for some reasons I don't want to use js or jquery. Is there any "CSS only" way to achieve something like that?

Any solution I can think of here seems hacky, as are usually problems of this nature. There is ALWAYS a scenario where they will break. A programmatic approach, however bloated and ugly, will definitely give you exactly what you want.
I'm going to make an assumption that both the header and the content are of varying lengths and there may be more than just 2 on page either on a single line or multiple.
TOP DOWN APPROACH // fixed header height
There's no reason why your approach above won't work for a nested div. I would wrap the h1 if you're applying styles to it though. Setting a line-height on a h1 if it breaks across lines will cause each line in the multiline to have that line height. Wrap the header in a div and give that a static height, that way if the has styles such as a background won't be affected by the "margin".
<style>
.wrapper {
height: 2.5rem;
line-height: 2.5rem;
text-align: bottom;
// flex approach works too
}
h1 {
line-height: 1rem;
}
</style>
...
<div class="container">
<div class="wrapper">
<h1>title</h1>
</div>
<div class="content">
<p>lorem ipsum....</p>
</div>
</div>
"BOTTOM UP" APPROACH // fixed content
This would work better if the "anchor" for these components is the bottom of the page. If your content varies in length you could fix the height of the container and content.
<style>
.container {
text-align: bottom;
}
h1 {
line-height: 1rem;
}
.content {
height: 15rem;
overflow: elipsis;
}
</style>
...
<div class="container">
<h1>title</h1>
<div class="content">
<p>lorem ipsum....</p>
</div>
</div>

You could do it with flexbox, you could set make the outer div's siblings by making a container around them and do something like this:
.container {
display: flex;
align-items: flex-end;
}
If this does not fulfill your needs you could also try and see if align-items: baseline; fixes it. Just have a look at flexbox.

What You are looking for using flexbox.
.root {
display: flex;
height: 300px;
border: 2px solid black;
}
.container {
display: flex;
/* position at bottom of container */
margin-top: auto;
/* spread inside container */
flex-grow: 1;
/* align items in row and center it verticaly */
flex-direction: row;
justify-content: center;
}
.column {
display: flex;
margin: auto 5px 5px;
padding: 20px;
/* spread inside container */
flex-grow: 1;
/* align items in column, and position content at the bottom */
flex-direction: column;
justify-content: flex-end;
border: 2px solid blue;
}
.row {
margin: 5px;
padding: 10px;
border: 1px solid red;
text-align: center;
}
<div class="root">
<div class="container">
<div class="column">
<span class="row">row one</span>
</div>
<div class="column">
<span class="row">row one</span>
<span class="row">row two</span>
</div>
</div>
</div>

Flexbox is something up and coming that would be really useful to use. It's only growing in popularity.
This can answer many different problems. Such as your justification issue.
Here's a simple fiddle with little code that shows the answer to your problem: https://jsfiddle.net/hkLk53c6/
HTML:
<div class="container">
<div class="flex-item">
Item
</div>
<div class="flex-item">
Item
<br>
Item
</div>
<div class="flex-item">
Item
<br>
Item
<br>
Item
</div>
</div>
CSS:
.container {
display:flex;
justify-content: space-between;
border: 1px solid #333;
}
.flex-item {
width: 33%;
text-align: center;
background: #120321;
color: #fff;
}
Here's a link to Chris Coyier's explanation about Flexbox Properties:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've personally found it very useful in learning more about flexbox.
You can styled based off of the baseline, you can reverse elements, justify them to be the same height both vertically and horizontally. Etc. It's very exciting because now we can get past some hacky fixes. (Like using JS which trust me, you're not the only one to do so far!)

How to align text inside a circle dynamically?

I have a div with some random text.I have designed the div as a circle. I want to align the text inside the circle in the center. I can do this manually i mean for a static text i can do this. I want to know if there is any way to do this dynamically. I want to create the circle depending on the text size automatically and positioned the text in the center and aligned.
I have the code here :
<html>
<head>
<title>Test</title>
</head>
<body>
<section class="main">
<div id="greeting">
<p>Hi, This is the greeting part of my site.</p>
</div>
</section>
</body>
</html>
Thank you.

You can use
#greeting{
display: flex;
justify-content: center;
align-items: center;
}
How it works:
justify-content defines where flex items will align according to the main axis (horizontally in our case)
align-items does the same with the axis perpendicular to the main one (vertically in our case).
It works for any element, and it's probably the easiest and shortest way to center something horizontally and vertically

I have solved the problem after doing a lot of searching. I got my one and only clue from here :
Then I have tried a lot of time and finally I have done it. Here is the javascript code:
<script type="text/javascript">
var gr = $('#gr').width();
var grt = $('#greeting').width();
//alert(grt/2.5 >=gr);
if((grt/2.5)>=gr)
{
$('#gr').css({'height':gr+'px'});
}
else{
$('#greeting').css({'width':gr*2.5+'px'});
$('#greeting').css({'height':gr*2.5+'px'});
}
</script>
Here is the HTML code:
<div id="greeting">
<p id="gr">
Hi there this is my greeting part.
</p>
</div>
finally here is the CSS part:
#greeting{
color: #F8F8F8;
margin:5px;
width:0px;
border-radius: 50%;
background-color: #F99793;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
#gr{
isplay: flex;
justify-content: center;
align-items: center;
word-wrap:break-word;
}
You can check this out in here.

Easy - use transform. This is CSS3 and remember to prefix the transform property (-webkit-, etc).
Fiddle for you
#greeting{
position: relative;
height:450px;
width:450px;
border-radius: 50%;
background-color: #779EC6;
text-align: center;
}
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
}

HTML:
<section class="main">
<div id="greeting">
<p>Hi, This is the greeting part of my site.</p>
</div>
</section>
CSS:
section.main{
display: table;
border: 2px solid #999;
height: 200px;
width: 200px;
background-color: #ccc;
border-radius: 50%;
padding: 7rem;
}
section.main > #greeting{
display: table-cell;
text-align: center;
vertical-align: middle
}
FIDDLE: http://jsfiddle.net/y3699smx/

Set section with class main to display:table; and give display: table-cell; and vertical-align: middle; style to #greeting. If text size will increase in this code, alignment will get adjust accordingly.
See Working example http://jsfiddle.net/guruWork/oc9mrz38/