Is there a way to control the form input size based on the screen size with t he default css or is this something I will have to create custom css to do? I would like the inputs to be larger on smaller screen size and then there default size on larger displays.
Well you are already using twitter bootstrap.
I could elaborate on this issue more but Bootstrap does this the best.
So before I start please view : Bootstrap CSS
To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
Second:
If you want some pieces Larger on smaller device use : max-width css property.
You can also use the .img-responsive Class made by Bootstrap. But basically all of that is written in the link I provided. If you have something more specific I'd love to help!
Good Luck on all.
So this may not be the correct answer but the answer above doesn't explain too much with regards to actual code...
So, here's what I have:
<div class="row">
<div class="col-xs-3 col-sm-8" style="vertical-align: middle;align-self: center;">
<input type="text" name="search" placeholder="Search lots..." style="padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc;
border-radius: 4px; box-sizing: border-box; width:100%;" bind="#searchValue" />
</div>
<div class="col-xs-1 col-md-2" style="vertical-align: middle;align-self: center;">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
onclick="#searchColumn(searchValue)">
SEARCH
</button>
</div>
<div class="col-xs-1 col-md-2" style="vertical-align: middle;align-self: center;">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
onclick=#(async () => await Reload()) id="btnReset">
RESET
</button>
</div>
</div>
Using bootstraps "row" and "col" classes, we can make a row, with columns inside it...
The class="col-sm-8" means, column, on a small device, with a column size of 8...
The column sizes range from 1 - 12
So if you had two columns with col-md-6 you would have two equal columns in a row...
By including two declarations you're telling bootstrap to use a certain column size on a certain screen size, defined by xs (extra small), sm (small), md (medium), lg (large)
You can have a look at this article I found which explains the different options in detail: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
extra: https://www.w3schools.com/bootstrap/bootstrap_grid_medium.asp
Hope this helps :)
Related
Is there a way to automatically keep in sync rows height of table-alike structure between headers and body? I mean to force CSS Grid to keep each header and data row to have equal height, despite them having separate parents? I don't want headers and body to share the same column in HTML. I want two main columns: headers and body.
Additionally, number of rows as well as body columns is dynamic. The goal is to create comparison table, where headers represent product features names and body columns represent product features values. Also, table body will additionally be wrapped in <div> to introduce a slider feature.
AFAIK CSS Subgrid theoretically would do that, but it's experimental in Firefox only
Below is simplified input code available also on CodePen. I want "Header 1", "Data 1.1", "Data 2.1" cells to have same height. Same for higher rows, like "Header 2 | higher header 2 | yet higher header 2", "Data 1.2", "Data 2.2" - all cells should have same height.
.table {
display: grid;
grid-template-columns: 1fr 2fr;
}
.table__headers,
.table__body {
border: 1px solid black;
}
.table__body {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid blue;
margin: 5px;
padding: 5px;
}
.cell {
border: 1px solid red;
}
<div class="table">
<div class="table__headers">
<div class="cell">Header 1</div>
<div class="cell">
Header 2
<br>
higher header 2
<br>
yet higher header 2
</div>
<div class="cell">
Header 3
<br>
higher header 3
</div>
<div class="cell">Header 4</div>
</div>
<div class="table__body">
<div class="table__body-inside">
<div class="cell">Data 1.1</div>
<div class="cell">Data 1.2</div>
<div class="cell">Data 1.3</div>
<div class="cell">Data 1.4</div>
</div>
<div class="table__body-inside">
<div class="cell">Data 2.1</div>
<div class="cell">Data 2.2</div>
<div class="cell">Data 2.3</div>
<div class="cell">Data 2.4</div>
</div>
</divc>
</div>
In a concise way: the highest cell in the visual row (because headers and body are technically in separate columns not being same row in the HTML) should dictate the height for the whole row.
Below i attach ugly Paint made picture presenting what i want to achieve:
I made a workaround by manually setting each row's header height (via inline style) to be equal to neighbor row's data height with the help of ResizeObserver (so these heights are dynamically set up when viewport width is changed). To make it work i had to switch from Grid to Flexbox for the headers and data columns, because changing height for Grid children don't make them "take" (or move into) remaining vertical space (they behave like being glued to tracks they are bound to), which happens in Flexbox.
I am aware this is not the best solution, but i haven't came up with anything that worked better.
I've noticed that something small changed between v3 and v4 I wasn't aware of.
Basically i tried to build the Answer of this Question: Twitter Bootstrap 3 rowspan and reorder
but in Bootstrap4.
The obvious solution would be to use the "float-sm-right" class, instead of the custom one "b-col".
But this is not working, instead the red col always gets pushed to the end of the blue one.
<div class="col-sm-5 float-sm-right">
http://jsfiddle.net/jr70k9L6/
So is there any way to build this in Bootsrap4, while still getting the A-B-C order for smaller-sizes than sm?
Seems somehow trivial to me, but I just cant wrap my head around this...
The answer was simple: Flex does not float.
Bootsrap4 class="row" is display: flex; so float-sm-right will not work.
If you get rid of class="row" and float all the div's inside that grid is possible in v4:
<div class="">
<div class="col-sm-7 float-left" style=" background: green; height: 300px;">
<p>A</p>
</div>
<div class="col-sm-5 float-left float-sm-right" style="background: blue; height: 600px;">
<p>B</p>
</div>
<div class="col-sm-7 float-left" style="background: red; height: 300px;">
<p>C</p>
</div>
</div>
http://jsfiddle.net/j0scL2r9/
Check out my fiddle to see what I'm working with:
http://jsfiddle.net/ETKYj/7/
It expands the height until the end of the duration, tripling the size of the page. I want the words to animate the distance of the init/load height of the page for the entire duration.
EDIT: I took the overflow suggestion and it works in fiddle, but if you notice, the words aren't falling at a the duration (slower because the page is shorter), they still fall as if the page is 3 times longer (and they are falling at different rates, which they shouldn't be) They should all behave like "first" falling in unison
Will
body {
overflow: hidden;
}
do what you're trying to achieve?
The following also might do, if you want to do that effect only in a part of the page:
#wordframe {
overflow: hidden;
width: 100%;
height: 100%;
}
.word {
color: #000;
font-size: 200%;
font-family: Gloria Hallelujah;
}
<div id="wordframe">
<div class="word" cue="5">first</div>
<div class="word" cue="10">second</div>
<div class="word" cue="20">third</div>
<div class="word" cue="20">fourth</div>
<div class="word" cue="30">fifth</div>
<div class="word" cue="35">sixth</div>
<div class="word" cue="40">seventh</div>
</div>
I'm trying to create a website with a background-size:100% 100% css rule. It's an image that sits behind the content and is designed in such a way that no matter the dimensions of the browser window it still works well.
I think the rule I have (as below) is clashing with Blueprint somehow.
body {
background:url('../img/bg.jpg') no-repeat;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
}
This should generate a perfect 100% background image, however, the results I'm getting is that the background finishes where the content finishes, regardless of the browser window size.
Here are two images of what I want and what I'm getting:
EXPECTED
WHAT I'M GETTING (regardless of browser size)
Please help me, I'm not sure how to proceed with this.
Here is my HTML setup for the page:
<body>
<div class="container">
<div id="navbar" class="span-6 last">
<div id="logo" class="span-6 last"></div>
<div id="menu">
<ul>
<li class="menu-current">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="content" class="span-18 last">
</div>
</div>
</body>
If the container is 550px high then the background ends 550px down the page with an empty white space beneath that area.
I was able to replicate the effect on JSFiddle:
http://jsfiddle.net/danhanly/TurW5/4/
Would be nice if you can show us your HTML and CSS that way maybe I can pin point what your doing wrong.
You can write.
html {height:100%}
body {background:url('/image.jpg') no-repeat center}
#container {
margin:20px auto;
width:960px;
overflow:hidden}
Adding a min-height to the body that is equal to the height of the background-image will ensure that the body is large enough to display the entire background.
How do achieve the following:
┌────────────────────parent────────────────────┐
│ label [text-box ] [button] │
│ paragraph │
└──────────────────────────────────────────────┘
label is aligned to the left
button is aligned to the right
text-box occupies all remaining width within parent
paragraph is aligned to the left, must be left-aligned with label too
Both label and button should obey font properties defined elsewhere as maximum as possible. parent is center-aligned within window, and, naturally, can have arbitrary width.
Please advise.
Updated [Oct 2016]: Flexbox version...
form {
display: flex;
}
form input[type="text"] {
flex: 1;
}
<form>
<label>Name</label>
<input type="text" />
<button>Submit</button>
</form>
<p>Lorem ipsum...</p>
Original answer [Apr 2011]: Table-less CSS version (of table behavior)...
<div id="parent">
<div id="inner">
<label>Name</label>
<span><input id="text" type="text" /></span>
<input id="submit" type="button" value="Submit" />
</div>
<p>some paragraph text</p>
</div>
CSS...
#inner {
display: table;
width: 100%;
}
label {
display: table-cell;
}
span {
display: table-cell;
width: 100%;
padding: 0px 10px;
}
#text {
width: 100%;
}
#submit {
display: table-cell;
}
Demo: http://jsfiddle.net/wdm954/626B2/4/
I don't like first answer with the "table-less" version that actually uses table-cell. Nor the second answer that uses actual tables. Nor third answer that uses hardcoded widths. Here is solution using flex. It is by far simplest:
#parent {
display: flex;
}
input {
flex: 1;
}
<div id="parent">
<label>Name</label>
<input type="text" />
<button>Button</button>
</div>
<div>paragraph</div>
Use tables. :D I know people tend to hate tables, but they will work in this situation...
<div id="parent">
<table style="width:100%">
<tr>
<td>label</td>
<td style="width:100%">
<input type="text" style="width:100%">
</td>
<td>
<button>clickme</button>
</td>
</tr>
</table>
</div>
The only way I know how to achieve this or similar, is to have the "text-box" as a block element that would automatically fill the entire width of the parent, then apply padding to the left and right equal to the total width of the containers on the left and right. Then make the "label" and "button" elements have their position set as relative and float them to where they need to be (float: left, float: right).
Something like,
HTML:
<div id="parent">
<div id="label">label</div>
<div id="button">button</div>
<div id="text-box">
text<br />
text<br />
text<br />
text<br />
text
</div>
</div>
CSS:
div#label
{
position: relative;
float: left;
width: 200px;
background: #F00;
}
div#button
{
position: relative;
float: right;
width: 120px;
background: #0F0;
}
div#text-box
{
padding-left: 200px;
padding-right: 120px;
background: #00F;
}
If the button and label elements don't need to have a set width, all elements could just have their width as a percentage value (all adding up to 100%).
Don't forget, you can use calc(). Let's assume total of width used by label and button is 100px (including margin), then the width is:
.text-box {
width: calc(100% - 100px);
}
If you think it doesn't support a lot of browser, well you are wrong indeed. It supports a lot now. Time has changed
It works without flex and tables if assign float: right and put the button (or several buttons in reverse order) before the input box.
Then place the label with float: left, give the input box 100% width and wrap it inside a span with display: block and overflow: hidden.
No magic involved:
<div style="width:100%">
<button style="float:right">clickme 2</button>
<button style="float:right">clickme 1</button>
<label style="float:left">label</label>
<span style="display:block;overflow:hidden">
<input type="text" style="width:100%"/>
</span>
</div>
The basic idea that all right side buttons are specified before the input box in the reverse order.