My final goal is to have two "textArea" elements parallel to each other. Each "textArea" should occupy 45% of the screen. Problem that I am facing is, when I include 'Content/site.css' in _LayOut.cshml, width of "textArea" elements always stays the same. I tried changing the width of "textArea" in CSS but that had no effect. Please see the code below.
site.css has the code to restrict the width of "textArea". I commented that code; and tried changing the width of "textArea" and that had no effect. Then I removed the site.css completely. Then width of "textArea" started responding to the changes made in CSS.
//Index.cshtml
<div id="d1">
#using (Html.BeginForm())
{
<div>
<p>
<textarea id="T1"></textarea>
</p>
<p>
<textarea id="T2"></textarea>
</p>
<p>
<input type="submit" value="Create" />
</p>
</div>
}
</div>
//CSS
body
{
width: 95%;
}
#d1
{
border-color: blue;
padding: 10px;
}
#T1
{
border-color: red;
padding: 10px;
float: left;
width: 45%;
}
#T2
{
border-color: green;
padding: 10px;
width: 45%;
}
///_Layout.cshtml
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
(BundleConfig)
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/s1.css",
"~/Content/bootstrap.css"
//"~/Content/site.css"
something is overriding your css. try addind !important after your css so it dosent get overridden.like :
T1{
width: 45% !important;
}
Related
A button inside the legend of a fieldset is not clickable when the fieldset is a flexbox, this only happens in mobile Safari:
* {
box-sizing: border-box;
}
fieldset {
display: flex;
}
legend {
width: 100%;
}
button {
width: 100%;
font-size: 2rem;
}
button:hover {
background: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<fieldset class="col" data-un="u_SkwBump">
<legend>
<button>Click</button>
</legend>
</fieldset>
<script src="src/index.js"></script>
</body>
</html>
Here is also a CodeSandbox, since the snippet is hard to get running on mobile. Any ideas what could be causing this?
I found this flexbug, but I don't think that's the issue here, the flexbox works well on the fieldset as you can see, the columns are displayed side by side (at least on my phone). Just the button not being clickable.
I used text-align:center to center the three divisions, but they are all aligned on the left.
I was told that because these three elements are all block, so they wouldn't center.However, I tried to add display:inline-block, but when I inspected the page, it still showed me display:block.
Here's my code:
<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" />
<title>Document</title>
<style>
.Google-logo {
width: 250px;
}
.Google-search-box {
font-size: 13px;
padding-left: 15px;
height: 30px;
width: 460px;
border-radius: 15px;
border-style: solid;
border-color: rgb(160, 157, 157);
box-shadow: 0 1px 6px rgb(183, 181, 181);
margin-top: 15px;
}
.div {
text-align: center;
}
</style>
</head>
<body>
<div>
<img
class="Google-logo"
src="images/Google_2015_logo.svg.png"
alt="Google logo"
/>
</div>
<div>
<input
class="Google-search-box"
type="text"
placeholder="Search Google or type a URL"
/>
</div>
<div>
<button class="left-button">Google Search</button>
<button class="right-button">I'm Feeling Lucky</button>
</div>
</body>
</html>
Very simple,
div is not a class, is a html element, so do this;
CSS
div {
text-align: center;
}
You can do it in multiple ways, the simplest and the first way is to write a CSS like:
div {
text-align: center
}
The second way if you want to use a inline CSS in your HTML code itself:
<div style="text-align:center">
The third way is what you were trying to do by using classes/id for that you need to change both your HTML and CSS code:
*for class
HTML:
<div class="center"> </div>
CSS:
.center {
text-align: center,
}
*for id
HTML:
<div id="center"> </div>
CSS:
#center {
text-align: center,
}
And most importantly div is not a class it's an HTML tag so your code didn't work because you used
.div {
text-align: center,
}
in your CSS code and the . symbolizes a class whereas if you had written it like this it would have worked as it would have given the text center to all the divs present in your code
div {
text-align: center,
}
But I feel you should use classes and center the text in div so that it could be specific to the div you wanna center texts for so try to prioritize the second or third way over the first one.
I am trying to give space between two menus
using margin left and margin right but it's not working.
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<style>
/* .space{
margin-left:5px;
}*/
</style>
</head>
<body>
<div class="navbar-fixed-top">
<div class="col-md-12">
<a link href="" style="font-size:20px;">ABCD Technology</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4 space">
<div style="margin-right:20px;"></div>
#Html.ActionLink("Home", "Index", "Home")
#Html.ActionLink("Services", "Index", "Home")
#Html.ActionLink("PortFolio", "Index", "Home")
#Html.ActionLink("About", "Index", "Home")
#Html.ActionLink("Hire Developer", "Index", "Home")
</div>
</div>
</div>
</div>
#RenderBody()
<div class="navbar-fixed-bottom" style="margin-left:45px;">
<footer>
<p>© #DateTime.Now.Year - CopyRight#flt.com</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
site.css
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
Below given code is also not working:
<div style="margin-left:5px;"></div>
I am using external css class like
<style>
/* .space{
margin-left:5px;
}*/
</style>
but this also does not work.
see above image I am trying to add a space between two menus
is there any change in site.css class or I design a wrong menu?
Please replace the code.
<style>
/* .space{
margin-left:5px;
}*/
</style>
BY
<style>
.space a{ margin:0 7px; display: inline-block; }
</style>
Try this:
<style>
/* .space a{
margin: 5px;
}*/
</style>
it will help to margin whole a tag
I am designing a web page for the mobile first time. I have given 100% width and height so that content will render at the full page regardless of mobile screen size. but still, as you can see from the screenshot, there is empty space below and on the right side. Also even one of my checkbox content is even crossing the width of the page. I have tried putting that content in a span tag and defining a class and putting something like max-width: 20 px or something but it is not having any effect whatsoever. below my code snippet of HTML and css
/* style.css */
/* You can add global styles to this file, and also import other style files */
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
body {
margin: 0;
height: 100%;
width: 100%;
}
/* this page css */
mat-card{
width: 100%;
}
img{
padding: 2%;
text-align: center;
width:5%;
height: 5%;
}
.logo {
margin: 10%;
text-align: center;
}
.confirm-text {
max-width: 30px;
display: block;
}
.example-container {
display: flex;
flex-direction: column;
}
.example-container>* {
width: 100%;
}
.example-right-align {
text-align: right;
}
input.example-right-align::-webkit-outer-spin-button,
input.example-right-align::-webkit-inner-spin-button {
display: none;
}
.example-radio-group {
display: inline-flex;
flex-direction: column;
}
.checkbox {
display: block;
flex-direction: column;
padding-left:4%;
}
strong {
padding-left: 4%;
}
p {
padding-left: 4%;
}
.example-radio-button {
margin: 3%;
}
.example-selected-value {
margin: 15px 0;
}
<mat-card><div class="logo">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRE3x0vsDn1R5O0v7QKVvJNMJK2txXUv8IIsY-2t4R8ore5AjMk0g" alt="image">
<br>
<br>
<p>your return request has been confirmed. please tell us a convenient time to schedule the pick up</p>
</div></mat-card>
<mat-card class="login-form">
<form class="example-container" (ngSubmit)="onSubmit(f)" #f="ngForm">
<strong>Pick up your preferred date</strong>
<mat-radio-group class="example-radio-group" name="selectedDate" [(ngModel)]="selectedDate" required>
<mat-radio-button class="example-radio-button"
*ngFor="let date of dateOptions" [value]="date" ngDefaultControl>
{{date}}
</mat-radio-button>
</mat-radio-group>
<br><br>
<strong>Select a preferred time</strong>
<mat-radio-group
class="example-radio-group" name="selectedTime" [(ngModel)]="selectedTime" required>
<mat-radio-button class="example-radio-button"
*ngFor="let time of timeOptions" [value]="time" ngDefaultControl>
{{time}}
</mat-radio-button>
</mat-radio-group>
<hr>
<mat-checkbox class="checkbox" name="confirmation" [(ngModel)]="confirmation" required>
<span class="confirm-text">I confirm the above selected date and time as the preferred slot for return pick up.</span>
</mat-checkbox>
<hr>
<button mat-raised-button color="accent" type="submit" [disabled]="!f.valid">Submit</button>
</form>
</mat-card>
edit: this is index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Myntra</title>
<base href="/">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://storage.googleapis.com/code.getmdl.io/1.1.0/material.indigo-pink.min.css" rel="stylesheet" /
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
I found this on stackoverflow for HTML option:
HTML5 Canvas 100% Width Height of Viewport?
In order to make the canvas full screen width and height always, meaning even when the browser is resized, you need to run your draw loop within a function that resizes the canvas to the window.innerHeight and window.innerWidth.
I found this on stackoverflow for jQuery option:
Dynamically resize element with window size jquery
Also please see this on stackoverflow for additional support for proper resizing Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
first // are not valid coments in CSS, use /* CODE */
simple remove your % values and change them to vh and vw :) also add few css to all object
vh and vw its USER POINT OF VIEWs
*{
padding: 0;
margin: 0;
}
also add this HTML to define viewport
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Try this
<div id="complete">
Put your code here
</div>
html,body{ height:100%; width:100%; margin:0; padding:0;}
#complete{
height:100%;
width:100%;
overflow:hidden;
}
If you want to have scrollbar then you can keep overflow as auto.
Do not miss html before body.
Hope this helps!!
You could also link to a CSS stylesheet like Normalize.css to remove some of the default CSS of the browser and make your page look more consistent across different browsers. Just make sure to link to your main CSS stylesheet AFTER Normalize.css.
https://necolas.github.io/normalize.css/
I like to put a line throughout HTML page. How to do this?
I tried:
hr {
width: 100%;
}
but it doesn't work
The <hr /> tag is always of 100% width of its parent tag.
<br /><hr /><br />
Check if the parent has some padding which you need to remove. Another option is to set the body tag's padding and margin to 0.
body {
padding: 0;
margin: 0;
}
Complete code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<br />
<hr />
<br />
</body>
</html>
Check these Demos...
http://jsfiddle.net/dqnKQ/1/ And http://jsfiddle.net/dqnKQ/2/
Just type <hr />, it works great
You can always style it inline if need be.
for example:
<hr style="width:100%; height:6px; background-color: #cce1ec; border:none;" />
As an HTML tag it can also be used as a selector in CSS,
for example:
hr{ width:100%; height:6px; background-color:#cce1ec; border:none;}