I'm trying to create a virtual roulette wheel. Right now my concerns are strictly aesthetic. In the text-well on the right, the number in the #chipsInv won't center, except when I put an html "center" tag, and then for some reason it creates a huge amount of empty space at the bottom.
Here is my code, I've left out the Javascript since I assume it's irrelevant:
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#ball {
position: absolute;
left: 208px;
top: 40px;
z-index: 1;
width: 20px;
height: 20px;
transition: top 1s;
}
#wheel {}
form {}
.row {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-5">
<img id="ball" src="ball.png" onclick="spin()"></img>
<img id="wheel" src="Rwheelbg.png" onclick="spin()"></img>
</div>
<div class="col-lg-1">
<button id="reset" onclick="reset()">Reset</button>
</div>
<div class="col-lg-6">
<div class="well well-lg">
<span><center>Chips</center></span>
<br>
<span style="font-size: 180px; text-align: center;" id="chipsInv">10</span>
<!-- Why won't this center!? -->
<br>
<span style="float:right;" id="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></span>
</div>
</div>
<!-- Row ends here -->
</div>
<p>Bet on:</p>
<form action="">
<input type="checkbox" name="21" value="310" id="310"> 21
<br>
<input type="checkbox" name="9" value="100" id="100"> 9
<br>
<input type="checkbox" name="14" value="120" id="120"> 14
<br>
<input type="checkbox" name="13" value="240" id="240"> 13
</form>
<p>Bet on up to four numbers. However, be warned, the more numbers you bet on, the lower your chip return will be.</p>
<!-- container ends here -->
</div>
</body>
</html>
In Bootstrap, as best you can / where you can, use the Bootstrap classes to provide the styling you're looking for, as the Bootstrap classes are designed to be compatible with one another.
<div class="col-lg-6">
<div class="well well-lg">
<div class="text-center">Chips</div>
<div class="text-center" style="font-size: 180px;" id="chipsInv">10</div>
<div class="float-right" id ="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></div>
</div>
</div>
If you want to text center everything in your example you can simply add the text-center class next to your well well-lg classes, as follows :
<div class="col-lg-6">
<div class="well well-lg text-center">
<div>Chips</div>
<div style="font-size: 180px;" id="chipsInv">10</div>
<div class="float-right" id ="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></div>
</div>
</div>
Additionally;
with Bootstrap, they recommend you use div's where possible, and then
you can specify different behaviour by modifying the classes of those
divs, such as "d-inline", or "d-block". That was the reason I changed
your spans to divs.
Ensure your col-lg-6 div is contained within a div with class "row", and that according to the docs, these divs specifying col div when added together do not exceed 12. Bootstrap Grid Docs
Related
Consider this code:
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<meta charset="UTF-8" />
<main class="container" id="main" style="max-width: 90%">
<div class="row" style="overflow: hidden">
<div class="col s12 m5 l5 xl5">
<form class="grey lighten-3">
<div class="input-field">
<textarea
id="textarea1"
class="materialize-textarea"
rows="18"
style="overflow-y: scroll; height: 20rem !important; max-height: 20rem"
></textarea>
<label for="textarea1">Input 1</label>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col s12 m5 l5 xl5">
<form class="grey lighten-3">
<div class="input-field">
<textarea
id="textarea2"
class="materialize-textarea"
rows="18"
style="overflow-y: scroll; height: 20rem !important; max-height: 20rem"
></textarea>
<label for="textarea2">Input 2</label>
</div>
</form>
</div>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
Maybe it's not possible, but I have been trying to figure out how to put a lot of content in either of the textareas without increasing the height of the main body. If I put say 100 lines of content in "textarea2" this will create a large scrollable area of white space at the bottom of the page. I want to try and avoid this.
The tricky thing is that I do not want to disable scrolling on the main page. For instance if the bottom of the browser is moved up to cover half of "textarea2" then the main page will trigger a scrollbar so that it's possible to scroll down to see all of "textarea2" element. I do not want to disable that feature, just want to stop the textareas from creating stacks of unsightly whitespace.
EDIT: I should add that I am going to be using this with Electron, so doesn't need to work with other browsers.
On trying to implement the Grid Layout, when i provide cell span values specific to device such as "mdc-layout-grid__cell--span-4-phone mdc-layout-grid__cell--span-6-desktop". The layout remains the same across desktop as well as mobile device. However according to the documentations of MDC , the cell should have updated as per the device on which the content is viewed.
You can see the below mentioned code in working condition at bodana.napcraft.in
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<!-- Newsletter Section Begins-->
<section id="sixthSection">
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<!-- Row Begins -->
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12-phone mdc-layout-grid__cell--span-6-desktop">
<img src="/resources/images/newsletter.png" style="width: 100%" />
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-12-phone" style="padding-top: 5vh; background: #E3C5B8;">
<center>
<span class="secondaryTitle">THE DEW'S NEWSLETTER</span><br/><br/>
<span class="largeText">To receive more freebies, latest news and so much more!</span></center><br/>
<div class="mdc-layout-grid__inner">
<!-- Row Begins -->
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop" style="padding-top: 2vh; background: #E3C5B8;"></div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop">
<div class="mdc-text-field" style="width: 100%">
<input class="mdc-text-field__input" id="text-field-hero-input">
<div class="mdc-line-ripple"></div>
<label for="text-field-hero-input" class="mdc-floating-label">Name</label>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop"></div>
<!-- Row Ends -->
<!-- Row Begins -->
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop" style="padding-top: 2vh; background: #E3C5B8;"></div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop">
<div class="mdc-text-field" style="width: 100%">
<input class="mdc-text-field__input" id="text-field-hero-input">
<div class="mdc-line-ripple"></div>
<label for="text-field-hero-input" class="mdc-floating-label">Email</label>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop"></div>
<!-- Row Ends -->
<!-- Row Begins -->
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop" style="padding-top: 2vh; background: #E3C5B8;"></div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop">
<center><button class="mdc-button mdc-button--outlined subscribeButton">SUBSCRIBE</button></center>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop"></div>
<!-- Row Ends -->
</center>
</div>
<!-- Row Ends -->
</div>
</div>
</section>
I would like to understand as to why my grid isn't updating as per device.
For the grid layout to work correctly, the following meta tag needs to be inserted in the tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
I have a small question.
What would be the best way to make a sibling push on the last element of said div?
this is the structure:
<div class="row">
<div class="formContainer col-lg-6">
<form>
<fieldset>
...content....
<button>Submit Form</button>
</fieldset>
</form>
</div>
<div class="col-lg-6" id="datePicker">
calendar where user picks dates
</div>
</div>
and the CSS (more or less)
form > button {
width: 200px;
margin: auto;
display: block;
margin-bottom: 15px;
position: relative;
right: -54%;
}
Here is an image as an example:
I want the right col-6 div to push on the save button which is in the left col-6, because there are elements of the rightmost div that are being added that start overlapping. How should I go about doing so?
This will do it:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
<div class="formContainer col-lg-6">
<form>
<fieldset>
...content....
</fieldset>
</form>
</div>
<div class="col-lg-6" id="datePicker">
calendar where user picks dates
</div>
<div class="col-lg-12 text-center">
<button class="btn btn-default"
onclick="$('.formContainer form', $(this).closest('.row')).submit();">Submit Form</button>
</div>
</div>
Notice I moved the button in a new column and I'm using inline Javascript to submit the form when it's pressed.
I have this button that I need centered in the space between two other div's. I'm not the primary developer on this project... I was just brought in to help bang out some new features really fast. I don't want to overhaul the html of the primary developer (who is still very active on this project), so instead of converting this to bootstrap rows and columns, is there a less invasive way to center this button?
(PS what you see in the snippet isn't what it actually looks like. We are missing some CSS. But it's close enough for what I need done.)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<div class="text-right">
<div id="">
<div>
<strong>Exclude Customers With Tags: </strong>
<select id="" multiple style="width:100px;"></select>
</div>
</div>
<div class="pull-left" id="">
<label>
<input type="checkbox" value="" id="">
some text
</label>
</div>
<!-- This is what I am adding -->
<div class="pull-left">
<button id="" class="btn btn-primary btn-sm">Center Me</button>
</div>
<!-- end/ This is what I am adding -->
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
i have removed the standard classes from bootstrap and display it with the flex
.text-right {display: flex;
flex-direction: row;
justify-content: space-between;}`
here is a jsfiddle demo https://jsfiddle.net/jjx4cf8L/
i'm using bootstrap 2 and I need to have 3 span, but the one in the middle should be really small to handle an image to show/hide the span on the left.
The problem is that I can't put all three span on the same line. Looks like the span with the image is taking the all place and not just 10px
Here is my code:
<style>
.myspan {
width:10px;
}
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" style="background-color: red">this is fluid</div>
<div class="myspan"><img src="~/Images/bullet.png" /></div>
<div class="span9" style="background-color: blue">yeah!</div>
</div>
</div>
You can use span3, span1 and span8 to occupy the 12 column grid and line them up. Use a custom class to specify a width and remove the margin. But use the custom CSS in a higher priority order i.e. new file, loading it after all the CSS so that you need not use !important. Try to avoid inline styles as well.
$('.span1').on('click', function() {
$('.span3').toggle('slow');
});
.small-span img {
margin-left: -15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" style="background-color: tomato">this is fluid</div>
<div class="span1 small-span">
<img src="http://placehold.it/25x25" />
</div>
<div class="span8" style="background-color: lightblue">yeah!</div>
</div>
</div>