I have an input element, and a button element next to it.
I want the button to be a fixed size (its default size), and the input to fill the remaining width.
How do I do this?
This is my code:
<div style="position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
background-color:white;
max-width:500px;">
<input type="text" #message style="height: 50px; float:right;" />
<button mat-fab (click)="newMessage()" color="primary">
<mat-icon>send</mat-icon>
</button>
</div>
</div>
You can simply use flex like this :
div {
display: flex;
}
input {
flex: 1; /* this will make the input to take the remaining space*/
}
<div style="position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
background-color:white;
max-width:500px;">
<input type="text" style="height: 50px;" >
<button mat-fab (click)="newMessage()" color="primary">
<mat-icon>send</mat-icon>
</button>
</div>
Also no need to use float property, you can control the position using order property.
The above code shows the button in the right and below the button is in the left :
div {
display: flex;
}
input {
flex: 1; /* this will make the input to take the remaining space*/
order:1;
}
<div style="position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
background-color:white;
max-width:500px;">
<input type="text" style="height: 50px;" >
<button mat-fab (click)="newMessage()" color="primary">
<mat-icon>send</mat-icon>
</button>
</div>
Related
I have two buttons that need to be moved on top of image. One button should be on right side of an image, and another one on the left side. However at the moment they stick at the bottom left corner of the image, while they should be on separate sides in the middle of photo. What I am doing wrong?
HTML part:
<div class="container">
<img class="mySlides" src="images/dog1.jpg" style="width:100%">
<img class="mySlides" src="images/dog2.jpg" style="width:100%">
<img class="mySlides" src="images/dog3.jpg" style="width:100%">
<img class="mySlides" src="images/dog4.jpg" style="width:100%">
<button class="carousell-button carousell-button-black carousell-button-left" onclick="plusDivs(-1)">❮</button>
<button class="carousell-button carousell-button-black carousell-button-right" onclick="plusDivs(1)">❯</button>
</div>
CSS part:
.container carousell-button-right {
position: relative;
top: 200%px;
right: 0%;
}
.container carousell-button-left {
position: absolute;
top: 100%;
left: 0%;
}
How it looks right now:
enter image description here
since you need it in the middle then use Relative to parent and use absolute for Right as well. This will make sure it is positioned absolutely middle based on the image size.
You should also use . for the carousell class.
As mentioned in the comments above 200%px; is an invalid property value.
body {
margin: 0;
}
.container {
position: relative;
}
.container .carousell-button-right {
position: absolute;
top: 50%;
right: 0;
font-size: 30px;
}
.container .carousell-button-left {
position: absolute;
top: 50%;
left: 0;
font-size: 30px;
}
<div class="container">
<img class="mySlides" src="http://placekitten.com/301/301" style="width:100%">
<button class="carousell-button carousell-button-black carousell-button-left" onclick="plusDivs(-1)">❮</button>
<button class="carousell-button carousell-button-black carousell-button-right" onclick="plusDivs(1)">❯</button>
</div>
Look at the snippet below and try to use flex-box
div {
width: 200px;
height: 200px;
background-color: black;
display: flex;
justify-content: center;
align-items: flex-start;
}
button {
width: 50px;
height: 20px;
}
<div>
<button>btn</button>
<button>btn</button>
</div>
I was getting the data from an API and displaying it using HTML.
#dat {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
button {
margin-left: 20px;
display: inline;
}
<h1><u>Weather App</u></h1>
<div id="dat">
<p id="data"></p>
<p id="temp"></p>
<p id="time"></p>
<button onclick="convertc()">imperial</button>
<button onclick="convertf()">metric</button>
</div>
The problem is that both the buttons are one above another.I want to bring it on the same line.
Thanks.
You didn't allow enough width for both buttons to fit.
I changed the width to 200px;
#dat{
position:absolute;
width:200px;
height:100px;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
}
button{
margin-left:20px;
display:inline;
}
<h1><u>Weather App</u></h1>
<div id="dat">
<p id="data">
</p>
<p id="temp">
</p>
<p id="time">
</p>
<button onclick="convertc()">imperial</button>
<button onclick="convertf()">metric</button>
</div>
The problem is the buttons are inside the #dat div which is set to be only 100px wide. If you want them to be centered on the same line, add a new div outside the #dat div with width: 100% and text-align: center.
#dat {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
button {
margin-left: 20px;
display: inline;
}
#buttondiv {
width: 100%;
text-align: center;
}
<h1><u>Weather App</u></h1>
<div id="dat">
<p id="data">
</p>
<p id="temp">
</p>
<p id="time">
</p>
</div>
<div id="buttondiv">
<button onclick="convertc()">imperial</button>
<button onclick="convertf()">metric</button>
</div>
Slightly different approach then above, using floatleft; and auto width.
Created CSS classes as re-useables.
#dat {
position: absolute;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
width: auto;
}
.pull-left {
float:left;
}
.ml-10 {
margin-left: 10px;
}
<h1><u>Weather App</u></h1>
<div id="dat">
<p id="data"></p>
<p id="temp"></p>
<p id="time"></p>
<button onclick="convertc()" class="pull-left">imperial</button>
<button onclick="convertf()" class="pull-left ml-10">metric</button>
</div>
You can separate your two buttons in different div and apply CSS in each div to adjust width.
<div>
<button onclick="convertc()">imperial</button>
</div>
<div>
<button onclick="convertf()">metric</button>
</div>
Beside, you can use Bootstrap to keep them inline for every devices.
My suggestions would be as follows:
Do not use the <u> tag for underlining unlinked text. This visual mechanism signifies something clickable. Using it for non-actionable text is bad UX.
Use an <ul> tag for the data items rather than <p> tags. Semantically the information is a list and not paragraphs of textual information.
For the <div> tags, use 100% width so that your UI is scalable with the visitors viewport. The CSS will continue to center the buttons as the viewport size changes.
See the following code:
#dat {
width: 100%;
margin: 0;
}
#dat ul
{
list-style:none;
margin:10px 0;
padding:0;
}
#dat .btns
{
width:100%;
text-align:center;
}
#dat .btns button {
display: inline;
}
<h1>Weather App</h1>
<div id="dat">
<ul>
<li id="data"></li>
<li id="temp"></li>
<li id="time"></li>
</ul>
<div class="btns">
<button onclick="convertc()">imperial</button>
<button onclick="convertf()">metric</button>
</div>
</div>
I have a video playing in the background of a div, however rather than showing behind the text the video is showing as a seperate section above the headline/signup form.
Live example: http://185.123.96.102/~kidsdrum/moneynest.co.uk/
I'd like the text and email signup form to show on top of the video.
Please note I'm using Bootstrap for a responsive design (video hidden on tablets/mobiles).
I'd like a video to play in the background of my jumbotron.
With full width and a height of 100% of the browser window (more content below when scrolled), this worked for an image but is having issues now.
CSS
.jumbotron {
color: white;
position:relative;
overflow:hidden;
height:500px
}
html,body {height:100%;}
.special,.special .jumbotron
{height:100%;
width: 100%;
margin: 0px;
padding: 0px;
border-radius: 0px;
}
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
height: 300%;
top: -100%;
}
}
#media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 300%;
left: -100%;
}
}
#media (max-width: 767px) {
.fullscreen-bg {
background: url('../img/videoframe.jpg') center center / cover no-repeat;
}
.fullscreen-bg__video {
display: none;
}
}
HTML
<div class="jumbotron">
<div class="fullscreen-bg"></div>
<div class="container special">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/vid/people-with-no-money-worries.mp4" type="video/mp4">
</video>
</div></div>
<div class="container text-center">
<div class="h1extrapadding hidden-xs hidden-sm"></div> <h1 class="boldme">Aged 20-30 & frustrated with money?</h1>
<div class="greenpromobox">
<div class="h2extrapadding hidden-xs hidden-sm"></div> <h2 class="boldme">Take our free <b class="jumpstarttext">Jumpstart Your Finances</b> class to<br /> quickly gain control over your finances</h2>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//moneynest.us11.list-manage.com/subscribe/post?u=9ccf2d2219536b32eaae3c3d1&id=299de51b4e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/hand-drawn-arrow.png" id="handarrow" class="hidden-xs hidden-sm" alt="arrow"><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email address" required autofocus>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9ccf2d2219536b32eaae3c3d1_299de51b4e" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Start Class Now" name="subscribe" id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
</div>
</div>
</div>
Add following style to Your .jumbotron
margin-bottom: -500px;
z-index: -1;
Should help You with this static setup. You can also play with margins values of this elements to layout them correctly.
Try this
.greenpromobox
{
top: 40px;
z-index: 9999999;
position: absolute;
margin-left: 20%;
}
add a class in your div (text and email signup form), I have added .emailBox for example and add the following style in that
.emailBox {
left: 50%;
margin-left: -585px;
position: absolute;
top: 0;
}
hope this will solve your issue.
I am trying to keep a textarea and a button in one line while having the textarea extend horizontally as much as possible:
<div class="col-md-10 form-inline">
<textarea class="form-control"></textarea>
<button>small button</button>
</div>
The "form-inline" class on the col makes both in one line, however, it shrinks the textarea. If I remove "form-inline", then the textarea stretches 100% - but the button appears in the next line.
Is it possible to have both in one line with a wide textarea?
Try doing something like this:
.form-inline { position: relative; padding-right: 160px; }
.form-inline > textarea { width: 100%; }
.form-inline > button { width: 150px; height: 35px; position: absolute; top: 0; right: 0; }
Check Demo Fiddle here.
set width for textarea in percentage
<div class="col-md-10 form-inline">
<textarea class="form-control" style="width:90%"></textarea>
<button>small button</button>
</div>
.form-control{
display: inline-block;
width: auto;
}
I have the following fiddle: http://jsfiddle.net/stpra123/7cap7o7s/2/
The first input has the icond correctly aligned but when I try to make the input tag take up 100% of it's width I can't seem to figure out how to get the icon to align correctly. Any suggestions? I am using the cascade css framework and fontawesome.
<div class="site-body">
<div class="site-center">
<div class="cell">
<form>
<input id="first" value="I am correct!" />
<i class="fa fa-calendar first"></i>
</form>
<form>
<input id="second" value="I am a bit messed up!" />
<i class="fa fa-calendar second"></i>
</form>
</div>
</div>
</div>
form {
margin-top: 30px;
}
#first {
width: 90%;
vertical-align: middle;
}
.first {
position: relative;
left: -30px;
}
#second {
width: 100%;
vertical-align: middle;
}
.second {
position: relative;
left: -30px;
}
EDIT: I need the input to take up 100% of the width because I have content below it that also takes up 100% of the width and if I set the input to 90% then it looks funny compared to the content below it.
I would wrap the input tag in a 'div' tag:
HTML
<div class="inputCont">
<input id="second" value="I am a bit messed up!" />
<i class="fa fa-calendar second"></i>
</div>
CSS
.inputCont {
position: relative;
width: 100%;
}
.second {
position: absolute;
right: 4px;
top: 8px;
}
Here's an updated jsFiddle