I wanted to create a filter element that can be collapsed using the <details> element as it comes out of the box with an open/close functionality.
However when it came to styling the fields inside, I wanted to use grid and it seems like <details> can't be set to display: grid?
Has anyone come across this behavior?
Your input is much appreciated!
details {
display: grid;
grid-template-columns: 100px 100px;
}
input {
width: 100%;
}
label {
display: block;
}
label:first-of-type {
color: red;
grid-column: 1;
}
label:last-of-type {
color: blue;
grid-column: 2;
}
<form>
<details open>
<summary>Filter</summary>
<label>
I should be on the left
<input type="text">
</label>
<label>
I should be on the right
<input type="text">
</label>
</details>
</form>
Codepen here!
Have had to wrap the form input's within the details in a <div> or another container to get display: grid to work and style them.
Related
I have a row of 3 inputs. One of them has label text placed above its input. I do not want this label text to interfere with the alignment of the inputs. Right now I'm using flexbox in my example. My hack/approach is to use position: absolute; on my optional label text to remove it from the flex flow so the inputs stay align. However, this creates a bit of spacing inconsistency when wrapping on smaller viewports. I've tried CSS grid as well but had issues where I was stuck writing a media query for every time I needed to wrap, which seemed worse than this. I would also like the solution to have no fixed widths/heights. As the elements and text can be dynamic. What is the best way to achieve this functionality that allows for a cleaner wrapping?
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.optionalContainer {
position: relative;
/*hack to container optional text*/
padding: 20px 0;
}
.optional {
position: absolute;
top: 0;
margin: 0;
}
<form class="container">
<input required type="text"/>
<div class="optionalContainer">
<p class="optional">Optional:</p>
<input type="text"/>
</div>
<input required type="text"/>
</form>
Example of what I'm shooting for at different viewports:
Here is a solution avoid both positioning and the padding hack using flex with row-gap of the input-height:
:root {
--input-height: 21.2px;
}
.container {
display: flex;
align-items: end;
flex-wrap: wrap;
row-gap: var(--input-height);
}
<form class="container">
<input required type="text" />
<div>
<div>Optional:</div>
<input type="text" />
</div>
<input required type="text" />
</form>
Here is a another solution which avoid both positioning and the padding hack using grid and a grid-template-columns hack:
:root {
--input-width: 146.867px;
--input-height: 21.2px;
}
.container {
display: grid;
/* wrapping hack from https://stackoverflow.com/a/43664701/1248177 */
grid-template-columns: repeat(auto-fill, minmax(var(--input-width), 1fr));
row-gap: var(--input-height);
align-items: end;
}
.optionalContainer > input {
box-sizing: border-box;
width: 100%;
}
<form class="container">
<input required type="text" />
<div class="optionalContainer">
<div class="optional">Optional:</div>
<input type="text" />
</div>
<input required type="text" />
</form>
I'm currently writing a page using Angular and have created a dialog window for users to copy columns from an Excel document. This window consists of two large textareas lined up as columns next to each other, which I achieved using css' column-count attribute.
The issue is that when the first textarea is focused, there is a glow around it. The bottom of the glow shows up in the next column above the second textarea. Is there something I can do to fix this?
I don't want to remove the glow because it helps the user know they're focusing on that input. Worst case scenario I'll just keep it as is.
Here's a picture of what it looks like to have the first text area focused.
copy-paste-dialog.component.html
<h1 mat-dialog-title>Copy/Paste Parts From Excel</h1>
<div id="dialogInput" mat-dialog-content>
<div>
<h4>Part Numbers</h4>
<textarea rows="20" class="form-control" placeholder="Part Numbers" [(ngModel)]="result.supplierPNs" ></textarea>
</div>
<div>
<h4>Descriptions</h4>
<textarea rows="20" class="form-control" placeholder="Descriptions" [(ngModel)]="result.descriptions" ></textarea>
</div>
</div>
<div mat-dialog-actions class="dialogButtons" >
<button mat-raised-button color="primary" [mat-dialog-close]="result">Submit</button>
<button mat-raised-button color="warn" (click)="cancel()">Cancel</button>
</div>
copy-paste-dialog.component.css
.dialogButtons {
margin: 10px 0;
}
#dialogInput {
column-count: 2;
}
textarea {
resize: none;
}
if it doesn't matter for you, you can just use flexbox:
.dialogButtons {
margin: 10px 0;
}
#dialogInput {
display: flex;
width: 100%;
margin: 0 -10px;
}
textarea {
resize: none;
}
#dialogInput div {
flex: 1;
margin: 0 10px;
}
display: flex works likes a row, it puts the divs next to each other.
flex: 1 means it will take the remaining space, so by giving both the divs within #dialoginput, it will take the even amount of space, which in this case is 50%.
At last, I added some margin.
Flex-box instead of column-count: 2 will solve this issue
CSS Change
.dialogButtons {
margin: 10px 0;
}
#dialogInput {
display: flex;
}
#dialogInput textarea {
margin-right: 1em;
}
textarea {
resize: none;
}
Input size seems to disregard the size attribute and instead set a width of 100% to the parent element.
Css:
.lespan {
display: flex;
flex-direction: column;
justify-content: flex-end;
background: red;
min-width: 300px;
input {
min-width: 0px;
size: 5;
}
}
input {
min-width: 0px;
size: 5;
}
html:
<span class="lespan">
hello
<input type="text">
</span>
<input type="text">
Codepen: https://codepen.io/basickarl/pen/Lybvyz
I'd like both inputs to be of size 5.
You are pointing the wrong problem.
Stop using invalid property values.
Size is attribute and attribute belong to HTML. Set input size attribute with CSS?
Always inspect your code in browser.
If you want set size, then set the width of input.
.lespan {
display: flex;
flex-direction: column;
justify-content: flex-end;
background: red;
min-width: 300px;
}
input {
width: 100px;
}
<span class="lespan">
hello
<input type="text" >
</span>
<input type="text">
size is not a valid css atribute, but a html attribute. You may want to set them like so:
<input type="text" size="5">
Also, display:flex will break the size attribute value of the input, you might want to use display:block, use the css width attribute instead of size or change the html structue so that the input element is outside of a container with display:flex
Moreover, You can't nest styles, to apply a specific style to an element using both its tag name and a class name you might want to try something like this:
input.lespan {
min-width: 0px;
size: 5;
}
Just add align-items: flex-start; to .lespan. Here is the updated CodePen
.lespan {
display: flex;
flex-direction: column;
justify-content: flex-end;
background: red;
min-width: 300px;
align-items: flex-start;
}
.lespan input {
min-width: 0px;
size: 5;
}
input {
size: 5;
}
<span class="lespan">
hello
<input type="text">
</span>
<input type="text">
You can use css width property:
input{
width:200px;
}
Or html
<input type="text" size="5">
I'm trying to build a search form using Bootstrap. Here's the HTML:
<form class="form-search search-bar">
<div class="input-append">
<input type="text" class="search-query" placeholder="Enter your address here...">
<button type="submit" class="btn btn-primary">
Search <i class="icon-search icon-white"></i></button>
</div>
</form>
I'm new to CSS - how do I style this so that the search elements are horizontally centered across the block? Also, how do I increase the height of the search elements?
You should add an ID
.search-bar {
text-align: center; /* centers inline and inline-block children */
}
.search-bar .search-query,
.search-bar .btn-primary {
display: inline-block; /* allows for heights to be set */
}
.search-bar .search-query {
height: 30px;
}
.search-bar .btn-primary {
height: 40px;
}
to place them next to eachother you can use the float command
.search-query {
float:left;
}
.btn-primary {
float:left;
}
Make sure the width of input-append is large enough to place them next to eachother.
to increase there height just place height:[amount]; in the same block as float in the CSS
I am trying to create tableless Form using and tags, im stuck.
I want the form look like this:
I should be able to set the width of textbox, text area and select in CSS.
Make each row a <p> containing a <label> and an <input>, both display: inline-block with preset width. (The <label> should be text-align: right)
The buttons can be float: right.
This is a good walk through: http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
check out working example here:
http://jsfiddle.net/bRm3P/2/
<form>
<label>To: <input type="text" /></label>
<label>Subject: <input type="text" /></label>
<label>Message: <textarea></textarea></label>
<div class="submit-container">
<input type="submit" value="submit"/><input type="submit" value="submit"/>
</div>
</form>
<style>
form {
width: 500px;
}
label {
display: block;
text-align: right;
margin-bottom: 4px;
}
label input,label textarea {
border: 1px solid #DEDEDE;
width: 80%;
vertical-align: top;
}
.submit-container {
padding-top: 4px;
text-align: right;
}
</style>
A nice semantic layout would be one of the following:
<ul>
<li><label>To <input></label></li>
...
</ul>
Or with a dl (more common):
<dl>
<dt><label>To</label></dt><dd><input></dd>
...
</dl>
You will find lots of ways to layout the latter if you google for: definition list layout form