I'm designing a hybrid mobile app and I have a simple form that has a clickable icon inside it. For the icon to stay always in the same place, regardless of screen sizes, someone suggested I added the property width: fit-content. This makes the icon stay where it's supposed to stay. However, now my form doesn't take 100% width anymore. If I change width: fit-content to width: 100%, then the icon loses it's spot.
This is what I need it to look like:
And I manage this width width: 100%
This is what it's looking like now:
And this is what it looks like with width: fit-content
Here's my code:
.wallet-body {
width: fit-content;
margin: 0 auto;
float: left;
}
.form-group {
position: relative;
}
.form-group input,
.pin-input {
border: 1px solid #2C2C2C;
height: 48px;
}
.qr-scanner-img {
width: 11%;
position: absolute;
top: 50%;
right: 2%;
transform: translateY(-50%);
}
<div class="wallet-body">
<form class="form-pagar">
<div class="form-group">
<input type="amount" class="form-control" id="amount" placeholder="Monto">
</div>
<div class="form-group">
<input type="IDuser" class="form-control" id="IDuser" placeholder="Email del destinatario">
<a href="#">
<img class="qr-scanner-img" src="img/qr.svg" alt="qr"></a>
</a>
</div>
<button type="button" class="btn btn-block btn-confirmar" data-toggle="modal" data-target="#modalConfirmation">Confirmar</button>
</form>
</div>
If I understood correctly you can use the position absolute for the icon.
you should add width:100% for .wallet-body and .pin-input
`
.wallet-body {
width: 100%;
margin: 0 auto;
float: left;
}
.form-group input,
.pin-input {
border: 1px solid #2C2C2C;
height: 48px;
width: 100%;
}
`
HTML :: Remove class from image and add in a tag
<a href="#" class="qr-scanner-img">
<img class="" src="img/qr.svg" alt="qr"></a>
CSS::
.qr-scanner-img {
width: 11%;
position: absolute;
top: 50%;
right: 2%;
transform: translateY(-50%);
text-align: right;
}
Hope will work.
Related
I am making a search bar for an idea of mine and I'm still very new to CSS.
My search button is below my text bar and my on hover button and I can't figure out the solution or find the reason why!
I have tried changing the margins, padding, and top/bottom percentages but to no avail
HTML
<div class="search-box">
<div class="location">
<input name="location" type="text"
placeholder="location"/>
</div>
<div class="dropdwn">
<button class="dropbtn">dropdown</button>
<div class="dropdwn-content">
<img src="../Media/sunny.png" alt="Sunny"
width="50" height="50">
<img src="../Media/partly_cloudy.png"
alt="partly_cloudy" width="50"height="50">
<img src="../Media/rain_s_cloudy.png" alt="rain_s_cloudy"
width="50"height="50">
</div>
</div>
<div class="searchbtn">
<button type="button">Search</button>
</div>
</div>
CSS
.search-box
{
width: 40%;
box-sizing: border-box;
border-radius: 3px;
border-style: solid;
position: absolute;
left: 35%;
top: 20%;
}
.location input
{
box-sizing: inherit;
width: 50%;
float:left;
}
.dropdwn
{
position: relative;
display: inline-block;
}
.searchbtn button
{
float: right;
}
.dropdwn-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
I am expecting my searchbtn to be top right of the box instead of the bottom right
When using display: inline-block, the whitespace matters. This can mess up %-based layouts and indentation a bit (see below).
The other issue I see is with your rules around setting input width, as this will affect the child element instead -- telling it to fill 50% of .location instead of .search-box.
I've simplified your code to highlight these changes, and added some %'s so that the input and buttons will stretch (or shrink) to fill their parents, who will in turn fill .search-box. A simple float: right on the .searchbtn element now sends it to the right, without a new line.
* {
box-sizing: border-box;
}
.search-box
{
box-sizing: border-box;
border-radius: 3px;
border-style: solid;
left: 35%;
top: 20%;
width: 60%;
}
.search-box > div {
display: inline-block;
}
.search-box button, input {
width: 100%;
}
.location {
width: 50%;
}
.searchbtn {
float: right;
}
<div class="search-box">
<div class="location">
<input name="location" type="text" placeholder="location"/>
</div><div class="dropdwn">
<button class="dropbtn">dropdown</button>
</div><div class="searchbtn">
<button type="button">Search</button>
</div>
</div>
I have tried to make a tag that completely covers a div element and when clicked, the button element would disappear.
HTML:
I have tried setting height and width to 100%, but this does not fill the area entirely... how do I fix this?
#startstorybutton {
height: 100%;
width: 100%;
position: absolute;
top: 7.5vw;
right: 20vw;
z-index: 10;
background-color: #f4511e;
color: white;
Font-size: 50px;
font-style: italic;
transition: all 0.6s;
cursor: url(cursors/select.PNG), pointer;
}
#story {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Three_little_pigs_%28geograph_4633727%29.jpg/1200px-Three_little_pigs_%28geograph_4633727%29.jpg");
background-size: 100%;
height: 40%;
width: 80%;
margin: 0 auto;
}
<div id="story">
<div>
<p id="storytitle">The Three Little Pigs</p>
<div>
<p id="storybox"></p>
</div>
<div id="storybuttonsection">
<button type="button" id="backbutton"><span>Go back</span></button>
<p id="pagenumber">121212</p><button id="continuebutton"><span>Continue</span></button>
</div>
</div>
<button type="button" id="startstorybutton">Start the story!</button>
</div>
You have to position the button element on top of the "hidden element", if you set the main element position to relative you can then position the child element absolute over it (top: 0; right: 0) with the height and width to 100%.
For hide the button, the easy way is to add a listener event to the button and then hide it (or remove it) with javascript.
#startstorybutton {
height: 100%;
width: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 10;
background-color: #f4511e;
color: white;
Font-size: 50px;
font-style: italic;
transition: all 0.6s;
cursor: url(cursors/select.PNG), pointer;
}
#story {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Three_little_pigs_%28geograph_4633727%29.jpg/1200px-Three_little_pigs_%28geograph_4633727%29.jpg");
background-size: 100%;
height: 40%;
width: 80%;
margin: 0 auto;
position: relative;
}
<div id="story">
<div>
<p id="storytitle">The Three Little Pigs</p>
<div>
<p id="storybox"></p>
</div>
<div id="storybuttonsection">
<button type="button" id="backbutton"><span>Go back</span></button>
<p id="pagenumber">121212</p><button id="continuebutton"><span>Continue</span></button>
</div>
</div>
<button type="button" id="startstorybutton" onclick="this.style.display = 'none'">Start the story!</button>
</div>
I am not very sure of your HTML structure. But as you described your problem I have created an example for you.
You need t make changes in your HTML to make it simple and straightforward.
The story div contains the button, which will be absolutely positioned to fit the entire div.
I have thrown in a small bit of jQuery to show how it will look like.
$(function(){
$("button.overlay").click(function(){
$(this).hide();
});
});
.story{
width: 250px;
height: 100px;
border: 1px solid black;
text-align:center;
position: relative;
}
.overlay{
position: absolute;
top:0px;
left:0px;
height: 100%;
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="story">
Here goes the story!
<button class="overlay">read story button</button>
</div>
Im having this issue with the Login page where header and footer do not get resized when i make a browser window a bit smaller:
body {
position: relative;
margin: 0;
background: #FBFCFE;
font-family: Arial, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #2B2B2B;
display: flex;
min-height: 100vh;
flex-direction: column;
}
.loginPage {
max-height: 1150px;
}
.loginPageHeader {
clear: both;
background-color: #517084;
padding-top: 25px;
height: 125px;
z-index: 3;
}
.loginPageSignInForm {
position: absolute;
width: 600px;
height: 300px;
top: 40%;
left: 41%;
margin: -100px 0 0 -150px;
}
#loginPageFooter {
position: absolute;
bottom: 0;
width: 100%;
color: white;
text-align: left;
background: #517084;
padding: 10px 15px 20px 15px;
font-size: 12px;
display: block;
vertical-align: middle;
}
.loginPageHeader, .loginPageSignInForm, and loginPageFooter are inside .loginPage
The header and the footer are kinda huge when the browser is smaller and the signin form is not aligned in the center.
Screenshot
<div className="loginPage">
<div className="loginPageHeader col-lg-12">
<div className="floatleft secservices">
<img src={require('../../images/some-image.png')}/>
</div>
</div>
<div className="loginContainer"></div>
<div className="loginPageSignInForm">
<h2 className="form-signin-heading">Log in to Home</h2>
{errorLogin}
<form className="form-signin" onSubmit={this.formSubmit}>
<input onChange={this.setEmail} type="email" className="login-form-control"
autoComplete="email" placeholder="Email" required></input>
<input onChange={this.setPass} type="password" className="login-form-control"
autoComplete="new-password" placeholder="Password" required></input>
<button className="btn btn-lg btn-primary btn-block"
type="submit">Log In</button>
</form>
</div>
<LoginPageFooter />
</div>
LoginPageFooter component:
return (
<div id="loginPageFooter">
<div className="col-lg-4">
<div id="loginPageFooterText">
sdafadsfdsfasf
</div>
<div className="loginPageLinks">
<a className="footerLink"></a>
<a className="footerLink"></a>
<a className="footerLink"
>Y</a>
<a className="footerLink"></a>
</div>
</div>
<div className="col-lg-5"></div>
<div className="col-lg-3" style={styles.textAlignRight}>
<div id="contactSupport">NEED HELP? </div>
<div><a href="j.html"
title="Contacts & Procedures">Customer Support</a>
: 1-444444444</div>
<div><a href="mailto:2342314#sdafsd.com"
title="& Procedures">Email</a>
: 2342314#sdafsd.comm</div>
</div>
</div>
);
Use vh attributes. It means viewport height and is a percentage. So height: 90vh would mean 90% of the viewport height. This works in most modern browsers.
Eg.
div {
height: 90vh;
}
You can forego the rest of your silly 100% stuff on the body.
If you have a header you can also do some fun things like take it into account by using the calc function in CSS.
Eg.
div {
height: calc(100vh - 50px);
}
This will give you 100% of the viewport height, minus 50px for your header.
Hope it helped!
The issue I am having is that when I change the size of the font in my button, the button then resizes. As of now, I would like to keep the buttons at one specific size. So, I have fixed my buttons to a specific size but now I cannot change the font size. I am currently running my program on Chrome.
Here is the HTML chunk:
<div class="file-input-wrapper">
<button class="btn-file-input">Upload Documents</button>
<input type="file" name="filesToUpload[]" id="filesToUpload" multiple="" onChange="makeFileList();" />
</div>
<p>
<strong>Files You Selected:</strong>
<ul id="fileList">
<li>No Files Selected</li>
</ul>
<div class="file-input-wrapper1">
<button class="btn-file-input1">Upload Documents</button>
<input type="submit" value="Upload!" />
</div>
</p>
<style type="text/css">
.file-input-wrapper {
width: 400px;
height: 125px;
overflow: hidden;
position: relative;
}
.file-input-wrapper>input[type="file"] {
font-size: 200px;
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.file-input-wrapper>.btn-file-input {
display: inline-block;
width: 400px;
height: 125px;
}
.file-input-wrapper:hover>.btn-file-input {
background-color: #aaa;
}
.file-input-wrapper1 {
width: 400px;
height: 125px;
overflow: hidden;
position: relative;
}
.file-input-wrapper1>input[type="submit"] {
font-size: 200px;
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.file-input-wrapper1>.btn-file-input1 {
display: inline-block;
width: 400px;
height: 125px;
}
.file-input-wrapper1:hover>.btn-file-input1 {
background-color: #ffff00;
}
</style>
You can set the button font size with the following:
button {
font-size: 40px;
}
Since your buttons have a defined height and width, it should not change their dimensions.
Add an additional class to all your buttons. Even if you have some "buttons" that are not actually buttons, but instead input type="submit" or input type="button", add this class to all of those things.
Then do this in your CSS:
.some_class_added_to_all_buttons{
width: some-width;
height: some-height;
font-size: some-font-size;
}
if you have a button that already has a class, add an additional one like this
<button class="btn-file-input1 additional_class">Upload Documents</button>
So I was wondering how can I make the box stops exactly before it go through the text. The box is just floating under the text, I want to make it stop floating before it hits.
Normal Size
Window resized
HTML:
<div class="program"></div>
<span class="but">
<h2 class="zaglavie">CSGOFREEITEMS <span class="beta">0.5.1</span></h2>
<p class="opisanie"><b>Ultimate platform</b>. The easiest way to have fancy inventory. Get the item you want just in <b>seconds</b>.</p>
<div class="buttons">
<a class="button1" href="#above"></a>
<a class="button2" href="#above"></a>
<span style="float: right; color: white; margin-right: 2px; margin-top: 1px; font-size: 10.5px;">for only <b>$4.99</b>/month</span>
</div>
</span>
<br>
CSS:
.but
{
position: absolute;
top: 90px;
font-family: Verdana;
display: block;
}
.zaglavie
{
font-family: 'Open Sans', sans-serif;
color: #e5e5e5;
font-size: 31px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.39);
position: relative;
left: 70px;
top: 100px;
font-weight: 700;
}
.opisanie
{
font-family: 'Open Sans', sans-serif;
color: #fefefe;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.39);
font-size: 16px;
left: 70px;
top: 90px;
position: relative;
width: 400px;
}
.buttons
{
margin-left: 70px;
margin-top: 120px;
width: 375px;
height: 57px;
}
.button1
{
display:block;
width: 227px;
height: 57px;
background-image: url(images/button1.png);
background-repeat: no-repeat;
float: left;
}
.button2
{
display:block;
width: 136px;
height: 57px;
background-image: url(images/button2.png);
margin-left: 240px;
}
.program
{
display:block;
width: 665px;
height: 745px;
background-image: url(images/sosi2.png);
background-repeat: no-repeat;
right: 50px;
position: relative;
float: right;
}
Weave: http://kodeweave.sourceforge.net/editor/#4fc7d9522497eba555377ed94d364ee3
CSS Media Queries are a good solution for your problem.
I made a simple snippet here to show you how they work. You can utilize them with your site to fix the problem.
What I decided to do here is use display: table; and table-cell to center your elements.
I then used media queries to change the element from display: table; to display: block;
In addition I change your program background image to an image element as it's easier to style and handle upon page resize.
I converted your images to Base64 aka DataURL (because I'm on a tablet and it's easier to test without extra http requests.
Here's a very simple example of how you can solve your problem with media queries
You can view this weave for a more extensive solution (ex display: table; and table-cell).
.left, .right {
position: absolute;
top: 0;
bottom: 0;
padding: 1em;
}
.left {
left: 0;
right: 50%;
background: #93e9ff;
}
.right {
right: 0;
left: 50%;
background: #47ffaf;
}
#media all and (min-height: 300px) {
.left, .right {
position: absolute;
left: 0;
right: 0;
}
.left {
top: 0;
bottom: 50%;
}
.right {
bottom: 0;
top: 50%;
}
}
<div class="left">left content</div>
<div class="right">right content</div>
You can use Bootstrap and you will have a nice responsive design for your page.
This is your code with bootstrap, without css and using the images in the HTML section:
<!Doctype html>
<html>
<head>
<meta charset ="utf-8">
<!--Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<!--you can change that numbers to adapt your page to another devices like tablets-->
<!--if you see, the numbers are a proportion of 12, in this case, 5:7 (check the last div)-->
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
<span class="but">
<h2 class="zaglavie">CSGOFREEITEMS <span class="beta">0.5.1</span></h2>
<p class="opisanie"><b>Ultimate platform</b>. The easiest way to have fancy inventory. Get the item you want just in <b>seconds</b>.</p>
<div class="buttons">
<a class="button1" href="#above"><img src="images/button1.png"></a>
<a class="button2" href="#above"><img src="images/button2.png"></a>
<span style="float: right; color: white; margin-right: 2px; margin-top: 1px; font-size: 10.5px;">for only <b>$4.99</b>/month</span>
</div>
</span>
</div>
<!--if you see, the numbers are a proportion of 12, in this case, 5:7-->
<div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
<img class="img-responsive" src="images/sosi2.png">
</div>
</div> <!-- end row -->
</div> <!-- end container-fluid -->
</body>
You can implement your css from here and you will see that will be more easy and solid.
See http://getbootstrap.com/components/
Or https://www.youtube.com/watch?v=3cYWiU_HsgM (a nice tutorial of Bootstrap 3)
Hope this helps.