I have created a html page and used angular material for responsiveness but when i try to add a button using md-button it does not work but md-card is working fine.
I have included all the files shown below
Blockquote
<!DOCTYPE html>
<html>
<head>
<title>Image preview App</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body ng-app>
<md-card style="width:50%;height:300px;">
<md-button>button</md-button>
</md-card>
</body>
</html>
You are not seeing it because it does not get highlighted, apply a style
<md-card style="width:50%;height:300px;">
<md-button class="md-raised next-btn">button</md-button>
</md-card>
DEMO
Maybe your background is white and your button color is white. Try changing the color of one or the other.
<md-button style="color: #662D91;">button</md-button>
Related
On other html component like buttons or attribute data-toggle tool-tip with unique design are working fine see here link below as reference:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tooltip&stacked=h
However If I'm going to implement to dynamic dropdown or simple component the design from the tooltip will be gone and it will become plain, something like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.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://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>>
<select>
<option data-toggle="tooltip" title="Hooray1">Hooray1</option>
<option data-toggle="tooltip" title="Hooray2">Hooray2</option>
<option data-toggle="tooltip" title="Hooray3">Hooray3</option>
</select>
Any suggestion or comment how to have unique design tooltip on the dropdown. My aim is to have a tooltip with combination of text and image when the user hover for each value on the dropdown. TIA
As per bootstrap Documentation, you need to include popper.min.js before bootstrap.js for:
Tooltips and popovers for displaying and positioning (also requires Popper.js)
Dropdowns for displaying and positioning (also requires Popper.js)
Bootstrap Documentation: https://getbootstrap.com/docs/4.2/getting-started/introduction/#js
I got something similar to what you want, check here: https://stackoverflow.com/a/3314790/11171286
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'top',
html: true
});
.avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple 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>
<a href="#" data-toggle="tooltip" title="<img class='avatar' src='https://www.w3schools.com/w3images/avatar5.png'/> <span><br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</span>">
Anonymous
</a>
why don't you try the latest bootstrap version but it's okay try this... Hope this will help
I have this short sample:
link
CODE HTML:
Hover over me
asda
link exampe
do not understand why the W3Schools example is different from mine.
I put virtually the same code and have implemented bootstrap library.
Can you please tell me what the problem is and what example shows the two different?
They are using this code to attain that result unlike your one line of code
<!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.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<a type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a>
</div>
<script>$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>
The important thing to note is this part
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
AND this API:
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
So I used their and found out that when you remove the above javascript code the result is same as yours. So add the above script element to your code and link the bootstrap js library and Bootstrap-combined.css.
To get the tooltip above the text use this code:
Hover
Doing so will give you the same result as there
For more reference use this link
Add data-placement attribute
Hover over me
Here is the bootstrap documentation for Tooltip
http://getbootstrap.com/javascript/#tooltips
I´m trying to hide a foundation styled button, but the hidden attribute does not work.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/foundation-5.5.1/css/foundation.css">
<script type="application/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="application/javascript" src="../js/foundation-5.5.1/js/foundation.min.js"></script>
</head>
<body>
<div class="button success" hidden="true">Button</div>
</body>
</html>
How can I hide the button?
Instead using hidden="true" you may use the display="none" if you wanna make the div and the space that it ocupes disappear or you can use visibility="hidden" if u wanna make only the div disappear.
Display example: display="none"
Visibility example: visibility="hidden"
Try aria-hidden="true". Read other options here in tutorial:
http://foundation.zurb.com/docs/components/visibility.html
I'm facing a weird problem in which I'm unable to close bootstrap tags.
Below is my html code,
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-tagsinput.min.js"></script>
</head>
<body>
<input type="text" id="searchTags" data-role="tagsinput"/>
</body>
</html>
I'm using Bootstrap V3.0.
Below is the screen shot of the tags,
As you can see from the image that 'x' used to close the tags is not displayed. Any idea why??
Thanks in advance.
You're probably missing this css file:
<link href="bootstrap-tagsinput.css" rel="stylesheet">
This is my Source and it works with the closing x:
<html>
<head>
<link href="bootstrap-tagsinput.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tagsinput.js"></script>
</head>
<body>
<input type="text" id="searchTags" data-role="tagsinput"/>
</body>
</html>
(I didn't took care of nice use of js/css folders)
Let me know if this helps
I'm trying to create a basic Hello World page in Bootstrap, but the styles in the .css file are not being applied to the content on the page. In chrome dev tools, the .js and .css files are successfully loaded and can be looked through in-browser, but the styles are not applied to the element.
html:
<!DOCTYPE html>
<html>
<head>
<title>Alex Rules</title>
<link href="bootstrap/css/bootstrap.min.css" rel="styelsheet" media="screen" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="postContent" class="row">
<div class="span6 offset3">
Hello World!
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Is there a step that I'm missing?
In your link tag it says rel="styelsheet" and it should say rel="stylesheet".