The following screenshot shows the forms.py code for generating the textarea input box on the right-hand side (which has placeholder text: "Your comment to the world").
The CSS however, is applied only to the pure HTML textarea box (to the left) and I cannot figure out how to get it to be applied to the Django generated textarea input box. You'll notice that the CSS has been automatically applied to the top 'Name' text input field.
The styles.css code is here:
body {
background-color: white;
}
h1 {
color: red;
text-shadow: 3px 2px grey;
font-family: Arial
}
p {
color: black;
font-family: Arial
}
input[type=text] {
width: 20%;
padding: 21px 20px;
margin: 14px 0;
box-sizing: border-box;
font-size: 33;
border: 2px solid red;
border-radius: 4px;
font-family: Arial
}
textarea[type=textarea] {
width: 20%;
padding: 21px 20px;
margin: 14px 0;
box-sizing: border-box;
font-size: 33;
border: 2px solid red;
border-radius: 4px;
font-family: Arial
}
forms.py (as shown above with the rendering of HTML) is below
from django import forms
class CommentForm(forms.Form):
name = forms.CharField(max_length=20,widget=forms.TextInput(attrs={'placeholder':'Your Name Please'}))
comment = forms.CharField(widget=forms.Textarea(attrs={'placeholder':'Your comment to the world'}))
And finally, the sign.html page (with the HTML for the relevant page) is below
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'guestbook/styles.css' %}">
</head>
<body>
<h1>Tell the world how you're doing!</h1>
<h2>Sign the guestbook</h2>
<form action="/action_page.php">
Enter your name:<br>
<!--<input type="text" name="name" placeholder="Your Name here">-->
{{form.name}}
<br>
Enter your comment:<br>
<textarea name="message" type="Textarea" placeholder="Your comment here" rows="10" cols="30"></textarea>
{{form.comment}}
<br><br>
<input type="button" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
<p>Go to the guestbook itself</p>
</body>
</html>
Essentially, I would like to know how to simply create an HTML object (that is functional) and apply the CSS to it.
So If I am understanding the question correctly, you are having no issue applying CSS to HTML you hard code, and it is the HTML that is generated with Django's templating system that you are having trouble getting your CSS to stick to yes? I would inspect the rendered HTML of that django generated "comment" field. I think you will find that your CSS rules are not applying because the HTML is not what you expect. In other words, your selector: textarea[type=textarea] is not matching the comment field because it is probably not a textarea, or does not have a type=textarea attribute.
You can add attributes in the widget definition itself if you are having trouble getting a CSS rule to stick, but I use This library a lot. It let's you add attributes in the template.
Related
I'm trying to style body, header and form tags in my ASP.NET Web App using Razor Pages, CSS Isolation. Styles created in scoped CSS file (_Layout.cshtml.css) for some HTML tags are not working. The same for other components files. Adding a class for those tags and style class selectors in scoped CSS file also doesn't work.
Code - a part of _Layout.cshtml:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - RazorTest</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/_Layout.cshtml.css" asp-append-version="true" />
<link rel="stylesheet" href="~/RazorTest.styles.css" asp-append-version="true" />
</head>
<body>
<header>
<nav>
<div>
<img src="" alt="">
</div>
</nav>
</header>
<div class="container">
<form action="">
<input type="text">
</form>
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - RazorTest - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
_Layout.chstml.css:
body {
background-color: #444;
}
header {
border: 10px solid red;
}
form {
border: 10px solid cyan;
}
input {
border: 10px solid greenyellow;
}
nav {
border: 10px solid blue;
}
div {
border: 10px solid black;
}
main {
border: 10px solid green;
}
img {
width: 100px;
height: 100px;
border: 10px solid orange;
}
Let me show that on SS's:
_Layout.cshtml and _Layout.cshtml.css files
Browser output
Everything works well when I move my CSS file to wwwroot/css directory and link it in _Layout.cshtml file. Styles for those tags also works when added to site.css file. Screenshots:
_Layout.cshtml and _Layout.cshtml.css files
Browser output
Why styles for some tags are not working when added in scoped CSS file?
If you use .AddRazorRuntimeCompilation() for hot reload, try build without it.
Beside the tag-helper issue mentioned above, it is a build step.
Just one thing to note, CSS isolation is a build step, so it doesn't work with Razor Runtime Compliation
Beside tag-helper issue mentioned above, scoped css is build time
Faced the same issue and found this article.
I encountered similar behavior a few times when testing CSS isolation in ASP.NET 6 with Razor pages.
I noticed that not all HTML element receive a scope identifier and therefore are not affected by the scoped CSS file.
Here's a part of my final [PROJECT_NAME].styles.css file (included as link element in the page layout):
form[b-l6oslukat8] {
background-color: orange;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
And here is related part of the final HTML file where the identifier (b-l6oslukat8) should be but isn't:
<section b-l6oslukat8="" class="full page">
<form data-form-type="login">
<input b-l6oslukat8 type="text" id="Username" name="Username">
<input b-l6oslukat8 type="password" id="Password" name="Password">
</form>
</section>
Looks like this is a case with your final HTML/CSS as well. It seems to me it's a bug in the implementation of CSS isolation in .NET 6.
Why styles for some tags are not working when added in scoped CSS file?
Maybe iy is not enough tou take precedence.
You can try to use either specificity or the natural cascade to override the styling,so that it may be enough to take precedence.For example,you can change:
img {
width: 100px;
height: 100px;
border: 10px solid orange;
}
to
body > div > img {
width: 100px;
height: 100px;
border: 10px solid orange;
}
And if you want to change the style which cannot use either specificity or the natural cascade,you can try to add the style into the view,for example:
<style>
body {
background-color: #444;
}
</style>
I tried using the solutions found on stackoverflow to do this but it does not seem to work in newer versions of firefox. I want the red background to take up the entire button but this only works in the chrome, not firefox. I added the button::-moz-focus-inner css rules that should resolve this. Does anyone know how to do this in newer versions of firefox?
<style>
button {
padding: 0px;
}
label {
display: block;
padding: 1px 6px;
background-color: red;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
</style>
<button>
<label for="myId">My Button</label>
</button>
<br />
<button>My Button</button>
<input id="myId" type="checkbox" />
You've put a label into a button, and are applying the red background to the label, not the button. You'd be better off not using a label tag, but if you need to, put the button in the label tag.
<style>
button {
/* Padding is pretty important for buttons */
padding: 3px 5px;
border: 0;
background-color: red;
cursor: pointer;
margin: 0px;
}
</style>
<button>My Button</button>
<!-- It is good practice to put labels right before what they are labeling -->
<label for="myId"><button>My Button</button></label>
<input id="myId" type="checkbox" />
I may be wrong, and by all means im not trying to be rude. But it looks like you're pretty new to web dev. Look up any css property or tag you're having trouble with on W3Schools. It's a great website.
Cheers, Isaac.
Is there a way to use CSS to update input fields without changing HTML code?
I have a form like this:
// HTML
<div id="LoginFormContainer">
<div class="formInputLine">
<div class="inputContainer">
<input name="txtUserID$Textbox1" type="text" maxlength="15" id="txtUserID_Textbox1" placeholder="Username" title="Username">
</div>
</div>
<div class="formInputLine">
<div class="inputContainer">
<input name="txtPassword$Textbox1" type="password" maxlength="15" id="txtPassword_Textbox1" placeholder="Password" title="Password">
</div>
</div>
<div class="formInputLine">
<input type="submit" name="btnLogin" value="Login" id="btnLogin"><input name="builderID" type="hidden" id="builderID" value="abc">
</div>
</div>
//CSS
#FormLoginPage #LoginFormContainer .formInputLine .inputContainer input {
text-transform: uppercase!important;
}
#FormLoginPage #LoginFormContainer .formInputLine .inputContainer input {
border: none;
font-size: 12px;
width: 100%;
color: #333;
outline: 0;
-webkit-appearance: caret;
}
// TRYING CSS - able to use this code to add a label but it applies to all input. Not sure how to target only the individual class with a specific id within it.
.formInputLine::before {
content: "Username";
}
And would like to change it to the following using only CSS:
Please note that the above code is actually part of this code I got from a 3rd party. So I am not sure if I can control it via the iframe tag.
Thanks for the help, I greatly appreciate it.
If the input fields have wrapper elements you can use pseudo elements (before or after) on that wrapper to create what you want with pure css, otherwise you'll have to use javascript to manipulate the html structure / add elements etc.
So, for an example, if we have the following HTML structure:
<div class="input-wrapper">
<input type="text" placeholder="some text">
</div>
We can do the following in CSS:
.input-wrapper {
position: relative;
}
.input-wrapper:before {
position: absolute;
left: 0;
bottom: calc( 100% + 10px );
content: "some text";
}
::-webkit-input-placeholder {
color: transparent !important;
}
(This one is used if we have a placeholder and we want to hide it. On production should also use the -moz- and -ms- prefixes).
You could have something like this:
I've included my own font, due to lack of context.
body {font-family: "Droid Sans"}
.Input-Element {padding: .3em;margin: .5em 0}
.Input-Element label {display: block;text-transform: uppercase;padding: .2em 0;font-size: .8em}
.Input-Element input {border:1px solid rgba(0, 0, 0, 0.34);padding:.5em;outline:none;transition: border .25s}
.Input-Element input:focus {border-color: rgba(0, 0, 0, 0.73)}
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
<div class='Input-Element'>
<label>Username</label>
<input name='user'>
</div>
<div class='Input-Element'>
<label>Password</label>
<input name='psw'>
</div>
Note: Click Run Code Snippet to see the form!
I was playing with the ideas provided by a few solutions here. After some researching on my own with :nth-child, here is the solution I have for my question. I am sure there is an other way to do the CSS selection. But this is what I have for now.
Using the CSS below can target the two fields individually and add the specific labels
/* add labels */
.formInputLine:nth-child(1)::before {
content: "Username";
}
.formInputLine:nth-child(2)::before {
content: "Password";
}
/* remove place holder */
::-webkit-input-placeholder {
color: transparent;
}
:-moz-placeholder {
/* Firefox 18- */
color: transparent;
}
::-moz-placeholder {
/* Firefox 19+ */
color: transparent;
}
:-ms-input-placeholder {
color: transparent;
}
You can use some jquery and css
$("input").wrap("<div class='custom-input'></div>");
$('.custom-input').eq(0).before("<label>USER NAME</label>");
$('.custom-input').eq(1).before("<label>PASSWORD</label>");
::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" valu "USER NAME" placeholder="USER NAME"><br>
<input type="passsword" placeholder="PASSWORD">
I've a Flask based application which has
Class itemform:
item2 = [("a", 'One'), ("b",'Two')]
items3 = SelectField(u'List items', choices=items2)
form similar to above which is rendered
return render_template('item.html', item3=item3)
on views.
item.html jinja2 template has below content
<form action="/items/" method="post" name="items">
{{ form.item3 }}
<input type="submit" name="submit" class="btn" value="done" />
</form>
the dropdown works properly, I can select the items and gather it
back it. The Problem is, the width of dropdown box is too small.
option name ("One") is barely visible and become visible only
when I click the dropdown arrow.
How to change width of it? Thanks for help!
EDIT:
Here's the link http://jsfiddle.net/SvN3F/
You mean height ? I've added height:auto at last line of css, visible on jsFiddle, it's default css who forced select to have height:18px.
input[type="text"], input[type="password"], textarea, select {
border: 1px solid #ccc;
border-radius: 3px;
color: gray;
display: inline-block;
font-size: 13px;
height: 18px;
line-height: 18px;
padding: 4px;
width: 210px;
}
I want to have two input with one button for user to enter their username and password, and
I'm using this css code for controlling the input tag in my website in order to appear it properly on all screen size, and it works fine.
.controller {
width: 98%;
margin: 0;
padding: 7px 5px 4px;
color: #555;
font-size: 18px;
font-family: inherit;
border-style: solid;
border-width: 0 1px 1px 0;
}
I want to have some dynamic text which is retrieved from the database below these two inputs for the user. Now my problem is that if the text is long it will not appear properly below the inputs and affects them to not fit the screen, as long as the text is only 5 to 10 words there is no problem.
here is the html file for the inputs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form method="post" action="answer">
<ul>
<li>
Login Name:<input type="text" name="id" class="controller"></input>
</li>
<li>
Password:<input type="password" name="pass" class="controller"></input>
</li>
<li>
<input type="submit" value="Login"></input>
</li>
</ul>
</form>
</body>
and here is the CSS code
.controller {
width: 98%;
margin: 0;
padding: 7px 5px 4px;
color: #400;
font-size: 18px;
font-family: inherit;
border-style: solid;
border-width: 0 1px 1px 0;
}
please can anyone advice me what I have to do or give a css code for controlling the problem.
thank you very much for any answer and sorry for my long question.
So, I think that this is what you want to do. After your form,
<div id="response">
<p> Some Long Block Of Text That Will Wrap Around This Div </p>
</div>
then, in the CSS you get something like this going on:
#response
{
width: 75px; /*desired width*/
margin-top: 25px; /*distance from the form above*/
}
#response p
{
/*anything you want to do to that specific <p> */
}
I'm not sure how you are getting the dynamic text, but I'm guessing that it is a script that is getting info from answer and putting it in the html. Just place that info inside of the <p> that's in #response