In tailwindcss, it seems like the start col-start-{n} class is ignored if you set span col-span-{n} class on a screen breakpoint. For example: col-start-2 col-span-2 md:col-span-3 when you reach the md breakpoint the col-start-2 is ignored.
Is this the expected behavior in tailwind? I can't find it documented anywhere.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p>The 😲 should always start at column 2, but when it reaches the "md" screen width, it starts at column 1</p>
<div class="grid grid-cols-6 gap-2">
<div class="col-start-2 col-span-2 bg-red-50 md:col-span-3">😲</div>
</div>
<!-- SCREEN SIZE DEBUG HELPER, IGNORE -->
<div class="p-1 fixed mt-50 text-24 text-red-0 bg-purple-400 text-white rounded-lg">
<span>Screen Size:</span>
<span class="hidden 2xl:inline">2XL</span>
<span class="lg:hidden hidden md:inline">MD</span>
<span class="md:hidden hidden sm:inline">SM</span>
<span class="sm:hidden inline">XS</span>
</div>
</body>
</html>
The problem as you mentioned, the col-span will override the col-start
Here is a comment I found by the creator of Tailwind CSS
Solution:
Add md:col-start-2 class, and it should work perfectly.
Related
I'm failing to show Font Awesome icons on my app (only this page)! The icons are showing on the other pages but not on this one I don't know why! and yes I'm importing it in my index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
A link to codesandbox for better viewing
Here the code:
export default function Post({ post }) {
return (
<div className="coupon-container">
<div className="coupon">
<div className="content">
<h2>TITLE GOES HERE</h2>
<h1>
TEXT <span>TEXT</span>
</h1>
</div>
<div className="couponValidity">
<i className="fa fa-solid fa-timer"></i>
<p>SOME TEXT GOES HERE</p>
</div>
</div>
</div>
);
}
The icon you're using doesn't exist on the style you've imported. as I see the timer icon is a pro icon. but if you choose another icon, like:
<i className="fa fa-user"></i>
then the icon is rendered.
this works on me
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
</head>
<body>
<i class="fa fa-user"></i>
<p>SOME TEXT GOES HERE</p>
</body>
</html>
I have seen that this question had been asked before and I tried the different answers provided, however, none seemed to work on my code.
I am working on fixing a series of inputs that are displaying in two columns in Chrome and Firefox, but not in IE11.
This is how it looks on Chrome
This is how it looks on IE11
Here is the code being used
<div class="d-flex flex-wrap justify-content-between">
<div *ngFor="let field of fieldsToDisplay;let i = index"
ng-class="'address-single-div-class w-100': field.FieldType.toString() == FieldType_Type.Textarea.toString(), 'address-single-div-class': field">
<input-field
*** series of inputs ***
</input-field>
</div>
</div>
Try to add the col-* classes for the input fields, please check the following sample:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<p>Use .flex-fill on flex items to force them into equal widths:</p>
<div class="d-flex flex-wrap justify-content-between mb-3">
<input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 1" />
<input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 2" />
<input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 3" />
<input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 4" />
</div>
</div>
</body>
</html>
The result in IE11 browser:
Ok so I fixed my problem by adding width:50% to the second div that has the input fields. You can see the image I attached in my question for reference.
Apparently, flex-wrap doesn't do its job properly in IE11 due to some bugs. So instead of wrapping the elements, IE11 expands the container. By adding the width I predefined the container's size, that way it actually wraps the input fiels AND give them the full input size, so I do not need to use flex-fill. Plus, it doesn't affect the display in Chrome or Firefox.
This question already has answers here:
How to make div fill full height of parent in tailwind
(2 answers)
Closed 2 years ago.
I'm having trouble because I'm newbie in CSS and flexbox.
I'm trying to create a navbar with the amazing TailwindCSS, but I need the Links vertically centered and background-color full height in navbar.
What I'm doing wrong?
https://codesandbox.io/s/tailwindcss-navbar-sgpie
I tried items-center for parents and self-center for items, still the problem.
please try to use your class bg-green-400 in <nav> instead of bg-white and remove bg-green-400 from <a> for more understanding please refer the below snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link
href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<link href="./index.css" rel="stylesheet" />
</head>
<body class="bg-blue-600">
<nav class="bg-green-400">
<div class="container flex">
<a class="bg-red-400 text-3xl p-4">Project name</a>
<div class="flex items-center">
<a class="p-2">Link</a>
<a class="p-2">Link</a>
<a class="p-2">Link</a>
<a class="p-2">Link</a>
</div>
</div>
</nav>
</body>
</html>
Thank You...
The problem I'm having only occurs in Mobile. Note that I'm using simple dropdown as well.
I look all the threads related to that, but cannot figure out why the menu does not work.
See the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Semantic-UI Issue</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css" />
</head>
<body>
<div class="ui fixed inverted menu">
<div class="ui container">
Home
<div class="ui simple dropdown item">
Menu <i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="https://reactgirl.github.io/portifolio/about.html">About me</a>
<div class="divider"></div>
<a class="item" href="https://github.com/ReactGirl/portifolio/blob/master/about.html">This Code</a>
<a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues/6465">Semantic UI issue</a>
</div>
</div>
</div>
</div>
<div style='padding: 100px 0 0 30px'>
<div>Example page to show a semantic UI issue with the dropdown on mobiles: The dropdown does not open!</div>
<div class="ui padded segment">From the docs: "A simple dropdown can open without Javascript."</div>
<div><strong>The menu dropdown issue was reproduced on the following Mobiles:</strong></div>
<li>iPhone X. Browsers: Safari, Chrome.</li>
<li>iPhone 6. Browsers: Safari, Chrome.</li>
<div class="ui divider"></div>
References:
<div>
Semantic UI GitHub issue
</div>
</div>
</body>
</html>
You need to initialize the dropdown.
$('.ui.dropdown').dropdown();
This is actually a confirmed issue in Semantic-UI.
https://github.com/Semantic-Org/Semantic-UI/issues/6465
My solution was setting Z-index higher on the icon (.dropdown.icon).
The icon was unclickable due to being behind the text input.
I am using Bootstrap to make the style of my webpage.
I want to do something similar to this image:
I have been trying it (in the snipped you can test it), but I don't know if it is the best way to do it.
I mean that i'm not sure if is correct to add two divs without any data on it (col-xs-2), only to add some spaces (columns of bootstrap) to the left and to the right.
Is there a better way to do that?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" style="background-color:white;>
<div class="row" >
<div class="col-xs-12">WEB LOGO------------------------</div>
<div class="row">
<div class="col-xs-2" style="background-color:white;"></div>
<div class="col-xs-8" style="background-color:grey;">YES</div>
<div class="col-xs-2" style="background-color:white;"></div>
</div>
<span> more content here -------------</span>
</div>
</div>
</body>
</html>
Instead of the empty div's you can use an offset:
<div class="col-xs-8 col-xs-offset-2" style="background-color:grey;">YES</div>
This will move your element 2 columns to the right.
You need to implement style="inline-block" inside of the parent div you want the children to fall inline in.