How can I make align all the textboxes align in same vertical position?
My textboxes are starting just after the label is completed. The textboxes are following the width of the label.
It is also to be noted that all the labels are left justified. Can I do this without using tables, just only html and css?
Code ::
<div style="width: 100%; font-family: Arial,Helvetica, sans-serif;">
<div style="text-align: left; width: 100%; font-size: 13px;margin-bottom:5px;">
<b>Previous Password:</b>
<asp:TextBox ID="txt_prev_pwd" runat="server" />
</div>
<div style="text-align: left; width: 100%; font-size: 13px;margin-bottom:5px;">
<b>New Password:</b>
<asp:TextBox ID="txt_new_pwd" runat="server" />
</div>
<div style="text-align: left; width: 100%; font-size: 13px;margin-bottom:5px;">
<b>Retype Password:</b>
<asp:TextBox ID="txt_re_pwd" runat="server" />
</div>
</div>
</div>
You can add to b tag CSS styles:
b{
display: inline-block;
width: 150px;
}
I recommend change <b> tag on <label>, add a class name, and then style it.
you can use this code:
.fields{display:table}
.fields-row{display: table-row;}
.fields-row b{display: table-cell}
<div class="fields">
<div class="fields-row">
<b>Previous Password:</b>
<input type=text />
</div>
<div class="fields-row">
<b>New Password:</b>
<input type=text />
</div>
<div class="fields-row">
<b>Retype Password:</b>
<input type=text />
</div>
</div>
</div>
Try wrapping each line in a separate div that specifies the width and use the CSS property float, text-align and align
<div style="max-width: 50%; align: center">
<div style="max-width: 50%; text-align: center; float: left">Field #1</div>
<div style="max-width: 50%; text-align: center; float: right">
<input type="text">
</div>
</div>
<br>
<div style="max-width: 50%; align: center">
<div style="max-width: 50%; text-align: center; float: left">Field #2 Blah</div>
<div style="max-width: 50%; text-align: center; float: right">
<input type="text">
</div>
</div>
<br>
<div style="max-width: 50%; align: center">
<div style="max-width: 50%; text-align: center; float: left">Here's field #3</div>
<div style="max-width: 50%; text-align: center; float: right">
<input type="text">
</div>
</div>
Although Whitcik response is pretty accurate, I would prefeer using relative width:
b{
display: inline-block;
max-width: 75%;
min-Width: 20%;
}
This way, you can test in different widths keeping stable the aspect ratio (mobile devices). This is just ANOTHER solution. Whitcik is completely right with his response ;)
Related
Screenshot (The layout i look for) :
My codes
body {
background: #000000 50% 50%;
overflow-x: hidden;
overflow-y: hidden;
}
.video{
margin: 50px 20px;
display: grid;
place-items: center;
height: 80vh;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">
</head>
<body>
<div class="container">
<div class="left">
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/336x280" /> <br>
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/280x500" />
</div>
<div class="video">
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/500x500" />
</div>
<div class="right">
<p style="color: blue;">title</p>
<img src="https://place-hold.it/336x280" /> <br>
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/280x500" />
</div>
</div>
</body>
My current code : Works fine with large desktop, big screen and resolution
But,
When i check it with small desktop, mobile and small resolution screen, than the layout getting missed up.
How to i make this responsive?
Removed most of the code from your CSS and used flex-wrap to wrap the divs if screen shrinks and added a justify-content:space-between for the space.
Change:added button inside video div since video itself is a div i gave it display:flex and changed the flex-direction:column align-items to center them and gap:30px between p img button
body {
background: #000000 50% 50%;
}
.container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.video {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.vid-btn {
padding: 20px 150px;
}
<div class="container">
<div class="left">
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/336x280" /> <br>
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/280x500" />
</div>
<div class="video">
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/500x500" />
<button class="vid-btn">Button</button>
</div>
<div class="right">
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/336x280" />
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/280x500" />
</div>
</div>
I have a profile image with a text next to it. I'm trying to format it in such a way, that there is a profile image with a text next to it which follows that in a grid format.
I'm not really handy in CSS, so aligning items is not really my thing XD. Any help would be appreciated.
Here's the html code.
<div class="col-sm-3">
<div class="cardearnings" style="height:89%;">
<div class="card-body">
<h2 class="card-title">Activity</h2>
<div class="contents">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover"><i>Someone followed you</i>
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover"><i>Me followed you</i>
</div>
</div>
</div>
</div>
Heres the CSS
.image--cover {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
object-position: center right;
}
This is how it currently looks
Adding to above answer. We can also use flexbox property of CSS in order to achieve such layout.
Please follow below code snippets for reference:
<!DOCTYPE html>
<html>
<head>
<!-- CSS style -->
<style>
.container1 {
display: flex;
}
.container2 {
display: flex;
}
p {
margin-left: 10px;
}
img {
margin-top: 5px;
}
</style>
</head>
<body>
<div class="container1">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg"
style="width:70px;
height:70px;" class="image--cover">
<p> Someone followed you </p>
</div>
<div class="container2">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg"
style="width:70px;
height:70px;" class="image--cover">
<p> Me followed you </p>
</div>
</body>
</html>
References:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#background
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
If i undesrtand you correctly:
.card-body {
display: grid;
justify-items: center;
}
.contents {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 1em;
}
.image--cover {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
object-position: center right;
}
<div class="col-sm-3">
<div class="cardearnings" style="height:89%;">
<div class="card-body">
<h2 class="card-title">Activity</h2>
<div class="contents">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover">
<i>Someone followed you</i>
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover">
<i>Me followed you</i>
</div>
</div>
</div>
</div>
I would like to be able to use SweetAlert2 for my "growl" notifications on my website. I am using the Toast option and it works perfect. However, I would like to get the Title and Text each on their own lines and not inline.
UPDATE:
So I've inspected the element and it is using inline flex. Below is the output code of the alert:
<div class="swal2-container swal2-top-end swal2-fade swal2-shown" style="overflow-y: auto;">
<div aria-labelledby="swal2-title" aria-describedby="swal2-content" class="swal2-popup swal2-toast swal2-show" tabindex="-1" role="alert" aria-live="polite" style="display: flex;">
<div class="swal2-header">
<ul class="swal2-progress-steps" style="display: none;"></ul>
<div class="swal2-icon swal2-error" style="display: none;"><span class="swal2-x-mark"><span class="swal2-x-mark-line-left"></span><span class="swal2-x-mark-line-right"></span></span>
</div>
<div class="swal2-icon swal2-question" style="display: none;"></div>
<div class="swal2-icon swal2-warning" style="display: none;"></div>
<div class="swal2-icon swal2-info" style="display: none;"></div>
<div class="swal2-icon swal2-success swal2-animate-success-icon" style="display: flex;">
<div class="swal2-success-circular-line-left" style="background-color: rgb(255, 255, 255);"></div><span class="swal2-success-line-tip"></span> <span class="swal2-success-line-long"></span>
<div class="swal2-success-ring"></div>
<div class="swal2-success-fix" style="background-color: rgb(255, 255, 255);"></div>
<div class="swal2-success-circular-line-right" style="background-color: rgb(255, 255, 255);"></div>
</div><img class="swal2-image" style="display: none;">
<h2 class="swal2-title" id="swal2-title" style="display: flex;">Welcome!</h2>
<button type="button" class="swal2-close" aria-label="Close this dialog" style="display: none;">×</button>
</div>
<div class="swal2-content">
<div id="swal2-content" style="display: block;">You are now logged in!</div>
<input class="swal2-input" style="display: none;">
<input type="file" class="swal2-file" style="display: none;">
<div class="swal2-range" style="display: none;">
<input type="range">
<output></output>
</div>
<select class="swal2-select" style="display: none;"></select>
<div class="swal2-radio" style="display: none;"></div>
<label for="swal2-checkbox" class="swal2-checkbox" style="display: none;">
<input type="checkbox"><span class="swal2-label"></span></label>
<textarea class="swal2-textarea" style="display: none;"></textarea>
<div class="swal2-validation-message" id="swal2-validation-message"></div>
</div>
<div class="swal2-actions" style="display: none;">
<button type="button" class="swal2-confirm swal2-styled" aria-label="" style="display: none; border-left-color: rgb(48, 133, 214); border-right-color: rgb(48, 133, 214);">OK</button>
<button type="button" class="swal2-cancel swal2-styled" aria-label="" style="display: none;">Cancel</button>
</div>
<div class="swal2-footer" style="display: none;"></div>
</div>
</div>
The header code is:
<h2 class="swal2-title" id="swal2-title" style="display: flex;">Welcome!</h2>
and the text code is:
<div class="swal2-content">
<div id="swal2-content" style="display: block;">You are now logged in!</div>
<input class="swal2-input" style="display: none;">
<input type="file" class="swal2-file" style="display: none;">
<div class="swal2-range" style="display: none;">
<input type="range">
<output></output>
</div>
<select class="swal2-select" style="display: none;"></select>
<div class="swal2-radio" style="display: none;"></div>
<label for="swal2-checkbox" class="swal2-checkbox" style="display: none;">
<input type="checkbox"><span class="swal2-label"></span></label>
<textarea class="swal2-textarea" style="display: none;"></textarea>
<div class="swal2-validation-message" id="swal2-validation-message"></div>
</div>
With the main text part being:
<div id="swal2-content" style="display: block;">You are now logged in!</div>
Hope this helps.
This is what it outputs:
This is how I would like it to look:
UPDATE 2:
Thanks to the help from alekstrust, I now have code that does what I need. Below is the full CSS I used:
.swal2-container .swal2-popup.swal2-toast {
flex-direction: column;
align-items: start;
position: relative;
}
.swal2-container .swal2-icon {
position: absolute;
top: 50%;
margin-top: -20px !important;
}
.swal2-container .swal2-popup.swal2-toast .swal2-title,
.swal2-container .swal2-popup.swal2-toast .swal2-content {
margin-left: 50px;
text-align: left;
}
These styles would do part of the job:
.swal2-container .swal2-popup.swal2-toast {
flex-direction: column;
align-items: start;
}
.swal2-container .swal2-popup.swal2-toast .swal2-content {
margin-left: 50px;
}
Not the best icon alignment, though.
Update
This will do a better job:
.swal2-container .swal2-popup.swal2-toast {
flex-direction: column;
align-items: start;
position: relative;
}
.swal2-container .swal2-icon {
position: absolute;
top: 13px;
}
.swal2-container .swal2-popup.swal2-toast .swal2-title,
.swal2-container .swal2-popup.swal2-toast .swal2-content {
margin-left: 50px;
}
See https://codepen.io/alekstrust/pen/dybJXMo
You can always use the html parameter to achieve the custom look:
Swal.fire({
type: 'success',
html: `
<div style="text-align: left; margin-left: 10px">
<strong>Welcome!</strong><br>
You are now logged in!
</div>`,
toast: true,
showConfirmButton: false
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#8"></script>
This CSS fixes the toasts, but doesn't affect the popups...
.swal2-container .swal2-toast {
flex-direction: column;
align-items: start;
position: relative;
min-height: 57px;
}
.swal2-container .swal2-toast .swal2-icon {
position: absolute;
top: 9px;
}
.swal2-container .swal2-toast .swal2-title,
.swal2-container .swal2-toast .swal2-content {
margin-left: 50px;
text-align: left;
}
I have this website:
And I want the user to be able to scroll anywhere on the page, like they normally would, but I want the text to stay on the right in the same place while the images continue to move down. An similar idea is found on Apple's website on https://www.apple.com/apple-news/ where the magazines on the right of the screen move down faster than the magazines on the left side. How can I achieve this using pure css and js. It is key to note that this is not the only section of the website. There are going to be sections above and below this.
This is my html:
<div style="display: flex; justify-content: space-between; padding: 40px;">
<div>
<div>
<span style="font-size: 80px; font-weight: bold; font-family: 'Raleway';" id="lookAtThesePhotos">Look at these photos</span>
</div>
</div>
<div style="width: 50%;">
<img style="float: right;" src="https://mv-hacks.com/images/event/hackers.jpg">
<img style="float: right;" src="https://mv-hacks.com/images/event/mrnguyen.jpg">
<img style="float: right;" src="https://mv-hacks.com/images/event/mrnguyen.jpg">
<img style="float: right;" src="https://mv-hacks.com/images/event/mrnguyen.jpg">
</div>
</div>
You can achieve it by adding position: fixed; to your text. It will fix the position of your text even on scroll. You just have to change some styling to adjust the display.
This is the running snippet for it.
<div style="display: flex; justify-content: space-between; padding: 40px;">
<div>
<div>
<span style="font-size: 80px; font-weight: bold; font-family: 'Raleway'; position: fixed;width: 50%;" id="lookAtThesePhotos">Look at these photos</span>
</div>
</div>
<div style="width: 50%;">
<img style="float: right;" src="https://mv-hacks.com/images/event/hackers.jpg">
<img style="float: right;" src="https://mv-hacks.com/images/event/mrnguyen.jpg">
<img style="float: right;" src="https://mv-hacks.com/images/event/mrnguyen.jpg">
<img style="float: right;" src="https://mv-hacks.com/images/event/mrnguyen.jpg">
</div>
</div>
You can use the css positioning and give value sticky to the text element
#lookAtThesePhotos {
position: sticky;
top: 0px;
}
<h1>Hola</h1>
<div style="display: flex; justify-content: space-between; padding: 40px;">
<div>
<span style="font-size: 80px; font-weight: bold; font-family: 'Raleway';" id="lookAtThesePhotos">Look at these photos</span>
</div>
<div style="width: 50%;">
<img style="float: right;" src="https://mv-hacks.com/images/event/hackers.jpg">
<img style="float: right;" src="https://mv-hacks.com/images/event/mrnguyen.jpg">
<img style="float: right;" src="https://mv-hacks.com/images/event/mrnguyen.jpg">
<img style="float: right;" src="https://mv-hacks.com/images/event/mrnguyen.jpg">
</div>
</div>
The look at these photos text will scroll initially until it is displayed at top of the window. Then it remains fixed there and the images scroll through
Codepen Link: https://codepen.io/uchihamalolan/pen/oOYJba
When the span element is at 0px, it'll behave as fixed element. Rest of the time it'll behave as relatively positioned.
Please note, sticky is a relatively new value for position property, check if it is supported
For further information, refer this:
https://css-tricks.com/almanac/properties/p/position/
I have to build a Modular Window for a chat! I allready got a Toolbar and an Flex conatiner which gets filled. Now i got the Problem, that i want to add an Div for a chat input field. I tried nearly everything to align this thing to the bottom but nothing works.
Here is how it should look like:
"Message input" has to be aligned to the bottom
This is my actual HTML-Code:
<div id="chat_dialog" class="modal" style="height: 600px; overflow-y: hidden">
<div class="toolbar_standard">
<div class="toolbar_standard_control_row">
<img src="/static/images/ic_arrow_back_white.svg" class="toolbar-button" data-bind="click: closeChatDialog">
<div style="font-size: 20px; color: white">Chat</div>
<div style="font-size: 20px; color: white; padding-left: 40%" data-bind="html: chatPartnerName"></div>
<div style="..."></div>
</div>
</div>
<div style="display:flex; height: 100%;">
<div data-bind="foreach: contacts" style="width: 300px; overflow-y: scroll;">
<div class="overviewlist_row waves-effect" style="padding-left: 5px; padding-right: 5px" data-bind="click: $parent.onClick.bind($parent)">
<div>
<div>
<p data-bind="html: name"></p>
</div>
</div>
</div>
</div>
<div style="background-color: #e6e6e6; flex-grow: 1; overflow-y: scroll; padding-bottom: 10px">
<div style="height: 80%; display: flex; flex-direction: column;">
<div id="spinner" class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<div data-bind="foreach: messages" style="padding-left: 15px; min-height: 306px">
<p data-bind="html: message, css: messageClassName"></p>
</div>
<div style="height: auto">
<div class="input-field col s6" style="background-color: white; height: auto;">
<input id="message_to_send" type="text" class="validate" data-bind="value: message_to_send" style="width: 94%;">
<a id="sendChat" class="clickable-icon" data-bind="click: sendMessage" style="padding-top: 0px"><img src="/static/images/ic_send_black.svg"></a>
<label for="message_to_send">Nachricht</label>
</div>
</div>
</div>
</div>
</div>
</div>
And this is how it looks like in the Browser:
Here you can see that is is floating under the Div of the "Messages" and that its dynamically moving whit the size of the "Messages" Div!
How and where do i have to set the the alignment to the bottom?
First point: Don't use inline CSS without any necessity.
You can bring your message to bottom by positioning. Try to change your code as below
Add position:relative to <div style="height: 80%; display: flex; flex-direction: column;"> and add position:absolute; bottom:0; to <div style="height: auto">.
Edit: If it doesn't bring your message to exact bottom, then you are suppose to work on the height of <div style="height: 80%; display: flex; flex-direction: column;"> on this part.
Just add position: absolute; and bottom: 0px; in your textarea or container of textarea
Add position: fixed; and bottom:0; to your message input container, to fix the width overlap issue just add property of width: inherit; that will take the width value of parent element.
Otherwise you can assign the parent width to your message container dynamically using JavaScript code :
$(document).ready(()=> {
var parentWidth = $('.parent-element').width();
$('.message-container').width(parentWidth);
});