I have this .html file and that form, sometimes stretches across all width. Tested with Opera, Firefox and Edge.
.html file:
<!DOCTYPE html>
<head>
<title>LOGIN</title>
<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://www.w3schools.com/lib/w3-theme-teal.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/index.js"></script>
</head>
<body>
<div class="w3-container">
<h1>Login</h1>
<div class="w3-card-4 form">
<form class="w3-container" action="/login" method="post">
<label for="username">Nome de utilizador</label>
<input class="w3-input" type="text" name="username" placeholder="Nome de utilizador" required id="username">
<label for="password">Password</label>1
<input class="w3-input" type="password" name="password" placeholder="Password" required id="username">
<button class="w3-button" type="submit">Submit</button>
</form>
</div>
</div>
</body>
style.css file:
.big {
background: rgb(150, 150, 150);
width: 100vw;
height: 40vw;
max-height: 400px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.lightgray {
background-color:#c5c5c5!important;
}
.bordergray {
border-color:#6e6e6e!important;
}
.rightalign {
float: right !important;
}
.form {
width: 50vw;
/*margin-left: 2vw;*/
}
body {font-family: "Roboto", sans-serif}
.w3-bar-block .w3-bar-item {
padding: 16px;
font-weight: bold;
}
I can say that it is CSS fault, but I don´t know what or how a rule could be causing this.
This HTML was generated by compiling a .pug file, so I don't have a pretty version of it, feel free to edit this question if you could format the HTML.
EDIT:
Sometimes I get IMG1, others I get IMG2 but only if I open a new tab, why?
IMG1
IMG2:
(I set the background color to black, so its more visible the size of the fields)
Tanks for all the help, but further debugging show me that the file style.css was not being imported, so I changed
<link rel="stylesheet" href="assets/css/style.css">
to
<link rel="stylesheet" href="/assets/css/style.css">
and works all the time, thanks for all the help.
Related
The top part of my checkbox do not word anymore after resizing it and resetting materialize.
Here is sample code:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<style>
[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
opacity: 1;
position: relative;
}
[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
display: none;
}
[type="checkbox"].reset-checkbox+span:not(.lever) {
padding-left: 0px;
}
</style>
</head>
<body>
<form action="">
<label><input type="checkbox" class="reset-checkbox" style="width:20px;height:20px;" checked="checked" name="firstCheck"/></label>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
Here is the jsfiddle for you to try to click the top part of the checkbox if you want:
https://jsfiddle.net/j4oxgmtc/
Any idea or solution?
Thank you!
Andreas responded to that question in a comment: Exclude materialize css for some specific checkbox
''This happens, because is an inline element. You can set display: inline-block for it to fix it.''
Here is the modified working code: https://jsfiddle.net/vL3fsqjb/2/
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<style>
[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
opacity: 1;
position: relative;
}
[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
display: none;
}
[type="checkbox"].reset-checkbox+span:not(.lever) {
padding-left: 0px;
}
</style>
I am going to use bootstrap input spinner for my cart web page some old version bootsrap.min.css clashing to align the content correctly ,Can any one help me how to fix it
my code
[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap-input-spinner</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
h2 {
margin-top: 2rem;
}
h3 {
margin-top: 1rem;
}
/*noinspection CssUnusedSymbol*/
.input-group,
input.test-value-input {
max-width: 250px;
}
.code {
background-color: #f1f2f3;
font-family: Courier, monospace;
}
</style>
</head>
<body>
<section class="container pt-3">
<h3>Simple Integer</h3>
<p>
<input type="number" value="1" min="1" max="10" />
</p>
</section>
<!-- bootstrap needs jQuery -->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="src/bootstrap-input-spinner.js"></script>
<script>
$("input\[type='number'\]").inputSpinner()
</script>
</body>
</html>][1]
i want output like thisoutput
but am getting this design wrongdesing
I want to generate a PDF from an specified view respecting my actual CSS.
<html>
<head>
<meta charset="utf-8" />
<style>
.justify {
text-align: justify;
text-rendering: geometricPrecision;
}
.center {
text-align: center;
}
body {
font-size: 15px;
white-space: normal;
line-height: 110%;
text-rendering: geometricPrecision;
}
.rightheader {
font-size: 12px;
}
.bigger{
font-size:18px;
}
</style>
<link href="~/Content/uikit.css" rel="stylesheet" />
<link href="~/Content/CartaSates.css" rel="stylesheet" />
<title>
</title>
</head>
<body style="padding:10px;">
<div class="uk-grid" style="margin-top:10px;margin-left:0px !important;">
<div class="uk-width-2-3" style="padding-left:0px;padding-top:0px;">
<img src="~/src/img/logo.png" style="width:200px" />
</div>
<div class="uk-width-1-3 justify" style="padding-left:0px;padding-top:0px;">
<div class="uk-grid">
<div class="uk-width-1-4 justify rightheader" style="padding-left:0px;padding-top:0px;text-align:right">
<strong>Section:</strong><br />
<strong>Office:</strong><br />
<strong>Case:</strong>
</div>
<div class="uk-width-3-4 justify rightheader" style="padding-left:15px;padding-top:0px;">
<span><strong>Foreign Trade Directorate</strong></span><br />
<span><strong>SATES-DCE-UV-2887/2019</strong></span><br />
<span>Request for verification of request.</span>
</div>
</div>
</div>
</div>
</body>
</html>
I already have the my HTML with CSS and it´s showed as intended, logo to the left, and text separated in two minnor divs to the right, but when the PDF is generated, it separate my divs in diferent rows.
I have a view page (View.cshtml) and a stylesheet (Style.css).
The stylesheet is located in a folder called "Stylesheet", and the view page is located in Views/Home/View.cshtml. I am trying to link the stylesheet to the view page by this code:
<link rel="stylesheet" type="text/css" href="~/Stylesheet/Style.css">
When I run the project, it showed the contents of the view page but the styling was not implemented. May I know what I am doing wrong?
UPDATE:
View.cshtml
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="~/Stylesheet/Style.css" />
<title>Test Page</title>
</head>
<body>
<div id="topHeader">
<br />
<div id="credentialsBox">
<div id="texts">
<div id="word1">Username:</div>
<div id="word2">Password:</div>
</div>
</div>
</div>
</body>
Style.css
#font-face {
font-family: 'proximanova';
src: url('../fonts/proximanova-light-webfont (2)_0.ttf') format('truetype');
}
/*CSS Styling Properties*/
body {
font-family: proximanova;
margin: 0;
background-color: #007381;
}
#topHeader{
margin-top: 15%;
height: 450px;
background-color: #d6d6d6;
}
#credentialsBox {
border-radius: 3%;
width: 20%;
margin: auto;
margin-top: -5%;
background-color: #ffffff;
}
#texts {
padding: 14%;
text-align: center;
}
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
#RenderSection("css", false)
</head>
<body>
#RenderBody()
</body>
</html>
Sorry if the CSS styling is a bit messy, I am trying my best to learn here :D
You can also use #Url.Content instead for absolute path of css file.
<link href="~/Stylesheet/Style.css" rel="stylesheet" type="text/css" />
or
<link href="#Url.Content("~/Stylesheet/Style.css")" rel="stylesheet" type="text/css" />
If you that is your own custom CSS file then make sure that you add that file to BundleConfig.cs file in App_Start folder. Which will look something like this..
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/Style.css));
And in your head section try to replace
<head>
#RenderSection("css", false)
</head>
with
<head>
#Styles.Render("~/Content/css")
</head>
and see it will make any difference, and we will go from there.
I have solved the error. I placed my stylesheet inside "wwwroot/css" and it worked.
As per the question, I am attempting to figure out where "​​" is coming from in my CSS. I use FlashDevelop, and up until now, it has worked fine. I have a min file I'm uploading to the site, and ​​ appears at the end of it, sometimes in the middle before the last little rule. Has anyone else encountered this kind of problem before? My CSS is mostly just class rules, rather basic defining columns. I am using Bootstrap and Font Awesome alongside it, but this just started happening today.
This is my code pre-minify:
html, body {
height: 100%;
background-color: #e6eded;
}
.box {
height: auto;
overflow: hidden;
}
.right {
width: 240px;
float: right;
background: #aafed6;
}
.header {
height: 55px;
background-color: #818181;
}
.left {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}
After FlashDevelop produces the minified file and uploads it, I get this:
html,body{height:100%;background-color:#e6eded;}
.box{height:auto;overflow:hidden;}
.right{width:240px;float:right;background:#aafed6;}
.header{height:55px;background-color:#818181;}
.left{float:none;background:#e8f6fe;width:auto;overflow:hidden;}
​​
This is the remainder of the template I'm working on as requested.
<!DOCTYPE html>
<html lang="en">
<!-- BEGIN HEAD -->
<head>
<meta charset="UTF-8" />
<title>Teonnyn.com</title>
<meta content="" name="description" />
<meta content="" name="author" />
<?PHP echo $this->Html->css("bootstrap.min"); ?>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<?PHP echo $this->Html->css("main.min"); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</head>
<body>
<div class="box">
<div class="header">
</div>
<div class="right">
Test
</div>
<div class="left">
</div>
</div>
</body>
</html>
#Tomalak provided the correct answer. While I had to hunt for the symbol, opening a plain text editor displayed the actual code and allowed me to delete it correctly.