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.
Related
First of all, thanks to you all for helping a lot of people!
Second of all, sorry for posting images in Spanish but I have no time to translate it into English. Anyway, text in photos are not relevant.
In this time I'm trying to develop and interactive degree program. Right now, it looks like this:
My idea is to manage card to:
Get same size on all cards
Keep all content (top, middle and bottom) inside cards
Manage middle content (name of a course in Spanish) to resize in favor to preserve card size
For example if i put 150% zoom, everything turn into this:
And if I put 50% zoom it looks about what I'm looking for:
I put a minimize snippet where you can reproduce two courses in one year.
.row {
margin-bottom: 0px !important;
}
#yearHolder {
margin-left: 5px;
}
.col .s12 {
padding-left: 0px !important;
padding-right: 0px !important;
}
.card-content {
padding-left: 10px !important;
padding-right: 10px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.card.small {
height: 150px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<title>Document</title>
</head>
<body>
<div id="malla" class="row">
<div id="1year" class="col l2 s6 offset-l1"><h6 class="center">First Year</h6>
<div id="yearHolder" class="row">
<div id="1semester" class="col s6">
<div class="col s12">
<div class="card horizontal red">
<div class="card-stacked ">
<div class="card-tabs">
<div class="col left">CBM-1000</div>
<div class="col right">8</div>
</div>
<div class="card-content">
<h6 class="black-text text-flow center-align">Algebra y GeometrÃa</h6>
</div>
<div class="card-tabs ">
<div class="row">
<div class="col left">1</div>
<div class="col right">12,13,15</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="2semester" class="col s6">
<div class="col s12">
<div class="card horizontal red">
<div class="card-stacked ">
<div class="card-tabs">
<div class="col left">CBM-1010</div>
<div class="col right">8</div>
</div>
<div class="card-content">
<h6 class="black-text text-flow center-align">Comunicación Elemental para la Ingenieria</h6>
</div>
<div class="card-tab">
<div class="row">
<div class="col left">1</div>
<div class="col right">12,13,15</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Please advice me if I'm not asking in format to quickly fix in favor to get help
Again, thanks to you all!
Materialize widths should be left alone else this will happen. You seem to be overwriting the purpose of their grid system by using the !important feature. Also by targeting them in this way you will change the markup across your entire website which may not be desired. I would suggest adding a new class name to all those divs, then target your own made up classes.
Sizes:
Add a class to all divs called sameSizeCards
Css:
.sameSizeCards{
Height: ______;
Width: 100%; (let Materialize sort the width)
}
Text sizing:
Use #media queries to scale your text-size based on screen widths.
Materialize provides three utility classes (small, medium and large) for cards that fix the height at 300px, 400px, and 500px respectively:
<div class="card small">
<!-- I will be 300px high -->
</div>
https://codepen.io/doughballs/pen/JjRVOgz
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
As you can see in the fiddle here:
https://jsfiddle.net/qar4n4ey/6/
The two buttons at the bottom are partially outside the container. It happened when i floated them both left and right. How to keep them inside the container?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>MYMDB</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="ui main center aligned text container segment">
<div class="ui huge header">Search for a TV show</div>
<form class="ui form" action="results" method="GET">
<div class="ui search">
<div class="ui icon input">
<input class="prompt" type="text" placeholder="Tv shows..." name="search">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
<input id="greenbtn" class="ui green button" type="submit">
</form>
<a id="run" href="/run" class="ui left floated blue animated button" tabindex="0">
<div class="visible content">Run python</div>
<div class="hidden content">
<i class="terminal icon"></i>
</div>
</a>
<a id="show-data" href="/data" class='ui right floated disabled button'> See the table </a>
</div>
</body>
</html>
And some css
#greenbtn {
margin-top:10px;
}
All the given answers don't use functionality of Semantic UI. If you want to do it in Semantic UI way then you can use clearing serment:
<div class="ui main center aligned text container clearing segment">
</div>
Use float: left for the container also
.ui.container{
float: left; // you could also use display: inline-block;
width: 100% !important;
}
Add clear: both after floated elements, or overflow: hidden to parent box.
.main.container {overflow: hidden}
https://jsfiddle.net/qar4n4ey/12/
all.
This is driving me nuts. I have two rows within a Bootstrap container. The first row has a single column of col-8 length that contains a single input (A in screenshot). The second row has two columns with each column having a col-4 length and a single input (B and C in the screenshot). Intuitively, I would think the first input's right border would align with the second input's right border in the second row (since 8 = 4 + 4). Visually, this isn't the case (please see attached screenshot).
Screenshot
I am guessing the inputs in the second row have additional padding that makes their combined width different from the first input. What is the best way to make the first input's right border align with the right border of the second input in the second row? Many thanks in advance.
You should set margin-right:-30px to col-8 because yes 4+4=8 but the colums have 15px margins on the left and on the right;
I think there is something wrong with your grid code, check out this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Form Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.row {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8"><input type="text" class="form-control"></div>
</div>
<div class="row">
<div class="col-sm-4"><input type="text" class="form-control"></div>
<div class="col-sm-4"><input type="text" class="form-control"></div>
</div>
</div>
</body>
</html>
Check out these pages for better understanding of Bootstrap grid system and form layouts:
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php
Try check this
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="form-group">
<label>A</label>
<input class="form-control" type="text" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-2">
<div class="form-group">
<label>B</label>
<input class="form-control" type="text" />
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label>C</label>
<input class="form-control" type="text" />
</div>
</div>
</div>
</div>
</body>
</html>
Just started playing around with bootstrap 3 and I can't get gutters between columns to work.
I created the most basic code to test with:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"> </script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<style>
.box1 {
background-color: green;
}
.box2 {
background-color: blue;
}
</style>
</head>
<div class="container">
<div class="row">
<div class="col-lg-4 box1">
<h1>Test</h1>
</div>
<div class="col-lg-8 box2">
<h1>Test2</h1>
</div>
</div>
</div>
</html>
And the result is just one big green/blue box without any gutter in between the two columns.
I have also tried it on a fiddle with no luck http://jsfiddle.net/Tgkkb/
What am I missing?
Bootstrap 3 switched to using padding for the gutters rather than margins. So, the content is parted, but the boxes aren't. And a background-color will fill the padding as well.
Though, you should be able to get the desired effect by setting the background on inner boxes:
<div class="row">
<div class="col-sm-4">
<div class="box1">
<h1>Test</h1>
</div>
</div>
<div class="col-sm-8">
<div class="box2">
<h1>Test2</h1>
</div>
</div>
</div>
http://jsfiddle.net/PFxUk/
Though, the goal is just to apply the background to a single, wrapping child. So, if the headers definitely won't have any siblings, then you can possibly forgo the additional <div>s:
<div class="row">
<div class="col-sm-4">
<h1 class="box1">Test</h1>
</div>
<div class="col-sm-8">
<h1 class="box2">Test2</h1>
</div>
</div>
http://jsfiddle.net/G2gbG/
If you want to set the padding or margin for your columns, you can use the row-no-gutters class on the row (introduced in v3.4.0) and add your own padding and background.
https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters