Hi All can someone help me with the Web App I'm creating.
Here is the screenshot Web App Screenshot of web app so far i want to Maximize the Creative Tim Material Dashboard Content
I want to Maximize the Text Converter card
Actually there is an Angualar template like this.
But i'm learning Web Development using Angular. I learn by solving error and doing things than learning by reading.
So i use the bootstrap template then applied it in the Angular app.
This is the code for the dashboard
<body class="">
<div class="wrapper ">
<div class="sidebar" data-color="purple" data-background-color="white" data-image="../assets/img/sidebar-1.jpg">
<!--
Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
Tip 2: you can also add an image using data-image tag
-->
<div class="logo">
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
Creative Tim
</a>
</div>
<div class="sidebar-wrapper">
<ul class="nav">
<app-nav></app-nav>
</ul>
</div>
</div>
<div class="main-panel">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
<div class="container-fluid">
<div class="navbar-wrapper">
<a class="navbar-brand">Dashboard</a>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="content">
<div class="container-fluid">
<div class="row">
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>
</div>
</body>
And the code for the textconverter component
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header card-header-primary">
<h4 class="card-title">Text Converter</h4>
<p class="card-category">(Multiline to Single line) or (Single line to Multiline)</p>
</div>
<div class="card-body">
<form>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="bmd-label-floating">Fist Name</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="bmd-label-floating">Last Name</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary pull-right">Update Profile</button>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
</div>
but why does it not full screen? Even if i use the class class="col-lg-12"
But when the code is using two div class like in the code below.
<div class="row">
<div class="col-lg-10">
<div class="card">
<div class="card-header card-header-primary">
<h4 class="card-title">Text Converter</h4>
<p class="card-category">(Multiline to Single line) or (Single line to Multiline)</p>
</div>
<div class="card-body">
<form>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="bmd-label-floating">Fist Name</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="bmd-label-floating">Last Name</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary pull-right">Update Profile</button>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="card card-profile">
<div class="card-avatar">
<a href="#pablo">
<img class="img" src="../assets/img/faces/marc.jpg" />
</a>
</div>
<div class="card-body">
<h6 class="card-category text-gray">CEO / Co-Founder</h6>
<h4 class="card-title">Alec Thompson</h4>
<p class="card-description">
Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
</p>
Follow
</div>
</div>
</div>
</div>
It became like this.
It became full screen. Please see the screenshot below:
Full Screen row
Update:
Here is the code from the css class
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid #eeeeee;
border-radius: 0.25rem;
}
.card>hr {
margin-right: 0;
margin-left: 0;
}
.card>.list-group:first-child .list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.card>.list-group:last-child .list-group-item:last-child {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.card-body {
flex: 1 1 auto;
padding: 1.25rem;
}
.card-title {
margin-bottom: 0.75rem;
}
.card-subtitle {
margin-top: -0.375rem;
margin-bottom: 0;
}
.card-text:last-child {
margin-bottom: 0;
}
.card-link:hover {
text-decoration: none;
}
.card-link+.card-link {
margin-left: 1.25rem;
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: #fff;
border-bottom: 1px solid #eeeeee;
}
.card-header:first-child {
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
.card-header+.list-group .list-group-item:first-child {
border-top: 0;
}
.card-footer {
padding: 0.75rem 1.25rem;
background-color: #fff;
border-top: 1px solid #eeeeee;
}
.card-footer:last-child {
border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}
.card-header-tabs {
margin-right: -0.625rem;
margin-bottom: -0.75rem;
margin-left: -0.625rem;
border-bottom: 0;
}
.card-header-pills {
margin-right: -0.625rem;
margin-left: -0.625rem;
}
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
}
.card-img {
width: 100%;
border-radius: calc(0.25rem - 1px);
}
.card-img-top {
width: 100%;
border-top-left-radius: calc(0.25rem - 1px);
border-top-right-radius: calc(0.25rem - 1px);
}
.card-img-bottom {
width: 100%;
border-bottom-right-radius: calc(0.25rem - 1px);
border-bottom-left-radius: calc(0.25rem - 1px);
}
.card-deck {
display: flex;
flex-direction: column;
}
.card-deck .card {
margin-bottom: 15px;
}
#media (min-width: 576px) {
.card-deck {
flex-flow: row wrap;
margin-right: -15px;
margin-left: -15px;
}
.card-deck .card {
display: flex;
flex: 1 0 0%;
flex-direction: column;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
}
}
.card-group {
display: flex;
flex-direction: column;
}
.card-group>.card {
margin-bottom: 15px;
}
#media (min-width: 576px) {
.card-group {
flex-flow: row wrap;
}
.card-group>.card {
flex: 1 0 0%;
margin-bottom: 0;
}
.card-group>.card+.card {
margin-left: 0;
border-left: 0;
}
.card-group>.card:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.card-group>.card:first-child .card-img-top,
.card-group>.card:first-child .card-header {
border-top-right-radius: 0;
}
.card-group>.card:first-child .card-img-bottom,
.card-group>.card:first-child .card-footer {
border-bottom-right-radius: 0;
}
.card-group>.card:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.card-group>.card:last-child .card-img-top,
.card-group>.card:last-child .card-header {
border-top-left-radius: 0;
}
.card-group>.card:last-child .card-img-bottom,
.card-group>.card:last-child .card-footer {
border-bottom-left-radius: 0;
}
.card-group>.card:only-child {
border-radius: 0.25rem;
}
.card-group>.card:only-child .card-img-top,
.card-group>.card:only-child .card-header {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.card-group>.card:only-child .card-img-bottom,
.card-group>.card:only-child .card-footer {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.card-group>.card:not(:first-child):not(:last-child):not(:only-child) {
border-radius: 0;
}
.card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-img-top,
.card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom,
.card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-header,
.card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-footer {
border-radius: 0;
}
}
.card-columns .card {
margin-bottom: 0.75rem;
}
#media (min-width: 576px) {
.card-columns {
column-count: 3;
column-gap: 1.25rem;
}
.card-columns .card {
display: inline-block;
width: 100%;
}
}
What do i need to change in the code?
Thank you
Related
I'm building twitter clone and it's UI have a 3 column layout.
Working Implementation
When access it from desktop, it shows like this:
-------------------------------------------
| Navbar| Feed | Follow |
-------------------------------------------
When access it from tablet or mid size device, it shows like this:
-------------------------------------------
| Navbar| Feed |
-------------------------------------------
When access it from mobile or small size device, it shows like this(Navbar should be at bottom):
--------------------------------------------------
| Feed |
| Nav-item-1| Nav-item-2 | Nav-item-3| Nav-item-4|
--------------------------------------------------
I'm successful in making layout responsive for tablet and desktop but for mobile I'm having issues.
This is what I have tried:
#media (max-width: 480px) {
.bootomTab {
display: flex !important;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: white;
border-top: 1px solid #e6ecf0;
align-items: flex-start;
flex-direction: row !important;
}
}
Full Code:
import "./styles.css";
export default function App() {
return (
<div className="wrapper">
<div className="row">
<nav className="bootomTab d-none d-sm-flex col-sm-2 col-lg-3">
<div>
<div className="logo">
<a href="/home">
<img src="/twitter.png" alt="logo" />
</a>
</div>
<a href="/home">
<i className="fas fa-home"></i>
</a>
<a href="/search">
<i className="fas fa-search"></i>
</a>
<a href="/notifications">
<i className="fas fa-bell"></i>
</a>
<a href="/messages">
<i className="fas fa-envelope"></i>
</a>
<a href="/profile">
<i className="fas fa-user"></i>
</a>
<a href="/signout">
<i className="fas fa-sign-out-alt"></i>
</a>
</div>
</nav>
<div className="mainSectionContainers col-12 col-sm-8 col-lg-5 ml-2">
<div className="titleContainer">
<h1>Home</h1>
</div>
Feed
</div>
<div className="d-none d-lg-flex col-md-2 col-lg-4 mt-5">
{/* Follow suggestions */}
<aside className="followSuggestion">
<div className="followSuggestionHeader">
<h2>Who to follow</h2>
</div>
<div className="followUsernameContainer">
<div className="userImageContainer">
<img src="/defaultProfilePic.jpg" alt="user pic" />
</div>
<div className="midFollowContainer">
<div className="displayName">
<span>Yogesh Yadav</span>
</div>
<div className="username">
<span>#yogeshdecodes</span>
</div>
</div>
<div className="buttonContainer">
<button id="submitPostButton">Follow</button>
</div>
</div>
<div className="followUsernameContainer">
<div className="userImageContainer">
<img src="/defaultProfilePic.jpg" alt="user pic" />
</div>
<div className="midFollowContainer">
<div className="displayName">
<span>Yogesh Yadav</span>
</div>
<div className="username">
<span>#yogeshdecodes</span>
</div>
</div>
<div className="buttonContainer">
<button id="submitPostButton">Follow</button>
</div>
</div>
<div className="followUsernameContainer">
<div className="userImageContainer">
<img src="/defaultProfilePic.jpg" alt="user pic" />
</div>
<div className="midFollowContainer">
<div className="displayName">
<span>Yogesh Yadav</span>
</div>
<div className="username">
<span>#yogeshdecodes</span>
</div>
</div>
<div className="buttonContainer">
<button id="submitPostButton">Follow</button>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}
CSS Code:
div .logo {
width: 50px;
height: 50px;
}
div .logo img {
width: 100%;
}
nav {
display: flex;
flex-direction: column;
align-items: flex-end;
height: 100%;
}
nav a {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
font-size: 30px;
width: 55px;
height: 55px;
text-decoration: none;
color: #212529;
}
nav a:hover {
background-color: var(--buttonHoverBg);
color: var(--primary-blue);
border-radius: 50%;
}
.mainSectionContainers {
padding: 0;
margin: 0 -10px 0 10px;
border-left: 1px solid #e6ecf0;
border-right: 1px solid #e6ecf0;
}
.titleContainer {
height: 53px;
padding: 0 15px;
display: flex;
align-items: center;
border-bottom: 1px solid #e6ecf0;
flex-shrink: 0;
}
.followSuggestion {
background-color: rgb(247, 249, 249);
border-radius: 16px;
padding: 15px;
margin: 0px 20px 20px 20px;
}
.followSuggestionHeader {
border-bottom: 1px solid #e6ecf0;
}
.followSuggestionHeader h2 {
font-size: 20px;
font-weight: 800;
}
.followUsernameContainer {
flex: 1;
display: flex;
padding: 12px 0;
border-bottom: 1px solid #e6ecf0;
}
.midFollowContainer {
padding: 0 15px;
}
.userImageContainer {
width: 50px;
height: 50px;
}
.userImageContainer img {
width: 100%;
border-radius: 50%;
background-color: white;
}
#submitPostButton {
background-color: #1fa2f1;
color: white;
border: none;
border-radius: 40px;
padding: 7px 15px;
}
#media (max-width: 480px) {
.bootomTab {
display: flex !important;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: white;
border-top: 1px solid #e6ecf0;
align-items: flex-start;
flex-direction: row !important;
}
.logo {
display: none;
}
}
Finally, I managed to make it fully responsive.
The issue is because of the wrong breakpoint(480px) I have set and extra div present outside nav-items which override parent class property.
Changes I have made in css:
#media (max-width: 576px) {
.bootomTab {
display: flex !important;
position: absolute;
bottom: 0;
height: 50px;
background-color: white;
border-top: 1px solid #e6ecf0;
flex-direction: row !important;
}
.bootomTab a {
flex-grow: 1;
}
.logo {
display: none;
}
.mobileHide{
display: none;
}
}
On desktop, it shows like this:
On tablet, it shows like this:
On mobile, it shows like this:
I am trying to achieve borders on each print page, on chrome it works fine but in safari border is getting chopped.
I have created a div which is fixed. That div has borders so when window print is triggered, borders comes on all the pages on chrome, but not on safari.
Anyone has solution for this??
my code:
<div class="loading-mask" data-role="loader" style="display: none !important">
<div class="loader">
</div>
</div>
<div class="cutom-container"></div>
<div class="content-div">
<div>
<div class="logo-content">
<div class="logo-div">
<img class="print-logo" src="<?= $this->getViewFileUrl('images/cart-page-print-logo.png'); ?>" alt="<?= __('Print Header Logo'); ?>"/>
<p>
----- </h3>
</p>
<div class="input-container">
<label>Company Name : </label><span id="pcname"> </span>
</div>
<div class="input-container">
<label>Contact : </label><span id="pcontact"> </span>
</div>
<div class="input-container">
<label>Phone : </label><span id="pphone"> </span>
</div>
</div>
</div>
<div class="img-content">
<img class="promotional-img" src="<?= $this->getViewFileUrl('images/PRT-offer graphic.png'); ?>" alt="<?= __('Print Offer'); ?>"/>
</div>
</div>
<div>
<div class="input-container">
<label>Email : </label><span id="pemail"> </span>
</div>
<div class="input-container">
<label>Delivery Address : </label><span id="daddress"> </span>
</div>
<div class="input-container">
<label>Mailing Address : </label><span id="maddress"> </span>
</div>
</div>
<div>
<table id="product-list-print">
</table>
</div>
<div id="sub-total-print">
</div>
<div>
<div class="logo-content">
<p>
Shipping (Shipping rates are appox and apply to US Mainland ONLY)</br> - Please see Sales Specialist for exact quote. Shipping rates for Aff ordable Advantage Trailers do not apply. Park Model Units will require additional shipping fee. <strong>Estimate is valid for 7 days.</strong>
</p>
</div>
<div class="img-content">
<div>
To order this unit sign here
</div>
<div>
<canvas id="myCanvas" style="width: 100%">Your browser does not support the HTML5 canvas tag.</canvas>
</div>
</div>
</div>
</div>
css :
/* Print page css */
.cutom-container{
border : solid #670827 5px;
border-radius: 10px;
position:fixed;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
/*border: 5px solid red;*/
}
.content-div{
padding: 10px 5px 5px 5px;
display: none;
}
.logo-content{
display: inline-block;
width: 64%
}
.img-content{
display: inline-block;
width: 35%
}
.print-logo{
width: 50%;
}
.logo-div{
text-align: center;
}
.promotional-img{
width: 100%;
}
.img-content{
text-align: center;
}
.input-container{
padding: 8px;
text-align: left;
border:solid #670827 1px;
font-size: 15px;
margin: 10px;
}
/* end */
.warranty-container{
padding: 10px;
font-size: 16px;
border: solid;
border-width: 1px;
}
.cart-product-warrenty{
display: none;
}
.center-align{
text-align: center;
}
#signArea{
margin-bottom:20px ;
}
#media print {
#page {
border : solid #670827 5px;
border-radius: 10px; }
.cart-container{
display: none;
}
.cutom-container{
display: block !important;
padding: 15px;
}
.content-div{
display: block !important;
padding: 15px;
}
.cart-product-warrenty{
display: contents;
}
.summary.title{
display: none;
}
#sub-total-print>.fieldset{
display: none;
}
#block-shipping{
display: none;
}
input.qty{
width: 50px !important;
padding: 0 !important;
text-align: center;
}
.product-item-name{
text-decoration: unset;
font-size: 1.8rem;
line-height: 1;
font-weight: 700;
padding-top: 0px;
}
.messages{
display: none;
}
a{
text-decoration: none !important;
}
}
#media only screen and (max-width: 600px) {
.modal-content{
width: 80%;
}
.current{
width: 250px !important;
}
.sign-pad{
width: 247px !important;
}
.modal-content{
margin-bottom: 55px;
}
.cart-product-warrenty{
display: none;
}
}
I like to use BEM naming convency in some of my projects nad now, I'm working on design system and I stopped with my modificators.
I created all version of Input that we use in our application, and I have this case:
I modify that Input few times: --is-invalid, --is-disabled, --has-status and I have problem with the has-status one. I have more colors for this status and I am not sure how to deal with it.
I would prefer my modificator for status be like .Input--has-status-load, .Input--has-status-warning etc. But the problem is, that I don't want to repeat declaration of this modificator X times, for each status. That's why I added classes just for colors (.success and .warning), but this little hacked my BEM naming convency that I don't want to demolish.
Do you have any idea? Or do you have any notes on that code?
Thanks for sharing your knowledge!
CodePen DEMO
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Source Sans Pro', sans-serif;
}
::placeholder {
color: #ccc;
opacity: 1;
/* Firefox */
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #ccc;
}
::-ms-input-placeholder {
color: #ccc;
}
.container {
max-width: 1080px;
margin: 0 auto;
}
.row {
margin: 1em;
}
h2 {
margin-top: 2em;
}
/* ============================================================================
05 - COMPONENTS - Input.scss
========================================================================= */
/* Component structure:
.Input {}
.Input__container {}
.Input__fake-input {}
.Input__field {}
.Input__prefix {}
.Input__suffix {}
.Input__icon {}
.Input--has-status {}
.Input--is-invalid {}
.Input--is-disabled {}
*/
// Component local variables
$input-border-color: #D8DADC;
$input-text-gray: #979797;
$input-text-color: #457CCC;
$input-border-radius: 8px;
$input-font-size: 16px;
// Base structure
.Input {
position: relative;
}
// Input container for all elements
.Input__container {
display: flex;
position: relative;
flex-direction: row;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: justify;
justify-content: space-between;
height: 40px;
font-size: $input-font-size;
}
// Input fake input, who replaces real input
.Input__fake-input {
width: 100%;
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
height: 40px;
font-size: $input-font-size;
border-radius: $input-border-radius;
transition: all 0.15s ease-in-out 0s;
border-width: 1px;
border-style: solid;
border-color: $input-border-color;
border-image: none;
}
// Input text field for add text
.Input__field {
border: 0;
-webkit-appearance: none;
color: $input-text-color;
font-size: inherit;
background-color: transparent;
width: 100%;
height: 100%;
z-index: 2;
padding: 0px 12px;
flex: 1 1 20%;
border-radius: $input-border-radius;
&:focus {
outline: none;
&~.Input__fake-input {
outline: none;
border: 1px solid #0284FF;
}
}
}
// Input type PREFIX
.Input__prefix {
height: 100%;
color: $input-text-gray;
display: flex;
-webkit-box-align: center;
align-items: center;
pointer-events: none;
-webkit-box-pack: center;
justify-content: center;
z-index: 3;
padding: 0px 0px 0px 10px;
}
// Input type SUFFIX
.Input__suffix {
height: 100%;
color: $input-text-gray;
display: flex;
flex-shrink: 0;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
z-index: 3;
padding: 0px 10px 0px 0;
}
// Input type ICON
.Input__icon {
height: calc(100% - 2px);
color: $input-text-gray;
display: flex;
flex-shrink: 0;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
z-index: 3;
padding: 0px 10px;
position: relative;
width: 48px;
border-left: 1px solid $input-border-color;
cursor: pointer;
& img,
svg {
width: 25px;
}
}
// Modificator --has-status
.Input--has-status {
position: relative;
}
.Input--has-status::after {
content: '';
position: absolute;
top: -4px;
right: -4px;
z-index: 3;
width: 10px;
height: 10px;
border-radius: 100%;
background: #1A73E8;
}
// --has-status types
.Input--has-status.success::after {
background: #37C9AD;
}
.Input--has-status.warning::after {
background: #FFB000;
}
// Modificator --is-invalid
.Input--is-invalid {
& .Input__fake-input {
border: 1px solid #FF0054;
}
& .Input__field {
color: #FF0054;
&:focus~.Input__fake-input {
border-color: #FF0054;
}
}
}
// Modificator --is-disabled
.Input--is-disabled {
& .Input__fake-input {
background-color: #E8EAEC;
border-color: #E8EAEC;
color: #868C92;
ursor: not-allowed;
border: 1px solid #E8EAEC;
}
& .Input__field {
color: #868C92;
cursor: not-allowed;
}
}
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,900&display=swap" rel="stylesheet">
<div class="container">
<form>
<div class="row">
<h1> Types</h1>
<h2>Input - default</h2>
<div class="Input">
<div class="Input__container">
<input class="Input__field" type="text" placeholder="Placeholder">
<div class="Input__fake-input"></div>
</div>
</div>
<h2>Input - prefix</h2>
<div class="Input">
<div class="Input__container">
<div class="Input__prefix">
<span class="Prefix">Prefix</span>
</div>
<input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum dolor">
<div class="Input__fake-input"></div>
</div>
</div>
<h2>Input - suffix</h2>
<div class="Input">
<div class="Input__container">
<input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum dolor">
<div class="Input__suffix">
Suffix
</div>
<div class="Input__fake-input"></div>
</div>
</div>
<h2>Input - icon</h2>
<div class="Input">
<div class="Input__container">
<input class="Input__field" type="text" placeholder="Placeholder">
<div class="Input__icon">
<img src="https://image.flaticon.com/icons/svg/331/331383.svg">
</div>
<div class="Input__fake-input"></div>
</div>
</div>
<br><br>
<h1>Modificators</h1>
<h2>Input - Load Success</h2>
<div class="Input Input--has-status success">
<div class="Input__container">
<input class="Input__field" type="text" placeholder="Placeholder">
<div class="Input__fake-input"></div>
</div>
</div>
<h2>Input - Load Warning</h2>
<div class="Input Input--has-status warning">
<div class="Input__container">
<input class="Input__field" type="text" placeholder="Placeholder">
<div class="Input__fake-input"></div>
</div>
</div>
<h2>Input - Invalid</h2>
<div class="Input Input--is-invalid">
<div class="Input__container">
<input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum dolor">
<div class="Input__fake-input"></div>
</div>
</div>
<h2>Input - Disabled</h2>
<div class="Input Input--is-disabled">
<div class="Input__container">
<input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum" disabled>
<div class="Input__icon">
<img src="https://image.flaticon.com/icons/svg/331/331383.svg">
</div>
<div class="Input__fake-input"></div>
</div>
</div>
</div>
</form>
</div>
This containers are arranged using nested flexbox. When I added an unordered list with zero padding, it got outside the child container. Not only that it also goes outside the parent container.
:root {
--main-bg-color: #3D3E5D;
--bg-color-red: #F06D4F;
--bg-color-aqua: #2DA6A4;
--bg-color-orange: #EFB85E;
--txt-color-primary: black;
--txt-color-secondary: white;
--heading: 3rem;
--sub-heading: 2rem;
--normal: 1rem;
--small: 0.5rem;
--main-padding: 10px;
}
* {
margin: none;
padding: 0;
box-sizing: border-box;
}
.container__main {
width: 90%;
margin: auto;
}
.container__flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex__box {
font-weight: 900;
font-size: var(--normal);
background-color: aqua;
flex: 0 0 calc(50% - 10px);
}
.red {
background-color: red;
}
.gray {
background-color: gray;
}
.container__main>.container__flex {
margin-bottom: 10px;
}
.container__flex>.flex__box {
padding: var(--main-padding);
}
.p-0 {
padding: 0 !important;
}
<div class="container__main">
<div class="container__flex">
<div class="flex__box">
<b></b>
<span class="heading">W</span>eb <span class="heading">A</span>pplication <span class="heading">T</span>echnologies
</div>
<div class="flex__box gray">
<div class="container__flex">
<div class="flex__box p-0 red">
<span class="sub-heading">Links</span>
<ul>
<li>Chubkins</li>
<li>W3 Schools</li>
<li>Learn Web Dev</li>
<li>Colour Reference</li>
</ul>
</div>
<div class="flex__box p-0 red">
</div>
</div>
</div>
</div>
<div class="container__flex">
<div class='flex__box'>
box1
</div>
<div class='flex__box'>
box2
</div>
</div>
</div>
Picture of the mentioned problem: https://prnt.sc/plgv0y
If you want to help me debug this view this codepen link:
https://codepen.io/bishant-bhattarai/pen/qBBqqYE
Since this was a small project I didn't add any comments, sorry for inconvineince.
This is probably due to the default value of the CSS property list-style-position.
You can try and change that like this:
:root {
--main-bg-color: #3D3E5D;
--bg-color-red: #F06D4F;
--bg-color-aqua: #2DA6A4;
--bg-color-orange: #EFB85E;
--txt-color-primary: black;
--txt-color-secondary: white;
--heading: 3rem;
--sub-heading: 2rem;
--normal: 1rem;
--small: 0.5rem;
--main-padding: 10px;
}
* {
margin: none;
padding: 0;
box-sizing: border-box;
}
.container__main {
width: 90%;
margin: auto;
}
.container__flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex__box {
font-weight: 900;
font-size: var(--normal);
background-color: aqua;
flex: 0 0 calc(50% - 10px);
}
.red {
background-color: red;
}
.gray {
background-color: gray;
}
.container__main>.container__flex {
margin-bottom: 10px;
}
.container__flex>.flex__box {
padding: var(--main-padding);
}
.p-0 {
padding: 0 !important;
}
ul {
list-style-position: inside;
}
<div class="container__main">
<div class="container__flex">
<div class="flex__box">
<b></b>
<span class="heading">W</span>eb <span class="heading">A</span>pplication <span class="heading">T</span>echnologies
</div>
<div class="flex__box gray">
<div class="container__flex">
<div class="flex__box p-0 red">
<span class="sub-heading">Links</span>
<ul>
<li>Chubkins</li>
<li>W3 Schools</li>
<li>Learn Web Dev</li>
<li>Colour Reference</li>
</ul>
</div>
<div class="flex__box p-0 red">
</div>
</div>
</div>
</div>
<div class="container__flex">
<div class='flex__box'>
box1
</div>
<div class='flex__box'>
box2
</div>
</div>
</div>
cf. https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position
I'm trying to centralize colors (.attr-image-container) on div(.swat-container) but nothing works, so please can anybody help me?
i have tried putting margin:0px auto; in many places
My html:
<dd class="last">
<div class="input-box">
<div class="settings-swatch-container">
<div class="swat-container">
<div class="attr-image-container">
<div class="attr-image" alt="Amarelo" title="Amarelo" style="background-color:#FFF700;"></div>
</div>
<div class="attr-image-container">
<div class="attr-image" alt="Azul Escuro" title="Azul Escuro" style="background-color:#005EFF;"></div>
</div>
<div class="attr-image-container">
<div class="attr-image" alt="Verde" title="Verde" style="background-color:#4DFF29;"></div>
</div>
</div>
</div>
</div>
Mycss
.swat-container{
width:100%;
height:100%;
margin:auto;
}
.attr-image
{
width: 30px;
height: 30px;
padding: 1px;
margin-right: 5px;
cursor:pointer;
border: 2px solid #00BFFF;
}
.main-swatch-container
{
width: 100%;
clear: both;
margin:auto;
}
.attr-image-container
{
float:left;
position:relative;
text-align: center;
}
Use a flex...
dd {
padding: 0;
margin: 0;
}
.swat-container {
width: 100%;
height: 100%;
margin: auto;
display: flex;
justify-content: center;
}
.attr-image {
width: 30px;
height: 30px;
padding: 1px;
margin-right: 5px;
cursor: pointer;
border: 2px solid #00BFFF;
}
.main-swatch-container {
width: 100%;
margin: auto;
}
.attr-image-container {
position: relative;
text-align: center;
}
<dd class="last">
<div class="input-box">
<div class="settings-swatch-container">
<div class="swat-container">
<div class="attr-image-container">
<div class="attr-image" alt="Amarelo" title="Amarelo" style="background-color:#FFF700;"></div>
</div>
<div class="attr-image-container">
<div class="attr-image" alt="Azul Escuro" title="Azul Escuro" style="background-color:#005EFF;"></div>
</div>
<div class="attr-image-container">
<div class="attr-image" alt="Verde" title="Verde" style="background-color:#4DFF29;"></div>
</div>
</div>
</div>
</div>
</dd>