Basically as you can see in the code I tried to set it to 1000px wide just to show its not changing the size at all it wont go any bigger I can make it smaller but not wider. I added some spacing so you can see what I am talking about easier.
The Snippet asked for
#Html.TextAreaFor(x => x.businessJustification, new { id = "businessJustification", name = "businessJustification", #cols = 40, #rows = 3,#style="width: 1000px;"}) </p>
Original Code
#{
ViewBag.Title = "Software Request";
}
#model project1.Model.TicketModel
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>
<body style="background-color:#D1D3D4;"></body>
<div class="jumbotron" style="background-color:#D1D3D4;">
<img src="/Images/TECH_BARlogoBLACK.png" style="width:1000px;height:200px;" class="animate__heartBeat">
<p class="lead" span style="background-color: #FFFF00;">Software Request</p>
<br>
#using (Html.BeginForm(FormMethod.Post))
{
<p class="text-left"><b>Enter Computer Name:</b></p>
#Html.TextBoxFor(x => x.computerName, new { id = "computerName", name = "computerName"})
<p style="font-size: 14px; text-align: left;"><b>To obtain your Computer Name: </b>Click Start (bottom left windows icon) and type in System Information, On the 5th line, your Computer Name is listed as the System Name <br></p>
<p class="text-left" style="width: 1000px;"><b>Business Justification:</b> <br>
#Html.TextAreaFor(x => x.businessJustification, new { id = "businessJustification", name = "businessJustification", #cols = 40, #rows = 3,#style="width: 1000px;"}) </p>
<label for="Software">Select the Software(s) you need!</label>
<br>
#Html.DropDownListFor(model => #Model.selectedSoftwareList, new MultiSelectList(Model.softwareList, "Text", #Model.selectedSoftwareList),
new
{
id = "_SelectedSoftwareList",
#class = "form-control multiselect-dropdown",
multiple = "true",
style = "width:200px;height:300px;",
data_placeholder = "Select Software"
})
<br>
<br><button type="submit" class="btn-primary btn-lg" style="font-size: 20px">Submit</button>
}
</div>
<style>
h1 {
text-align: center;
}
p {
text-align: center;
}
.buttonBig {
display: block;
width: 10%;
border: none;
font-size: 24px;
cursor: pointer;
text-align: center;
}
</style>
I have provided a image of how small the "1000px" wide box is and if I set this to like 200px it is also the same size.
Related
I have some centered content on a web page for a small project that I am working on. The username and password text should be next to their corresponding input boxes, and only drop down into the position they are in right now if the screen is too slim. When I inspect the problematic text in chrome, it says that the padding is 100%, even though it is set to 0 in the css.
Here is the problem area:
<div id = 'log in stuff' class = 'logInContainer' hidden>
<h1>Log In:</h1>
<div class = 'small'>Username: </div> <input id = 'username'>
<br>
<div class = 'small'>Password: </div> <input id = 'password'>
<br>
<button id = 'create account'>create account</button>
<button id = 'log in'>log in</button>
<br>
<div id = 'log in problem'></div>
</div>
And here is the css:
.small{
color:#0071a5;
font-size: 3em;
width:50%;
margin:0;
height: 12%;
padding:0;
border:0px;
}
input{
width:40%;
margin: 0;
height: 7%;
border:0.5em solid blue;
border-radius: 0.5em;
background-color: #5d6f72;
}
.logInContainer{
margin: auto;
width: 100%;
position: absolute;
top:1%;
text-align: center;
left:0%;
height: 100%;
}
Currently It looks like this:
I would like the input boxes to be next to the text, not below it, and have the text and the input centered horizontally. This is my first real HTML project, so i'm relatively new to css. Is there a way to do this?
You can use the label tag to make sure that your text falls next to your input tag. This code below worked perfectly fine for me try it yourself :-). And i even added the form tag so you know why the input field is smaller.
<div id = 'log in stuff' class = 'logInContainer' hidden>
<h1>Log In:</h1>
<form>
<label class="small" for='username'>Username: </label>
<input name="username" id = 'username'>
<br>
<label for="password" class="small">Password: </label>
<input name="password" id = 'password'>
</form>
<br>
<button id = 'create account'>create account</button>
<button id = 'log in'>log in</button>
<br>
<div id = 'log in problem'></div>
</div>
Because "div" is a block element so add
display: inline-block;
to "small" class in your code to be as follow:
.small{
color:#0071a5;
font-size: 3em;
width:50%;
margin:0;
height: 12%;
padding:0;
border:0px;
display: inline-block;
}
I have some code that looks like this
<div class="topnav">
<div>{{getGameView.Game.gameplayers[0].player.username}}</div>
<p>VS</p>
<div v-if="getGameView.Game.gameplayers.length > 1">
{{getGameView.Game.gameplayers[1].player.username}}
</div>
<div v-else>Waiting for opponent...</div>
</div>
Which prints this: NameVSName
I am trying to make it so that between Name and VS there is some space but cannot figure out how to do it.
A solution is to give to the VS element a class like .vs and add some padding to it:
p {
margin: 0;
}
.topnav {
display: flex;
}
.topnav .vs {
padding-right: 10px;
padding-left: 10px;
}
<div class="topnav">
<div>Name</div>
<p class="vs">VS</p>
<div>Name</div>
</div>
You can insert a space in html with .
Vue.config.devtools = false;
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
data: {
nameA: "Job",
nameB: "Bob"
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
{{ nameA }} Vs {{ nameB }}
</div>
How to insert spaces/tabs in text using HTML/CSS
I have a bank of ten buttons, then a bank of range sliders rotated through 90degrees so they are vertical placed on top of the buttons for reasons too long to explain here.
This works fine but the sliders are offset relative to the buttons underneath by different amounts depending on the browser. By varying the width and margin-left parameters in the CSS .slider block I can centralise the slider for any browser, but only with different numbers for each browser. The code shown has them central on Chrome on Android, offset to the left on Firefox on Windows, and offset to the right on Chromium on Raspian !
(The slider background uses px rather than vw as these are usually an image, but I've changed it to a solid colour to make the code run here).
I don't really want to use browser specific code so can somebody see why this happens and suggest a fix ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Slider Problem Demo</title>
<style>
body, html
{
margin: 0;
}
.main
{
height: 100%;
text-align: center;
}
.slider_wrapper
{
position: relative;
}
.slider_navi
{
height: 25vw;
}
#slider_place
{
position: absolute;
top: 4vw;
}
.slibut
{
width : 3vw;
height : 100%;
margin-left : 3vw;
margin-right : 3vw;
background-color: #C00000;
}
.slider
{
display: inline-block;
width: 2.2vw;
margin-left : 6.8vw;
}
.slider input
{
-webkit-appearance: none;
appearance: none;
width: 17vw;
height: 1vw;
background: #000000;
transform-origin: 8.5vw 8.5vw;
transform: rotate(-90deg);
}
.slider input::-webkit-slider-thumb
{
-webkit-appearance: none;
appearance: none;
width: 50px;
height: 50px;
border: 0vw;
background: #0000C0;
cursor: pointer;
}
.slider input::-moz-range-thumb
{
width: 50px;
height: 50px;
border: 0vw;
background: #0000C0;
cursor: pointer;
}
</style>
</head>
<body>
<div class = 'main'>
<div class='slider_wrapper'>
<div class='slider_navi'>
<button class = 'slibut' id = 'slibut1'> </button>
<button class = 'slibut' id = 'slibut2'> </button>
<button class = 'slibut' id = 'slibut3'> </button>
<button class = 'slibut' id = 'slibut4'> </button>
<button class = 'slibut' id = 'slibut5'> </button>
<button class = 'slibut' id = 'slibut6'> </button>
<button class = 'slibut' id = 'slibut7'> </button>
<button class = 'slibut' id = 'slibut8'> </button>
<button class = 'slibut' id = 'slibut9'> </button>
<button class = 'slibut' id = 'slibut10'> </button>
</div>
<div id='slider_place'>
<div class='slider'> <input id = 'slide1' type = 'range' min = '0' max = '127' oninput = 'Update(0)'> </div>
<div class='slider'> <input id = 'slide2' type = 'range' min = '0' max = '127' oninput = 'Update(0)'> </div>
<div class='slider'> <input id = 'slide3' type = 'range' min = '0' max = '127' oninput = 'Update(0)'> </div>
<div class='slider'> <input id = 'slide4' type = 'range' min = '0' max = '127' oninput = 'Update(0)'> </div>
<div class='slider'> <input id = 'slide5' type = 'range' min = '0' max = '127' oninput = 'Update(0)'> </div>
<div class='slider'> <input id = 'slide6' type = 'range' min = '0' max = '127' oninput = 'Update(0)'> </div>
<div class='slider'> <input id = 'slide7' type = 'range' min = '0' max = '127' oninput = 'Update(0)'> </div>
<div class='slider'> <input id = 'slide8' type = 'range' min = '0' max = '127' oninput = 'Update(0)'> </div>
<div class='slider'> <input id = 'slide9' type = 'range' min = '0' max = '127' oninput = 'Update(0)'> </div>
<div class='slider'> <input id = 'slide10' type = 'range' min = '0' max = '127' oninput = 'Update(0)'> </div>
</div>
</div>
</div>
<script>
function update(num)
{
}
</script>
</body>
</html>
Each Time I resize the browser window my h1 element looks like this.
This is the image :
Image with broken h1
When I resize the browser window the content in the h1 breaks as it should but the top line overlaps the bottom line of the sentence.
This is the code :
<template lang = "html">
<div>
<h1 class = ""> {{ Tex }}</h1>
<div class = "container ">
<div class = "row">
<div class = "col-sm-6">
<h3><b>Connect Soft documents</b></h3>
<p class = "lead">Allow documents that feed into each other to provide a consistent, untainted view of the
financial, operational and social behaviour of the institution.</p>
</div>
<div class = "col-sm-4">
<img src = "ConnectDocuments.png" alt = "Documents" class = "pull-right img-responsive imG" width = "250" height = "250">
</div>
</div>
<hr>
<div class = "row">
<!-- position image to the right when on desktop,, but allow image to occupy the whole webpage when the device is less the 768px-->
<div class = "col-sm-5">
<h3><b>Improve decision models</b></h3>
<p class = "lead">Use statistical modelling to identify patterns and anomalies in the data that can help in
making better decisions.</p>
</div>
<div class = "col-sm-6">
<img src = "Statistics.png" alt = "Statistics" width = "350px" height = "270px" class = "pull-right img-responsive imG">
</div>
</div>
<hr>
<div class = "row">
<div class = "col-sm-6">
<h3><b>Search. Get what is important to You!</b></h3>
<p class = "lead">All notifications and documents are indexed and
archived so that you can find what is needed at all times.</p>
</div>
<div class = "col-sm-6">
</div>
</div>
<hr>
<div class = "row">
<div class = "col-sm-5">
<h3><b>Collaborate with other apps!</b></h3>
<p class = "lead" >Connect to the tools you need to prevent wasting time using so many apps </p>
</div>
<div class = "col-sm-7">
<img src = "Integrate.jpg" alt = "" width = "300" height = "270" class = "pull-right img-responsive imG">
</div>
</div>
</div>
</div>
</template>
This is the script element
<script>
export default {
name: 'Product',
data() {
return {
Tex: 'Improve your execution',
};
},
};
</script>
This is style element
<style lang = "css" scoped>
h1{ font-size: 55px; font-family: Heiti SC; text-align: center; margin-top: 100px; }
/*Tablets */
#media screen and (max-width: 768px) {
.imG {
float: none !important;
margin: auto;
text-align: center;
}
}
/* Mobile */
#media screen and (max-width: 480px ) {
}
</style>
Try to set the below css property to your H1
line-height: < value >
example : 55px . The values can be in px (or) em (or) %
Add this line to your css h1 selector:
h1{line-height:60px}
whenever you resize the font remember to set the new line-height.
Increase your line height.
h1{ font-size: 55px; font-family: Heiti SC; text-align: center; line-height:1.6em; margin-top: 100px; }
I have these form with style inline, but I can't use it in css because it changes all my code when I reference css in another views:
<style>
body {
background: url('http://digitalresult.com/') fixed;
background-size: cover;
padding: 0;
margin: 0;
}
.form-login {
background-color: #EDEDED;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
border-color:#d2d2d2;
border-width: 5px;
box-shadow:0 1px 0 #cfcfcf;
opacity: 0.8;
}
h4 {
border:0 solid #fff;
border-bottom-width:1px;
padding-bottom:10px;
text-align: center;
}
.form-control {
border-radius: 10px;
}
.wrapper {
text-align: center;
}
</style>
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="container" style="margin-top:40px">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<div class="panel panel-default form-login">
<div class="panel-heading">
<strong> Press to continue</strong>
</div>
<div class="panel-body">
<form role="form" action="#" method="POST">
<fieldset>
<div class="row">
</div>
<div class="row">
<div class="col-sm-12 col-md-10 col-md-offset-1 ">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
#Html.TextBoxFor(m => m.Email, new { #class = "form-control has-success", #autofocus = "autofocus", placeholder = "Usuario", required = "required" })
#Html.ValidationMessageFor(m => m.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock"></i>
</span>
#Html.TextBoxFor(m => m.Password, new { #class = "form-control has-success", placeholder = "Password", type = "password", required = "required" })
#Html.ValidationMessageFor(m => m.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
</div>
<p>#Html.ActionLink("Return to home page", "Index", "Home")</p>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
I think the problem is if I send body class to css it changes on all pages I reference css, how can I change to only change in this view? Regards
Instead of changing in file, you may add style in page through tag or give inline style with style element if you need change only at one place.
But adding inline style should be avoided.
Better to differentiate your element with a id and give properties to it
In that case you can save above inline CSS into separate CSS file and import that css file to that HTML page where you want this CSS.
Add the background to container, or add another class to the container and apply the style. and change margin-top to padding-top
.container {
background: url('http://digitalresult.com/') fixed;
background-size: cover;
padding: 0;
margin: 0;
height: 100vh;
padding-top:40px;
}
you can create a CSS file with the styles you mentioned in your view and import that file only in this view which will solve your problem.