I tried, having a modal inside a footer section of a page (using materialize css). On clicking the modal, it pops up and shows a materialize collection. But once I close the pop up, the modal button , sort of freezes , and only if i move my cursor over it , it regains it original color.
As in the image, the modal button looks like it's inactive(whitish blue color) and if I move my mouse over it, it regains its original color.
Here's my code:
$(document).ready(function() {
$('#modal1').modal();
});
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<footer class="page-footer black">
<div class="row">
<div class="col s1 m1">
<div class="footer-copyright">
<div class="container" id="copyright">
© copyright text
</div>
</div>
</div>
<div class="col s11 m11">
<!-- <div class="row" id="modal"> -->
<a class="waves-effect blue waves-light btn modal-trigger" href="#modal1">Modal</a>
<div id="modal1" class="modal bottom-sheet">
<div class="modal-content">
<div class="collection">
<h2 style="color:black;">Text Analysis</h2>
item 1
item 2
item3
</div>
<div class="modal">
Close
</div>
</div>
</div>
</div>
</div>
</footer>
How do I rectify this glitch?
As stated in this ISSUE, the issue is given by the double inclusion of javascript files in your <head>.
Remove the older version in order to make it work..
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
Related
using w3css, cannot make "Wish you a happy day" in the center of the sand-colored section yet.
<html>
<head>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body,h1,h2,h3,h4,h5 {font-family: "Trirong", serif}
</style>
</head>
<body class="w3-light-grey">
<!-- w3-content defines a container for fixed size centered content,
and is wrapped around the whole page content, except for the footer in this example -->
<div class="w3-content" style="max-width:1100px">
<!-- Header -->
<header class="w3-container w3-center w3-padding-32">
<p><button class="w3-button w3-padding-large w3-white w3-border">Welcome</button></p>
</header>
<!-- Grid -->
<div class="w3-row w3-card-4 w3-margin w3-sand">
<!-- Blog entries -->
<div class="w3-col l8 s12">
<img src="../static/images/101.jpg" alt="Nature" style="width:100%">
</div>
<div class="w3-col l4">
<div class="w3-container w3-sand">
<div class="w3-container w3-sand w3-center" style="width:80%; margin:auto;">
<p>
<h7>WELCOME</h7>
<h3><b>Wish you a happy day</b></h3>
<h6>Keep calm and carry on !</h6>
</p>
</div>
</div>
</div>
<!-- END GRID -->
</div>
<br>
<!-- END w3-content -->
</div>
</body>
</html>
[![enter image description here][1]][1]
Any suggestions ?
ok i used w3-cell and we-cell-row, not w3-container, it's working now
see this sample
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_layout_align_all
I copied the menu example provided from the Sementic UI website into Visual Studio Code and tried running it as it is, but JS doesn't work.
As described on the website, the sidebar should appear when you click the menu button.
css, jQuery, sementic.min.js are all set through CDN. I entered the JS Code from the Console in Chrome DevTools, but it says'Uncaught TypeError: $(...).sidebar is not a function at :2:3'.
$('.context.example .ui.sidebar')
.sidebar({
context: $('.context.example .bottom.segment'),
})
.sidebar('attach events', '.context.example .menu .item');
<!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>Semantic UI</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"
integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="/main.js"></script>
</head>
<body>
<div class="ui top attached demo menu">
<a class="item">
<i class="sidebar icon"></i>
Menu
</a>
</div>
<div class="ui bottom attached segment pushable">
<div class="ui inverted labeled icon left inline vertical sidebar menu">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="item">
<i class="block layout icon"></i>
Topics
</a>
<a class="item">
<i class="smile icon"></i>
Friends
</a>
<a class="item">
<i class="calendar icon"></i>
History
</a>
</div>
<div class="pusher">
<div class="ui basic segment">
<h3 class="ui header">Application Content</h3>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
</div>
</body>
</html>
$('.context.example .ui.sidebar')
.sidebar({
context: $('.context.example .bottom.segment'),
})
.sidebar('attach events', '.context.example .menu .item');
Remove .context.example from the script then it will work. But you may see another problem, the main application segment creates unknown padding with respect to the sidebar menu.
$('.ui.sidebar')
.sidebar({
context: $('.bottom.segment'),
})
.sidebar('attach events', '.menu .item');
<!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>Semantic UI</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"
integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="/main.js"></script>
</head>
<body>
<div class="ui top attached demo menu">
<a class="item">
<i class="sidebar icon"></i>
Menu
</a>
</div>
<div class="ui bottom attached segment pushable">
<div class="ui inverted labeled icon left inline vertical sidebar menu">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="item">
<i class="block layout icon"></i>
Topics
</a>
<a class="item">
<i class="smile icon"></i>
Friends
</a>
<a class="item">
<i class="calendar icon"></i>
History
</a>
</div>
<div class="pusher">
<div class="ui basic segment">
<h3 class="ui header">Application Content</h3>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
</div>
</body>
</html>
To remove this unnecessary padding from the application segment i will suggest to change <div class="ui inverted labeled icon left inline vertical sidebar menu"> to <div class="ui inverted left vertical sidebar menu">
$('.ui.sidebar')
.sidebar({
context: $('.bottom.segment'),
})
.sidebar('attach events', '.menu .item');
<!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>Semantic UI</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"
integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="/main.js"></script>
</head>
<body>
<div class="ui top attached demo menu">
<a class="item">
<i class="sidebar icon"></i>
Menu
</a>
</div>
<div class="ui bottom attached segment pushable">
<div class="ui inverted left vertical sidebar menu">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="item">
<i class="block layout icon"></i>
Topics
</a>
<a class="item">
<i class="smile icon"></i>
Friends
</a>
<a class="item">
<i class="calendar icon"></i>
History
</a>
</div>
<div class="pusher">
<div class="ui basic segment">
<h3 class="ui header">Application Content</h3>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
</div>
</body>
</html>
NB: You should use your script tag in the bottom section of your code. Avoid initiating script in the head section.
<!DOCTYPE html>
<html lang="en">
<head>
............
</head>
<body>
............
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="row table-row">
<div class="col-md-1 col-xs-1">
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" class="rounded-circle z-depth-0" alt="avatar image" height="35" />
</div>
<div class="col-md-3 col-xs-5">Felecia Burke</div>
<div class="col-md-2 d-none d-sm-block">Staff</div>
<div class="col-md-3 d-none d-sm-block">+1 (070) 123-4567</div>
<div class="col-md-2 col-xs-4">example#mail.com</div>
<div class="col-md-1 col-xs-1">
<i class="fas fa-ellipsis-h table-row-menu"></i>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Simple question, grid works on all other devices, but on mobile it's not even showing media queries. Very strange and I would appreciate another pair of eyes to take a look at this.
I want all divs to be visible of tablet, laptop or larger devices, but on mobile I want to hide Staff and phone number.
It displays everything in block style on mobile, I don't know why.
Template is copied from Bootstrap's official site.
Is it not hitting the xs screen size maybe? Is there a min-width on anything. I would try .d-sm-none .d-md-block and see if that works for the screen size you are testing.
I'm just throwing this out to show you, and then I can erase it. Everything is working as you say, the Mobile View staff and phone number are lost. Where is the problem ?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="row table-row">
<div class="col-md-1 col-xs-1">
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" class="rounded-circle z-depth-0" alt="avatar image" height="35" />
</div>
<div class="col-md-3 col-xs-5">Felecia Burke</div>
<div class="col-md-2 d-none d-sm-block">Staff</div>
<div class="col-md-3 d-none d-sm-block">+1 (070) 123-4567</div>
<div class="col-md-2 col-xs-4">example#mail.com</div>
<div class="col-md-1 col-xs-1">
<i class="fas fa-ellipsis-h table-row-menu"></i>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
I have been trying various combinations for the past one two hours and I am unable to get this basic thing right. I am using Bootstrap 4 and I have an image and a login dialog just beneath it.
I took the basic boiler plate code from Bootstrap 4 and tried to do alignment using
https://getbootstrap.com/docs/4.0/layout/grid/#horizontal-alignment
https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment
but in vain. I request you to tell me what part I a missing.
Here is my html file.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
<title>Hey - A group chat messenger!</title>
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-4">
<img src="hey_logo.png" id="logo" class="img-fluid">
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
<button type="submit" class="btn btn-primary">Login with Google</button>
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
<small id="subtextMessage" class="form-text text-muted">Say Hey! to new beginnings</small>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</script>
</body>
</html>
Thanks,
Pavan.
The above problem can be resolved by using a separate row with centre-aligned content for each element (image, button, text) inside a column.
Here is the working code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
<title>Hey - A group chat messenger!</title>
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-3">
<div class="row justify-content-md-center">
<img src="/hey-logo.png" id="logo" class="img-fluid">
</div>
<div class="row justify-content-md-center">
<button type="submit" class="btn btn-primary">Login with Google</button>
</div>
<div class="row justify-content-md-center">
<small id="subtextMessage" class="form-text text-muted">Say Hey! to new beginnings</small>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</script>
</body>
</html>
Output:
A button is an inline-block element in Bootstrap. Try using the text-center.
<div class="row">
<div class="col-4 text-center">
<button type="submit" class="btn btn-primary">Login with Google</button>
</div>
</div>
If it looks not fine (for example the image is not symettric), then give the col-4 some padding on the left or right side.
If I use a container. For instance
and then I use position relative. Position relative will mess with the container by moving left and right.Wouldn't this cause render issues for devices when i'm specifying the grids and then moving the content around?
What would be the proper way to move the content without messing up the grids I setup with col-md-#/col-sm-#
HTML
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Andy's Bike Shop"}}</span></i>
</div>
</div>
</div><!--Header Container-->
</div>
<div class="bikeSelector">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6"><!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
<div class="col-md-offset-2 col-md-10"><!-- you missed md from offset, end class not needed -->
Test
</div>
</div>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
CSS
.products {
position :relative;
left: 500px;
}
Your html is wrong in places for what you're trying to achieve.
Try this (not tested but should get you started)
<div class='row'>
<div class='col-md-offset-3 col-md-6'><!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
<div class="col-md-offset-2 col-md-10"><!-- you missed md from offset, end class not needed -->
<div class="products">
{{bike.name}}
</div>
</div>
</div><!--bike controller row-->
Here's a bootply which is a great way to test before you add