I'll give the examples, as well as screenshots, first:
HTML:
<div class="add-link-box">
<div class="add-link-box-close-button" id="add-link-box-close-button">X</div>
<form name="add-link" id="add-link-form" method="post" action="" enctype="multipart/form-data">
<div style="width: 90%;" class="alink-field">Add A Link</div>
<div class="mobile-form-frame" id="mobile-form-frame">
<div class="alink-field mobile-alink"><label for="link-url">Link Address:</label></div>
<div class="alink-field"><input type="text" name="linkurl" id="link-url" class="add-link-form"
placeholder="www.awebsite.com"></div>
<div class="alink-field mobile-alink"><label for="link-description">Link Description:</label></div>
<div class="alink-field"><input type="text" name="linkdescription" id="link-description" class="add-link-form" placeholder="my
website"></div>
<div class="alink-field mobile-alink"><label for="link-image">Link Image:</label></div>
<div class="alink-field"><input type="file" name="linkimage" id="link-image" class="add-link-form"></div>
<div class="alink-field"><input type="button" name="submit" value="Submit Link" class="add-link-form" id="add-link-submit"></div>
<div class="alink-field"><input type="reset" name="reset" value="Clear" class="add-link-form" id="reset"></div>
</div>
</form>
</div>
CSS:
.add-link-box{border: 2px #006BB5 solid; color: #006BB5; font-family: bonvenocf; text-align: center; font-size: 16pt; margin: 10px; height: 90%; margin-top: 30px; overflow: auto; -webkit-overflow-scrolling: touch;}
.mobile-form-frame{overflow: auto; height: 90%;}
.add-link-box-close-button{position: absolute; display: block; right: 5px; top: 5px; width: 20px; height: 20px; padding: 2px; line-height: 18px; font-size: 18pt; text-align: center; cursor: pointer; font-weight: bold; color: #FF0000;}
.add-link-box-close-button:hover{color: #FF0000;}
.alink-field{width: 90%; margin: 0px; display: block; padding: 10px; margin-left: auto; margin-right: auto; text-align: center;}
.mobile-alink{text-align: left;}
Here is the problem:
When adding -webkit-overflow-scrolling: touch; to the mobile-form-frame class (in order to achieve native scrolling on iOS devices), the "X" to close this div is hidden. If we remove the -webkit-overflow-scrolling: touch;, it does not. I've done some searching and can't really find anyone else that has seen this same problem. I don't understand why this would cause the absolute-positioned div add-link-box-close-button to be obscured from view. Can anyone please help me figure this out? Is it actually a bug in Safari on iOS?
I've included screenshots to demonstrate the result I am experiencing.
EDIT: Above html is wrapped in container div with position: fixed;
use this css
.add-link-box {
position: relative;
}
Not an expert just a thought, what if you move the 'X' z-index? Have you tried that?
Maybe the X is displayed but not on the foreground. Just a thought
Related
This may seem like a simple question and may have a simple solution but I was wondering how I can get two text elements (from a button) start at the space spot on the x-axis (they are two different divs). I am referring to the button's text in the image below.
How can I get both the text "Dashboard" and "A new button" to start at the same position on the x axis?
* {
margin: 0;
padding: 0;
}
body {
background-color: #ced4da;
font-family: sans-serif;
}
.wrapper {
height: 100vh;
}
input[type="button"] {
border: none;
background-color: Transparent;
outline: none;
height: 20px;
width: 92%;
font-size: 13px;
font-weight: regular;
color: white;
}
.side-bar {
display: flex;
flex-direction: column;
width: 17%;
height: 100%;
background-color: #272C32;
}
.sub-title {
margin-top: 10%;
margin-left: 7.5%;
}
.sub-title h3 {
color: #B9B9B9;
font-size: 13px;
font-weight: lighter;
}
.splitter {
display: flex;
align-self: center;
width: 85%;
height: 0.5px;
background-color: grey;
margin-top: 12px;
margin-bottom: 4%;
}
.button {
position: relative;
margin-left: 7.5%;
margin-bottom: 3%;
}
.button form i {
color: white;
font-size: 14px;
transition: 0.3s;
position: absolute;
left: 0px;
top: 0px;
padding: 5px 0px;
}
.button input:hover+i {
color: dodgerblue;
}
<div class="wrapper">
<div class="side-bar">
<div class="sub-title">
<h3>ADMIN TOOLS<h3>
</div>
<div class="splitter"></div>
<div class="button">
<form>
<input type="button" value="Dashboard" onclick="window.location.href='http://www.google.com'"/>
<i class="fas fa-tachometer-alt fa-lg" aria-hidden="true"></i>
</form>
</div>
<div class="button">
<form>
<input type="button" value="A new button" onclick="window.location.href='http://www.google.com'"/>
<i class="fas fa-hand-paper fa-lg" aria-hidden="true"></i>
</form>
</div>
</div>
<div class="nav-bar"></div>
</div>
And if you have time, how does my CSS code look? I am still learning and would like some feedback too if you don't mind :) Thanks!
All you have to do is put a <div> element around your <form> element s, then set its position to wherever you want it, and its text-align: left;. BTW your CSS looks excellent, just keep in mind that some things can be simplified, e.g.
{margin: 0; padding: 0;}
This is very good, but * is the same as body, even though it's documented differently. * applies to all the content, but content is only displayed if it's in the <body> element.
Very good looking however, keep it up!
P.S. I'd vote you up if I could, but I'm out of votes - I'll do it tomorrow
I'm having a problem with the floating property.
My code: JSFiddle
I want it to look this way: printscreen
What can I do, I want the button to NOT float like the other two elements above the button.
My css: (You can see my HTML on JSFiddle)
#upload_photo_form > p {
margin: 3px;
}
#upload_one {
width: 150px;
height: 60px;
background-image: url('image, doesnt matter, looke the same anyways');
background-size: 100%;
float: left;
border: 1px solid grey;
border-radius: 3px;
}
#upload_two {
margin-left: 5px;
width: 150px;
height: 60px;
background-image: url('image, doesnt matter, looke the same anyways');
border: 1px solid grey;
border-radius: 3px;
background-size: 100%;
float: left;
}
You cam modify your code as follows:
<div id="upload_photo_form">
<div>
<p>Please choose a file to upload.</p>
<input id="upload_file" type="file" /><br>
</div>
<div>
<p>Which mode would you like to use?</p>
<div id="upload_one"></div>
<div id="upload_two"></div>
</div>
</div>
<div style="clear:both;"></div>
<button id="upload_button">Upload</button>
Try this:
#upload_button{
margin-top:10px;
clear: both;
}
DEMO
You can also use:
display: block;
Try this if you want to do this just with CSS:
#upload_photo_form div {overflow: hidden}
#upload_button {clear: both; margin-top: 10px;}
I have the Following Radio buttons in my jQuery mobile app , I need to style them as the Radio button in the image bellow . I have tried the following css but it didn't give me the same result , Please Help me ..
Html
<div data-role="page">
<div data-role="header" data-theme="b" style="height:63px;">
</div>
<div data-role="content">
<form>
<fieldset>
<input type="radio" id="Male" value=" Male" name="radio-group-1" />
<label for="Male" data-inline="true" style="background:transparent !important;">Male </label>
<input type="radio" id="Female" value=" Female" name="radio-group-1" />
<label for="Female" data-inline="true" style="background:transparent !important;" >Female </label>
</fieldset>
</form>
</div>
</div>
CSS
input[type="radio"] {
display: none;
}
.ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after{
width: 25px;
height: 25px;
}
.ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after{
margin-top: -18px;
margin-left: -38px;
}
.ui-btn.ui-radio-on:after{
width: 55px;
height: 55px;
background: green !important;
background-size:100px 24px;
}
This is what i get
To get a green inner circle with transparent around it and a border after that, you really need 2 circles. This could be achieved by adding a :before element as well as the :after element in CSS.
Here is a DEMO
The CSS makes the whole button 56px tall and vertically centers the text by making the line-height the same. When off, the radio image is 26x26 with a gray border. When on, the :before css adds a new 26x26 empty circle with a border while the :after css creates a smaller green circle in the center. NOTE: you may need to tweak sizes and margins to get your desired results.
input[type="radio"] {
display: none;
}
.ui-radio label {
height:56px;
line-height: 56px;
padding-left: 50px;
}
.ui-radio .ui-btn.ui-radio-off:after {
background-image: none;
width: 26px;
height: 26px;
border: 2px solid #6E7983;
margin-top: -13px;
}
.ui-radio .ui-btn.ui-radio-on:after {
background-color: #86D51C;
width: 14px;
height: 14px;
margin-top: -6px;
margin-left: 10px;
border: 0;
}
.ui-radio .ui-btn.ui-radio-on:before {
content:"";
position: absolute;
display: block;
border: 2px solid #6E7983;
border-radius: 50%;
background-color: transparent;
width: 26px;
height: 26px;
margin-top: 14px;
margin-left: -39px;
}
First question ever, I started working on CSS about a month ago due to a job I got, but it seems I have encountered some problems I can't fix (mainly due to my inexperience and that it's someone else's CSS)
I won't beat around the bush so much and explain the problem before showing the code. There are a set of Div's in a form-like setting, but when the text get's too crowded it invades the next Div so, fixing it via CSS and not HTML, any fix on this? From the very problem I can imagine it's something so easy it's silly, but well, yeah.
Edit: I kinda of forgot to mention that part, I don't want them to be hidden, I want each div to automatically allow for the "previous" one to finish it's concent without overlapping (Tried with overflow: Auto but it gave them scrollbars, to all the forms in the whole site.
Here's a pic of how it looks at the moment, I'm sure you will see the problem right away
http://imgur.com/aj8pDaO
Here's the relevant HTML
<html>
<head>
<link href="hue.css" rel="stylesheet">
</head>
<body>
<div class="content">
<div class="column">
<div class="form">
<div class="form-nivel">
<label for="cfdiCreate:organizationRfc">RFC</label><label id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>
<div class="form-nivel">
<label for="cfdiCreate:organizationTaxSystem">Regimen fiscal</label><label id="cfdiCreate:organizationTaxSystem">Sueldos y salarios</label>
</div>
<div class="form-nivel">
<label for="cfdiCreate:organizationTaxAddress">Domicilio fiscal</label><label id="cfdiCreate:organizationTaxAddress">XXXXXX Colonia Tecnológico Monterrey,Nuevo León,México.C.P.XXXXXX</label>
</div>
<div class="form-nivel">
<label for="cfdiCreate:organizationExpeditionPlace">Lugar de expedición</label><label id="cfdiCreate:organizationExpeditionPlace">Suc.1 Chiapas,México. </label>
</div>
</div>
</div>
<div class="column secondary">
<!--?xml version="1.0" encoding="UTF-8"?-->
</div>
</body>
</html>
And here's the CSS
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align: center;
}
p {
text-align: left;
}
.content {
display: block;
width: 100%;
height: auto;
margin-bottom: 10px;
float: left;
background: #;
text-align: left;
}
.content label, .content p {
font-size: 16px;
color: #024DA1;
padding-left: 2%;
}
.column {
display: block;
float: left;
width: 48%;
margin-top: 15px;
height: auto;
background:;
}
.secondary {
margin-left: 10px;
}
.clearfix {
clear: both;
margin-bottom: 10px;
}
.form {
display: block;
width: 96%;
height: auto;
background:;
}
.form-nivel {
display: block;
width: 100%;
width: 470px;
min-height: 20px;
margin-bottom: 20px;
position: relative;
}
.form-nivel label {
width: 160px;
float: left;
height: 20px;
line-height: 20px;
margin-right: 10px;
text-align: right;
}
Here. You are applying a CSS rule to all the labels. The overlapping happens because of this rule.
float: left;
To fix this, remove the .form-nivel label rule and add these.
.form-nivel label:nth-child(1) {
width: 160px;
float: left;
height: 20px;
line-height: 20px;
margin-right: 10px;
text-align: right;
}
.form-nivel label:nth-child(2) {
width: 160px;
height: 20px;
line-height: 20px;
margin-right: 10px;
text-align: right;
}
you can use overflow:hidden to hide the content if it overflows into the next one
The CSS logic for the left labels and the right labels are the same.
First thing you should do is set them apart.
<div class="form-nivel">
<label class="leftLabel" for="cfdiCreate:organizationRfc">RFC</label>
<label class="rightLabel" id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>
Notice the added class
Then on your css you would do something like this:
.form-nivel label.leftLabel {
width: 160px;
float: left;
height: 20px;
line-height: 20px;
margin-right: 10px;
text-align: right;
}
.form-nivel label.rightLabel {
width: 400px;
float: left;
height: 20px;
line-height: 20px;
margin-right: 10px;
text-align: left;
}
I made the right labels bigger and aligned them to the left.
Also, you should add:
<meta charset="utf-8">
on the html head. This is to be able to display characters with accents.
Why not simply keep your <label/>s inline? Removing all the unneccessary declarations...
.form-nivel label {
margin-right: 10px;
line-height: 20px;
}
Try adding:
<div class="clearfix"></div>
between each row.
<div class="form-nivel">
<label for="cfdiCreate:organizationRfc">RFC</label>
<label id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>
<div class="clearfix"></div>
<div class="form-nivel">
<label for="cfdiCreate:organizationTaxSystem">Regimen fiscal</label>
<label id="cfdiCreate:organizationTaxSystem">Sueldos y salarios</label>
</div>
I want to align the text in my div ('what' and 'where') but now that I have the text a the bottom it has pushed the divs (search-field1 and searchfield2) further down the page!
How can I have it so the text doesnt affect this? Is it something to do with the cellpadding/spacing?
Sorry im not the best at CSS I'm teaching myself it.
HTML:
<center>
<div class="what"><p>what?</div>
<div class="where">where?</div>
<div>
</center>
<center>
<div class="search-field1">
</div>
<div class="search-field2">
</div>
</center>
CSS:
.what{
display: inline;
font: 16px HelveticaNeue-Light;
color: #A9E2F3;
font-weight: bold;
height: 35px;
width: 320px;
background: #151515;
display: inline-block;
vertical-align: center;
}
.where{
display: inline;
font: 16px HelveticaNeue-Light;
color: #A9E2F3;
font-weight: bold;
height: 35px;
width: 320px;
background: #ffffff;
display: inline-block;
verticle-align: center;
}
.search-field1{
height: 35px;
width: 320px;
background: #ffffff;
border:1px solid;
border-color: #BDBDBD;
display: inline-block;
verticle-align: center;
}
.search-field2{
height: 35px;
width: 320px;
background: #ffffff;
border:1px solid;
border-color: #BDBDBD;
display: inline-block;
horizontal-align: center;
}
Thanks!
James
James is this what you are looking for? http://jsfiddle.net/jkeyes/WFPK2/
Set the line-height for your containers (in this case .what and .where to be the same as the height:
line-height: 35px;
sounds like you need float:left on your center tags
Html:
<div class="center">
<div class="what">what?</div>
<div class="where">where?</div>
</div>
<div class="center">
<div class="search-field1"></div>
<div class="search-field2"></div>
</div>
CSS:
If you use float:left on the enclosing div's it will allow the two center div's to float side by side.
.center {
float:left;
}
Another option would be to set your line height to zero on the hidden div like so:
line-height: 0px;
Then add padding to the surrounding divs. Like so:
padding-top: 10px;
Hope that helps someone.