I want to put the button inline with the label and bellow them to have the full width input.
What I've made is this:
<div class="container">
<label>Tralala</label>
<input type="text" placeholder="Tralalala">
<button type="tooltip" data="This is tralalala">This is tralalala</button>
</div>
<div class="container">
<label>Tralala Tralalala Tralalala</label>
<input type="text" placeholder="Tralala Tralalala Tralalala">
<button type="tooltip" data="This is Tralala Tralalala Tralalala">This is Tralala Tralalala Tralalala</button>
</div>
So there is no posibility for me to put the button inside the label and I have to use CSS to make it.
My CSS looks like this:
.container {
display: flex;
flex-direction: column;
}
.container label { order: 0 }
.container input { order: 2 }
.container button {oder: 1 }
But from here, I don't know how to bring the label and button inline
Like this:
Change the flex-direction to row and allow wrapping.
Change the order so the inputcomes after the other elements and then make it 100% wide.
.container {
display: flex;
flex-wrap: wrap;
margin: 1em;
border: 1px solid green;
padding: 1em;
}
button {
margin-left: 1em;
}
input {
order: 2;
flex: 0 0 100%;
margin-top: 1em;
}
<div class="container">
<label>Tralala</label>
<input type="text" placeholder="Tralalala">
<button type="tooltip" data="This is tralalala">This is tralalala</button>
</div>
<div class="container">
<label>Tralala Tralalala Tralalala</label>
<input type="text" placeholder="Tralala Tralalala Tralalala">
<button type="tooltip" data="This is Tralala Tralalala Tralalala">This is Tralala Tralalala Tralalala</button>
</div>
Related
I have this HTML:
<form role="search" method="get" id="bbp-search-form" action="https://www.publictalksoftware.co.uk/support-forums/search/">
<div>
<label class="screen-reader-text hidden" for="bbp_search">Search for:</label>
<input type="hidden" name="action" value="bbp-search-request">
<input tabindex="101" type="text" value="" name="bbp_search" id="bbp_search">
<input tabindex="102" class="button" type="submit" id="bbp_search_submit" value="Search">
</div>
<div class="gdpos-power-link">
Advanced Search
</div>
</form>
At the moment it looks like this:
What I wanted to try and do is move the button to the right and expand the input to fill the space.
I tried using float:right; with the button and it does indeed move to the right.
I then tried applying a width: 100%; to the input but it expands to the very right edge and pushing the button down underneath it.
Is it not possible to do what I what? I am not able to change the HTML at this stage and hope to do what I want via CSS adjustments.
Update
When I try this addition CSS:
#bbp-search-form > div {
display: flex;
}
#bbp-search-form > div input {
flex: 1;
}
I end up with:
Update
I tried:
#bbp-search-form > div:first-child {
display: flex;
}
#bbp-search-form > div:first-child input {
flex: 1;
}
Doesn't seem to work.
Use flex box with flex-grow
.my-row {
display: flex;
}
.my-row input {
flex: 1;
}
<h1>Test</h1>
<div class="my-row">
<input type="text" />
<button>Search</button>
</div>
With your code
#bbp-search-form > div:first-child {
display: flex;
}
input[name="bbp_search"] {
flex: 1;
}
<form role="search" method="get" id="bbp-search-form" action="https://www.publictalksoftware.co.uk/support-forums/search/">
<div>
<label class="screen-reader-text hidden" for="bbp_search">Search for:</label>
<input type="hidden" name="action" value="bbp-search-request">
<input tabindex="101" type="text" value="" name="bbp_search" id="bbp_search">
<input tabindex="102" class="button" type="submit" id="bbp_search_submit" value="Search">
</div>
<div class="gdpos-power-link">
Advanced Search
</div>
</form>
Update
I found this to be the simplest CSS to use:
#bbp-search-form > div:first-of-type { display: flex; }
#bbp-search-form #bbp_search { flex: 1; margin-right: 5px; }
#bbp-search-form #bbp_search_submit { margin-top: 0px; margin-bottom: 0px; }
I have a simple page that consists of a form. There is a string for what the input box should be, and then the input box.
I want two different behaviors. When a cell phone is accessing the page, I want everything to be stacked on top of each other, but when the page is accessed via a computer I want multiple rows consisting of the the title, followed by the input box on the same row.
I've researched media queries by I still don't understand it enough to get through.
<html>
<head>
<style>
</style>
</head>
<body>
<form>
<center>
<div class="left">
First name:
</div>
<div class="right">
<input type="text" name="firstname"/>
</div>
<div class="left">
Last name:
</div>
<div class="right">
<input type="text" name="lastname"/>
</div>
<div class="left">
Email Address:
</div>
<div class="right">
<input type="text" name="email"/>
</div>
<div class="left">
Address:
</div>
<div class="right">
<input type="text" name="address"/>
</div>
<div class="left">
I've practiced yoga for at least one year:
</div>
<div class="right">
<input type="checkbox" name="oneyear"/>
</div>
<div class="right">
<input type="submit" name="submit" value="submit"/>
</div>
</center>
</form>
</body>
</html>
You have multiple choice: using Bootstrap to easily display your grid in different ways on window resize.
You can also use media queries, combine with a grid layout like Flexbox or Grid.
Or even use Jquery and the windworesize function.
Personnaly, i would choose Flexbox and the flex-direction propriety when the window reach the size of a smartphone or tablet.
To write a media querie, you just have to type something like #media screen and (max-width: 640px) for instance and write your rules inside the curly brackets.
Here is a sample code.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-size: 16px;
line-height: 22px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f5f5f5;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.my-form {
width: 100%;
max-width: 920px;
margin: 0 auto;
padding: 20px;
}
.my-form .input {
width: 100%;
padding: 10px;
}
.my-form .input .left {
display: block;
width: 100%;
line-height: 24px;
padding: 3px 0;
margin-bottom: 5px;
}
.my-form .input .right {
width: 100%;
}
.my-form .input input[type='text'], .my-form .input input[type='email'], .my-form .input textarea {
display: block;
width: 100%;
height: 30px;
font-size: 16px;
padding: 3px;
line-height: 22px;
border: 1px solid rgba(0,0,0,.3);
}
.my-form .input textarea {
height: auto;
min-height: 60px;
resize: vertical;
}
.my-form .input input[type='submit'] {
display: block;
width: 100%;
padding: 15px;
background-color: navy;
color: #ffffff;
font-size: 16px;
line-height: 22px;
}
#media screen and (max-width: 1024px) {
.my-form .input:after {
content: "";
clear: both;
display: table;
}
.my-form .input .left {
float: left;
width: 35%;
padding-right: 10px;
margin-bottom: 0;
}
.my-form .input .right {
float: right;
width: 65%;
}
}
</style>
</head>
<body>
<form class="my-form">
<div class="input">
<label class="left" for="firstname">
First name:
</label>
<div class="right">
<input type="text" id="firstname" name="firstname" />
</div>
</div>
<div class="input">
<label class="left" for="lastname">
Last name:
</label>
<div class="right">
<input type="text" id="lastname" name="lastname" />
</div>
</div>
<div class="input">
<label class="left" for="email">
Email Address:
</label>
<div class="right">
<input type="email" id="email" name="email" />
</div>
</div>
<div class="input">
<label class="left" for="address">
Address:
</label>
<div class="right">
<textarea cols="10" rows="5" id="address" name="address"></textarea>
</div>
</div>
<div class="input">
<div class="left"></div>
<div class="right">
<label for="oneyear"><input type="checkbox" id="oneyear" name="oneyear" /> I've practiced yoga for at least one year:</label>
</div>
</div>
<div class="input">
<input type="submit" name="submit" value="submit" />
</div>
</form>
</body>
</html>
You need Media Query for this. Media query is basically writing different CSS for devices with different widths. You can learn more from here- https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Also check out this article- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can also use jQuery for the same using matchmedia..
Here is a JSbin example for you- https://jsbin.com/kutacuzece/edit
(function($) {
/*
* We need to turn it into a function.
* To apply the changes both on document ready and when we resize the browser.
*/
function mediaSize() {
/* Set the matchMedia */
if (window.matchMedia('(min-width: 768px)').matches) {
/* Changes when we reach the min-width */
$('body').css('background', '#222');
$('strong').css('color', 'tomato');
} else {
/* Reset for CSS changes – Still need a better way to do this! */
$('body, strong').removeAttr('style');
}
};
/* Call the function */
mediaSize();
/* Attach the function to the resize event listener */
window.addEventListener('resize', mediaSize, false);
})(jQuery);
OR you can use something as simple as this-
if ($(window).width() < 960) {
$(selector).css({property:value, property:value, ...})
}
else if ($(window).width() < 768) {
$(selector).css({property:value, property:value, ...})
}
else {
$(selector).css({property:value, property:value, ...})
}
I have stack of dragable rows like the following.
and I am being asked to add titles (English keyword, French Keywords) on top of input boxes. like this second image. The major challenge here is to have the title aligned with input box while the screen is resized.(so the input boxes get resized, also there is hamburger, and garbage icons that are in the game)
Here is very simplified HTML codes for one row.
<div class="list-row">
<div class="handle">
<button type="button" class="icon-button">
<span class="sprite-grey-burger"></span>
</button>
</div>
<div class="stretch">
<input type="text" class="form-control"/>
</div>
<div class="stretch">
<input type="text" class="form-control"/>
</div>
<a href="#" class="delete-button">
<span class="sprite sprite-garbage-bin-black"></span>
</a>
</div>
and its simplified version of css
draggable-list .list-row {
display: flex;
}
.draggable-list .list-row .handle {
cursor: move;
display: flex;
}
.icon-button{
background-color: transparent;
border: none;
height: 38px;
}
.sprite-grey-burger {
// css to show a burger sign
}
.draggable-list .list-row .stretch {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
margin: 0 0.4em;
}
draggable-list .list-row .delete-button {
margin-left: 0.4em;
}
.sprite-garbage-bin-black {
// css to show garbage bin
}
I think, there should be flex solution, maybe, a new row on the top with the same flexes?!
but I don't know how!
I have a radio button which id is someID-1 and a div which id is navi1.
<input name="nappi" type="radio" id="someID-1" />
<div>
<div id="navi1">
<div style="z-index:100;position:fixed;right:0;top:0;bottom:0;">
<label for="someID-2">2</label>
</div>
</div>
</div>
This CSS code works just fine:
div[id^="navi"] {
display: none;
}
But this does not work OK:
input#someID-1:checked #navi1 {
display: block;
}
How should I modify the code?
I have tens of radio buttons (id names between someID-1 and someID-99). I would like to have dynamic code.
I do not want to use JavaScript.
You can make like this. you can read the details of the selector that i used here
#navi1{
display: none;
}
input[type="radio"]#someID-1:checked + div #navi1{
display: block;
}
.box{
border: 1px solid #ddd;
width: 200px;
height: 200px;
text-align: center;
}
<input name="nappi" type="radio" id="someID-1" />
<div class="box">
<div id="navi1">
<div>
<label for="someID-2">2</label>
</div>
</div>
</div>
You need to navigate the document hierarchy correctly in your CSS. So this works:
div[id^="navi"]
{
display: none;
}
#someID-1:checked + div div {
display:block;
}
I would like to create a form, which has a line number on each line and several form fields on each line. If the fields don't fit into one line, they should wrap into a new line while the line number stays at the top of the line. Here's an illustration of this form:
(The dark blue lines describe the explicit grid areas, the light blue line implicit grid areas for the different form fields.)
I know CSS Grid Layout is meant to solve use cases like this, though it is not clear to me, how to generate the form mentioned above with it.
What I've tried so far is:
HTML:
<div class="form">
<div class="row">
<div class="lineNumber">1</div>
<label for="field1">Field 1 <input id="field1"/></label>
<label for="field2">Field 2 <input id="field2"/></label>
<label for="field3">Field 3 <input id="field3"/></label>
</div>
<div class="row">
<div class="lineNumber">2</div>
<label for="field1">Field 4 <input id="field1"/></label>
</div>
</div>
CSS:
.row {
display: grid;
grid-template-columns: 50px 1fr 1fr;
grid-auto-rows: 30px;
}
.row > * {
padding: 4px;
}
.lineNumber {
grid-row-end: line-number span;
}
What I don't get yet, how can I achieve to let the row number column span over the whole height of the row while the other columns wrap between lines. I assume it must be possible defining the line-number named area using grid-template-rows. Though how?
EDIT:
I'm aware that it may be possible by using display: table-row; / display: table-cell;, though my main point is to achieve this using CSS Grid Layout.
2ND EDIT:
Note that some months after I asked this question here and Grid Layout implementations stabilized showing this feature is not available yet, I requested it at the CSS Working Group. Since then a similar request for spanning explicit and implicit tracks was made.
In my opinion, css counters should meet your question
#import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";
form {
counter-reset: form;
border: 2px solid cyan;
}
fieldset {
position: relative;
display: block;
padding: 1em 1em 1em 3em !important;
border-bottom: 2px solid cyan;
}
fieldset::before {
counter-increment: form;
content: counter(form);
position: absolute;
left: 5px;
top: 5px;
font-weight: bolder;
}
.sp-b { margin-bottom: 1em }
<form>
<fieldset>
<div class="row">
<div class="col-xs-6 sp-b"><input type="text" class="form-control"></div>
<div class="col-xs-6"><input type="text" class="form-control"></div>
</div>
<div class="row">
<div class="col-xs-12"><input type="text" class="form-control"></div>
</div>
</fieldset>
<fieldset>
<div class="row">
<div class="col-xs-12"><input type="text" class="form-control"></div>
</div>
</fieldset>
<fieldset>
<div class="row">
<div class="col-xs-12"><input type="text" class="form-control"></div>
</div>
</fieldset>
<fieldset>
<div class="row">
<div class="col-xs-12"><input type="text" class="form-control"></div>
</div>
</fieldset>
</form>
You can use display:table/table-cell to achieve what you want
Snippet
*,
*:before,
*:after {
box-sizing: border-box;
}
.form {
display: table;
table-layout: fixed;
width: 100%;
border: 1px solid #000;
}
.row {
display: table-row
}
.lineNumber,
.fields {
display: table-cell;
vertical-align: top;
padding: 10px 0;
}
.lineNumber {
border: 1px solid #000;
border-width: 0 1px 1px 0;
width: 20px;
text-align: center
}
.fields {
border-bottom: 1px solid #000;
/*fix inline-block gap*/
font-size: 0
}
label {
padding: 0 10px;
/*whatever you want */
font-size: 16px;
}
.row:first-of-type label {
width: 50%;
display: inline-block
}
.row:first-of-type label:not(:last-of-type) {
border-bottom: 1px solid red;
padding-bottom: 10px
}
.row:first-of-type label:last-of-type {
margin-top: 10px
}
.row:last-of-type .lineNumber,
.row:last-of-type .fields {
border-bottom: 0
}
<div class="form">
<div class="row">
<div class="lineNumber">1</div>
<div class="fields">
<label for="field1">Field 1
<input id="field1" />
</label>
<label for="field2">Field 2
<input id="field2" />
</label>
<label for="field3">Field 3
<input id="field3" />
</label>
</div>
</div>
<div class="row">
<div class="lineNumber">2</div>
<div class="fields">
<label for="field1">Field 4
<input id="field1" />
</label>
</div>
</div>
</div>