hidden attribute not working when using foundation - html

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

Related

Trying to make a google sheet embed auto size (without scrolling) on the webpage

I've tried using fit-content, fill-content, height="100%", and height="auto"
I'm not sure if this is possible, but if it's not google definitely should try and figure out a way to make it work.
<!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">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<iframe
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR-p4uEH_VDK55IPAhz94TLM03oZ40dis2blDnH_vm31QC8BaqqO0VvZU9c3u_EHS0WB8z1O92NDiae/pubhtml?gid=0&single=true&widget=true&headers=false"
width="100%" height="fill-content"></iframe>
</body>
</html>
You cannot change the style of an external iframe with internal CSS. Like many other Google embeds, Google Sheets does not give you the option to make the embed responsive.
If you want your iframe to fill the height of the window, you will need to specify the height as a style, i.e. style="height: 100vh;" instead of as an attribute.
<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR-p4uEH_VDK55IPAhz94TLM03oZ40dis2blDnH_vm31QC8BaqqO0VvZU9c3u_EHS0WB8z1O92NDiae/pubhtml?gid=0&single=true&widget=true&headers=false" width="100%" style="height: 100vh;"></iframe>

How to show X (Clear) in Chrome INPUT with type Search while using bootstrap?

I am trying to show an Input tag of type Search. I am also using bootstrap. But when I use bootstrap.min.css, the Chrome browser no longer shows the "Clear" or [X] at the end of the box. Looks like Chrome user agent stylesheet overwriting my site style. I am not understanding why it is happening.
<!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/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<label for="gsearch">Search:</label>
<input type="search" placeholder="Search anything" id="gsearch" name="gsearch">
</body>
</html>
In properties I see something like this:
Here is the fiddle link: https://jsfiddle.net/z1ujworf/1/
If I remove the line <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> , the code creates input tag with "Clear" or [X] at the right end (When we type something in the input field). But I want to use bootstrap and its styling. Is there any way to achieve it?
This happens because bootstrap (from normalize.less) overrides the default user agent styles.
You can override this from your CSS like below
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: searchfield-cancel-button !important;
}
Working sample (tested in chrome)
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
-webkit-appearance: searchfield-cancel-button !important;
}
<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.5.1/jquery.min.js"></script>
<body>
<label for="gsearch">Search:</label>
<input type="search" placeholder="Search anything" id="gsearch" name="gsearch">

CSS to change color from grey to #330000

So I am new to this, but I grabbed this from W3 schools and I am trying to apply a colour to the class - so I created the style section and tried to apply color but its not working. I know this is linked to an outside style sheet, so maybe thats overriding what I want to do. Otherwise, I can't see what to do, I have googled for an hour or so, at this point I need someone with more knowledge to help me out.
<!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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.label label-default {
background color: #330000;
}
</style>
</head>
<body>
<h1><span class="label label-default">Survey</span>
</body>
</html>
You have 3 problems
The selector is not good. <span class="label label-default">. If you want to select this, you need to write .label.label-default
You should use a multi class selector , read here -> multi class selector
Read more about CSS Selectors
The background color style is not correct either. You need to write background-color
Read more here -> background-color
h1 tag has to be closed with </h1>
Read more here -> HTML Elements
My own question -> Why use a span inside the h1 if you don't split the content or is there some other reason ? For eg <h1><span class="font-light">Light</span>Not Light</h1>.
If you have no special reason to use span inside the h1, you should add the classes directly on the h1
<!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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.label.label-default {
background-color:#330000;
}
</style>
</head>
<body>
<h1><span class="label label-default">Survey</span></h1>
</body>
</html>
I know this is linked to an outside style sheet, so maybe thats overriding what I want to do -> the linked stylesheet is a bootstrap stylesheet. To check if that overwrites your own custom css, inspect your code in developers console and see if your styles are cut out. Then they are overwritten.
I have googled for an hour or so -> Then you should learn how to ask google. The problems you have are pretty basic. Google-ing multi class selector css or even 2 classes css + background color css would've given you a lot of results and answers
First of all, you are missing . in your class selector, next you have to remove the space between selectors since they are applied to the same element. You also have to add -to background-color property. Finally close the h1 tag and you're done:
<!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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.label.label-default {
background-color:#330000;
}
</style>
</head>
<body>
<h1><span class="label label-default">Survey</span></h1>
</body>
</html>
Your css is incorrect, first of all its is "background-color" not "background color"
and second if you want to apply css for same div classes then you should not give space for class name like ".label .label-default"
you have to write class names without spaces like this ".label.label-default"
try this
<style>
.label.label-default {
background-color:#330000;
}
</style>
instead of this
<style>
.label .label-default {
background color:#330000;
}
</style>

Angular Material md-button not working

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>

Create Bootstrap Tooltip

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