in my test page, I am using Screenfly to check resolution, and it seems my "social login" and my "province selector" are scrolling, despite having overflow: hidden and position: relative. for the loginText class (social media) it's being called from some other document that I do not have access to.
my testing page: Screenfly Test
Html:
<div class="hideFrench">Français</div>
<div class="styled-select">
<select id="provinceSelect">
<option>Please select a province</option>
<option value="alberta">Alberta</option>
<option value="bc">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NF">Newfoundland and Labrador</option>
<option value="Ns">Nova Scotia</option>
<option value="Nunavut">Nunavut</option>
<option value="ON" selected="selected">Ontario</option>
<option value="PEI">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
</select>
</div>
<div class="loginText" >
<a class="janrainEngage loginHref" href="#">Or login with
<span class="janrain-provider-icon-16 janrain-provider-icon-facebook"></span>
<span class="janrain-provider-icon-16 janrain-provider-icon-linkedin"></span>
<span class="janrain-provider-icon-16 janrain-provider-icon-twitter"></span>
</a>
</div>
CSS:
.loginText{
position: relative !important;
left: 600px;
top: -125px;
overflow: hidden;
}
.styled-select {
width: 185px;
position: relative;
left: 933px;
top: 40px;
background: rgba(0, 0, 0, 0) url("http://convio.cancer.ca/mResponsive/images/icons/dropdown_blue_icon.png") no-repeat scroll right center;
border: 1px solid #e9e9e9;
overflow: hidden;
}
.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 13px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
.hideFrench {
position: relative;
top: 70px;
left: 875px;
border: 2px
}
#media screen and (max-width: 768px){
.styled-select, .hideFrench{
display: none;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
}
It originally was working properly for the last few days, but since then I've made a lot of changes, and now I have no clue what's causing it to stay fixed and where that big white gap is coming from between the login and the province selector.
Any help is greatly appreciated, thank you for your time!
.loginText {
position: absolute;
top: 60px;
right: 18px;
overflow: hidden;
}
Related
Inside the spacing-container div, I'm setting an image to appear to the right-hand side of the options, the image is a line spacer icon. However, when I set this icon it's just a big black mark. I've tried resizing it but not got very far with it. The icons which I'm using in the two other divs are working, which display a drop-down icon.
Further, I was hoping to store the icons locally, but when I set the icons they do not come through when I set the background to find the images locally. My file structure is as follows:
CSS
--> CssImages
--> -- down-chevron.png
--> -- line-spacing.png
main.css
and I was importing them in this format in my css file.
background: transparent url("CSS/CssImages/down-cheron.png")
Unfortunately this didn't seem to work, however, upon inspecting in developer tools the images were being pulled through to the local host.
My HTML is here:
<div class="tool-bar">
<div class="options-container">
<select>
<option value = "times-new-roman">Times New Roman</option>
<option value = "arial">Arial</option>
<option value = "courier-new">Courier New</option>
<option value = "verdana">Verdana</option>
</select>
</div>
<div class="options-container font-container">
<select>
<option value = "8">8</option>
<option value = "10">10</option>
<option value = "12">12</option>
<option value = "14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
</select>
</div>
<div class="options-container spacing-container">
<select>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2.0">2.0</option>
</select>
</div>
</div>
My Css snippet is here:
.tool-bar {
width: 100%;
height: 100%;
background-color: #a19f9f;
float: left;
display: inline;
}
.options-container {
padding: 10px;
width: 20%;
border-left: 3px solid #aaaaaa;
background-color: #ffffff;
float:left; display:inline;
}
.font-container {
width: 5%;
}
.spacing-container{
width: 6%;
}
.options-container select {
width: 100%;
font-size: 20px;
border: 0;
line-height: 1;
height: 34px;
outline: none;
background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat center;
display: block;
margin-right: 5px;
-webkit-appearance: none;
background-position-x: 215px;
}
.font-container select {
background-position-x: 20px;
}
.spacing-container select {
background: url("https://image.flaticon.com/icons/svg/1827/1827633.svg") 0 0;
background-position-x: 0;
}
I appreciate your time and your advice with the matter.
Thank you,
The icon you are using is too big, that's why it is not visible. So, you have to use background-size property.
.tool-bar {
width: 100%;
height: 100%;
background-color: #a19f9f;
float: left;
display: inline;
}
.options-container {
padding: 10px;
width: 30%;
border-left: 3px solid #aaaaaa;
background-color: #ffffff;
float:left; display:inline;
}
.font-container {
width: 10%;
}
.spacing-container{
width: 10%;
}
.options-container select {
width: 100%;
font-size: 20px;
border: 0;
line-height: 1;
height: 34px;
outline: none;
background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat center right;
display: block;
margin-right: 5px;
-webkit-appearance: none;
}
.font-container select {
background-position-x: 100%;
}
.spacing-container select {
background: url("https://image.flaticon.com/icons/svg/1827/1827633.svg") no-repeat center;
background-position-x: 100%;
background-size: 20px;
}
<div class="tool-bar">
<div class="options-container">
<select>
<option value = "times-new-roman">Times New Roman</option>
<option value = "arial">Arial</option>
<option value = "courier-new">Courier New</option>
<option value = "verdana">Verdana</option>
</select>
</div>
<div class="options-container font-container">
<select>
<option value = "8">8</option>
<option value = "10">10</option>
<option value = "12">12</option>
<option value = "14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
</select>
</div>
<div class="options-container spacing-container">
<select>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2.0">2.0</option>
</select>
</div>
</div>
I'm trying to put my own caret icon at the right most end of the maindiv for this custom dropdown. How can I achieve this?
.maindiv{
width: 200px;
height: 40px;
overflow: hidden;
border: 1px solid black;
border-radius: 3px;
}
.maindiv select{
width: 240px;
height: 40px;
border: none;
}
<div class="maindiv">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
<!-- i want to put my own caret icon here -->
</div>
You need to use pseudo css :after to .maindiv and set .maindiv to position: relative
.maindiv{
width: 200px;
height: 40px;
overflow: hidden;
border: 1px solid black;
border-radius: 3px;
position: relative; // Added
}
.maindiv select{
-webkit-appearance: none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
width: 100%;
height: 40px;
border: none;
}
.maindiv:after {
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #007bff transparent transparent transparent;
position: absolute;
right: 10px;
content: "";
top: 18px;
pointer-event: none;
}
<div class="maindiv">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
<!-- i want to put my own caret icon here -->
</div>
/*create a parent div with position relative*/
.maindiv .select,
.maindiv .select-font{
width: 240px;
height: 40px;
border: none;
position: relative;
overflow: hidden;
border-radius: 3px;
border: 1px solid #000;
margin: 0 0 15px;
background: #eee;
}
/*style your select tag */
select {
width: 100%;
height: 100%;
border: 0px;
padding: 0 10px;
position: relative;
z-index: 2;
cursor: pointer;
background:transparent;
}
/* Then Remove Browser Default caret or dropdown sign*/
select {
/*for firefox*/
-moz-appearance: none;
/*for chrome*/
-webkit-appearance: none;
}
/*for IE10*/
select::-ms-expand {
display: none;
}
/*Put the icon in before or after and style it*/
/* 1.Create caret sign with css */
.select::after {
content: "";
position: absolute;
right: 10px;
display: inline-block;
z-index: 1;
top: 50%;
transform: translateY(-50%);
}
.select.caret::after {
border-top: 5px solid #000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.select.angle::after {
border: solid #000;
border-width: 0 2px 2px 0;
padding: 2px;
transform: translateY(-50%) rotate(45deg);
}
/* 1. Put Font as a caret sign advisable as ou can control it as a font */
.select-font::after {
content: "";
position: absolute;
right: 10px;
display: inline-block;
z-index: 1;
top: 50%;
transform: translateY(-50%);
font-family: fontawesome;
font-size: 17px;
color: #000;
}
.select-font.caret::after {
content: "\f0d7";
}
.select-font.angle::after {
content: "\f107";
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="maindiv">
<h2>1. Create caret with css</h2>
<div class="select caret">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
</div>
<div class="select angle">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
</div>
<h2>2. Use Font awesome Libraray or Any other font Library Just include the style file in header</h2>
<div class="select-font caret">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
</div>
<div class="select-font angle">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
</div>
</div>
there is a default icon ,the problem is the width of your select tag is higher than the width of main div
You can do something like this:
.maindiv {
width: 200px;
height: 40px;
overflow: hidden;
border: 1px solid black;
border-radius: 3px;
position: relative;
}
.maindiv span {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: .8em;
}
.maindiv select {
width: 240px;
height: 40px;
border: none;
}
<div class="maindiv">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
<span>▼</span>
</div>
Just added display: flex; to maindiv
.maindiv{
width: 200px;
height: 40px;
overflow: hidden;
border: 1px solid black;
border-radius: 3px;
display: flex;
}
.maindiv select{
width: 240px;
height: 40px;
border: none;
}
<div class="maindiv">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
<!-- i want to put my own caret icon here -->
</div>
I got a question regarding browser zoom and my select box. I have created a custom select box with the current HTML and CSS code (JSFIDDLE):
.custom-select {
position: relative;
width: 100px;
display: inline-block;
}
.custom-select select {
width: 100%;
padding: 8px 5px 8px 10px;
height: 36px;
border: 1px solid #cacaca;
color: #0085c8;
}
.custom-select.svg > svg.dropdown-button {
position: absolute;
top: 0;
right: 0;
width: 34px;
height: 34px;
background-color: #fff;
background-image: url(https://cdn0.iconfinder.com/data/icons/solid-line-essential-ui-icon-set/512/essential_set_down-16.png);
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
border: 1px solid #cacaca;
color: #0085c8;
display: inline-block;
}
<div class="custom-select svg">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="Volkswagon Polo">Volkswagon Polo</option>
</select>
<svg class="dropdown-button"></svg>
</div>
Whenever you scale down your browser to for example 75% I get the following situation:
Where the word POLO is cutoff. What am I doing wrong? This should not be zooming sensitive right? Can you set CSS styling to specific zoom levels?
--EDIT
Increasing the width is not an option due to the fact that the select is been placed inside a div with a maximum width of 150px
You can try with giving auto width to your custom select box.
.custom-select
{
position: relative;
width:100px;
display:inline-block;
overflow:hidden
}
.custom-select select{
width:auto;
padding: 8px 5px 8px 10px;
height:36px;
border: 1px solid #cacaca;
color: #0085c8;
}
.custom-select.svg > svg.dropdown-button
{
position: absolute;
top: 0;
right: 0;
width: 34px;
height: 34px;
background-color: #fff;
background-image: url(https://cdn0.iconfinder.com/data/icons/solid-line-essential-ui-icon-set/512/essential_set_down-16.png);
background-repeat:no-repeat;
background-position:center;
pointer-events: none;
border: 1px solid #cacaca;
color: #0085c8;
display:inline-block;
}
<div class="custom-select svg">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="Volkswagon Polo">Volkswagon Polo</option>
</select>
<svg class="dropdown-button"></svg>
</div>
This is my question about the dropdown menu which open behind the div.
Here is my HTML code:
<div style="position:relative; left:0px; top:0px;">
<div style="background-color: white; width: 100%;">
<div class="styled-select">
<select id="campaignListId" name="campaignId" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;" style="z-index:99999">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
<option value="5">Fifth</option>
<option value="6">Sixth</option>
<option value="7">Seventh</option>
<option value="8">Eighth</option>
<option value="9">Ninth</option>
<option value="10">Tenth</option>
</select>
</div>
<div style="background-color: grey; width: 100%; height:400px; left: 0px; ">
<div style="width: 944px; margin: 0 auto; ">
<font style="font-size: 22px; font-weight: bold; ">
<span id="spanMOV" style="cursor: pointer; color: #4F9DD0; text-decoration: underline; " >
Movies
</span>
<span id="spanGAM" style="cursor: pointer;" >
Games
</span>
<span id="spanRES" style="cursor: pointer;" >
Restaurant
</span>
</div>
</div>
</div>
</div>
And this is my CSS code:
<style type="text/css">
.styled-select select {
position: absolute;
background: transparent;
width: 944px;
padding: 5px;
font-size: 32px;
font-weight: bold;
font-family: 'PT Sans', sans-serif;
color: #4F9DD0;
line-height: 1;
border: 0;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
}
.styled-select {
overflow: hidden;
background: url(resources/img/campaignSelector.png) no-repeat right #ddd;
background-color: white;
width: 944px;
height: 48px;
position: relative;
margin: 0 auto;
}
The problem is that, whenever I click on the select dropdown, it opens behind the <div> after that. I had tried z-index but it did not work.
Remove the overflow: hidden; from .styled-select and it shows up infront of it. If you want it to have a white background then, you need to change background: transparent on .styled-select select to background: white.
Try after removing position:relative.
.styled-select {
overflow: hidden;
background: url(resources/img/campaignSelector.png) no-repeat right #ddd;
background-color: white;
width: 944px;
height: 48px;
/*position: relative; */
margin: 0 auto;
}
OR
.styled-select {
/*overflow: hidden;*/
background: url(resources/img/campaignSelector.png) no-repeat right #ddd;
background-color: white;
width: 944px;
height: 48px;
position: relative;
margin: 0 auto;
}
Its works for me.
I am developing a Chrome extension.
Sometimes when I'm clicking on the extension icon, divs are making like a "ladder":
I want it to be like this:
How can I ensure the currency fields are aligned properly?
Here is my markup:
<div class="calc">
<div class="in">
<img id="cur-img-in" src="img/AMD.gif"/>
<select name="currency-calc-cur" id="in-select">
<option selected="selected" value="AMD">AMD</option>
<option value="EUR">EUR</option>
<option value="RUR">RUR</option>
<option value="USD">USD</option>
</select>
<input type="text" id="in"/>
</div>
<img id='swap-cur' src="img/swap.png" alt="Swap"/>
<div class="out">
<img id="cur-img-out" src="img/USD.gif"/>
<select name="currency-calc-cur" id="out-select">
<option value="AMD">AMD</option>
<option value="EUR">EUR</option>
<option value="RUR">RUR</option>
<option selected="selected" value="USD">USD</option>
</select>
<input type="text" id="out"/>
</div>
</div>
And style:
.calc {
margin-top: 10px;
margin-left: 20%;
width: 60%;
}
.calc input[type="text"] {
width: 100%;
}
.calc #bank-list {
width: 100%;
}
.calc [name="currency-calc-cur"] {
width: 78%;
}
.calc .in {
width: 40%;
position: relative;
float: left;
}
.calc .out {
width: 40%;
position: relative;
float: right;
}
.calc #swap-cur {
margin: 17px 0 0 16px;
}
And my sources from GitHub if something is missing.
Your image likely needs to be floated as well.
.calc #swap-cur {
float: left;
margin: 17px 0 0 16px;
}