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.
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>
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.
I'm new to web developing and I'm trying to create a navigation bar with Bootstrap 5.1.3.
I'm trying to perfectly center "Postal Office", but as you can see it seems to be pushing out to the right. I've tried doing something like mx-auto but it doesn't help. Thanks.
<!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>Post Office</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<!--Navigation-->
<div class="m-4">
<nav class="navbar navbar-expand-sm navbar-light" style="background-color: #e3f2fd;">
<div class="container-fluid">
<ul class="nav navbar-nav me-auto">
Home
Mail
Pricing
Contact Us
</ul>
Postal Office
<ul class="nav navbar-nav ms-auto">
<li class="nav-item dropdown">
Account Options
<div class="dropdown-menu dropdown-menu-end">
My Account
Database Access
Sign Out
</div>
</li>
</ul>
</div>
</nav>
</div>
</body>
Output: img
This is because your left data contain more data & space then right your left data contain 262.17 with 4 column and your right data contain 148.05 with 4 column
look like
40
40
40
262.17
110.08
148.05
This solution works because I am splitting the navbar into two navbars. I noticed that regardless of any <center></center> or other HTML/CSS trickery, if you place your text into the navbar with centering, it will be centered with relation to the navbar and not the actual html document.
You probably noticed that the text you desired to put into the center ("Post Office") was centered with respect to the elements already located in the navbar. This is why your text was always shifted slightly to the right — your text had equal spacing between itself and the leftside elements of the navbar and between itself and the rightside elements of the navbar. This is why when we break down the navbar into two navbars, then we can insert centered text that is globally centered to the webpage, as you desired.
The only downside I see to my method is scaling, which you may have to play around with more.
<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>Post Office</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<style>
<!-- START CHANGE-->
<!-- Added CSS elements as suggested by https://stackoverflow.com/questions/45691242/centering-my-text-in-bootstrap-navbar but pretty sure it would work without this-->
.nav {
display: flex;
justify-content: center;
list-style: none;
}
<!-- END CHANGE-->
</style>
</head>
<body>
<!--Navigation-->
<div class="m-4">
<nav class="navbar navbar-expand-sm navbar-light" style="background-color: #e3f2fd;">
<div class="container-fluid">
<ul class="nav navbar-nav me-auto">
Home
Mail
Pricing
Contact Us
</ul>
</div>
<!-- START CHANGE -->
<!-- Split Navbar into two, so that centering is "global" and not relative to the navbar elements -->
<center>Postal Office</center>
<!-- END CHANGE -->
<div class="container-fluid">
<ul class="nav navbar-nav ms-auto">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle"
data-bs-toggle="dropdown">Account Options</a>
<div class="dropdown-menu dropdown-menu-end">
My Account
<a href="database-access.php" class="dropdown-item">Database
Access</a>
Sign Out
</div>
</li>
</ul>
</div>
</nav>
Here is the result which the OP desired: Centered title in a Bootstrap navbar
I am new to bootstrap and am trying to figure out why my menu on the a smaller screen overlaps my picture instead of pushing it down.
I want to have a fixed menu on all screen sizes and it is fine on the desktop sizes, and is actually fixed on 768px. But it needs to push the content down vertically on smaller sizes and right now it is going over the top of my picture.
I have seen the post that said to change to a static header, which I tried, but lost the fixed header in the desktop and still did not push the picture down when expanding the menu on a smaller screen. Something must be off with my basic structure perhaps, as opposed to my css, as I have not really styled the small sized screens yet with css since it seems like a different type of problem. I want to keep the fixed header at all times, and push content down on smaller sizes using the sandwich menu, in what I would think is a more normal process.
Bootstrap is v3.3.7
Any insight would be greatly appreciated
<!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">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/head-wrapper.css" rel="stylesheet" type="text/css">
<link href="css/navbar1.css" rel="stylesheet" type="text/css">
<link href="css/menu.css" rel="stylesheet" type="text/css">
<link href="css/first-picture.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="top-header"><div class="top-header">
<div id="header-wrapper">
<div class="telephone-icon"><span class="glyphicon glyphicon-phone-alt"></span></div>
<div class="tele-number">530-273-1343</div>
<div class="email-icon"><span class="glyphicon glyphicon-envelope"></span></div>
<div class="email-address">Email CBC</div>
</div>
</div></div>
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav">
<li>I'm New</li>
<li>Beliefs</li>
<li>Ministries</li>
<div class="menu-picture"><span class="navbar-brand" href="#"><img src="images/GBCBC-LOGO2.jpg" alt="My Logo"></span></div>
<li>Missions</li>
<li>Sermons</li>
<li>News/Events</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<div class="container-fluid test">
<div class="first-picture"><img src="images/sermon.jpg" width="960" height="600" alt=""/></div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
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.