How to set inner element border upon the outer one? - javascript

Here is my code:
.compare_header_box{
padding: 35px 30px;
direction: rtl;
}
.compare_header_box_title{
font-size: 30px;
width: 100px;
float: right;
margin-right: 5px;
margin-top: 4px;
}
.compare_header_box_items{
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.compare_header_box_items a{
display: inline-block;
font-size: 16px;
padding: 15px 40px;
}
.compare_header_box_items a:hover{
text-decoration: none;
background-color: #f1f1f1;
color: black;
}
.compare_header_box_items .active{
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid white;
}
<div class="compare_header_box">
<span class="compare_header_box_title active">List</span>
<div class="compare_header_box_items">
gp
in
tw
<a class="active" href="./fb">fb</a>
</div>
</div>
As you see border-bottom: 1px solid white; doesn't seem to appear. I want to set it exactly upon the border-bottom: 1px solid #ccc;. How can I do that?

Make use of pseudo elements,
.compare_header_box_items .active {
position: relative;
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.compare_header_box_items .active:after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #fff;
bottom: -1px;
left: 0;
}
I hope this is what you require
.compare_header_box {
padding: 35px 30px;
direction: rtl;
}
.compare_header_box_title {
font-size: 30px;
width: 100px;
float: right;
margin-right: 5px;
margin-top: 4px;
}
.compare_header_box_items {
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.compare_header_box_items a {
display: inline-block;
font-size: 16px;
padding: 15px 40px;
}
.compare_header_box_items a:hover {
text-decoration: none;
background-color: #f1f1f1;
color: black;
}
.compare_header_box_items .active {
position: relative;
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.compare_header_box_items .active:after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #fff;
bottom: -1px;
left: 0;
}
<div class="compare_header_box">
<span class="compare_header_box_title active">List</span>
<div class="compare_header_box_items">
gp
in
tw
<a class="active" href="./fb">fb</a>
</div>
</div>

Add margin-bottom: -1px to a tags in .compare_header_box_items div
Thus code will become:
.compare_header_box_items a {
display: inline-block;
font-size: 16px;
padding: 15px 40px;
margin: 0 0 -1px; /* add this line */
}
The reason your code not working is, main div border begin when inner links area ends which includes their borders too. Thus adding a 1 pixel negative margin will make them two borders overlap.

As a hot fix, just add: margin-bottom: -1px;
check below code snippet.
.compare_header_box{
padding: 35px 30px;
direction: rtl;
}
.compare_header_box_title{
font-size: 30px;
width: 100px;
float: right;
margin-right: 5px;
margin-top: 4px;
}
.compare_header_box_items{
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.compare_header_box_items a{
display: inline-block;
font-size: 16px;
padding: 15px 40px;
}
.compare_header_box_items a:hover{
text-decoration: none;
background-color: #f1f1f1;
color: black;
}
.compare_header_box_items .active{
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
<div class="compare_header_box">
<span class="compare_header_box_title active">List</span>
<div class="compare_header_box_items">
gp
in
tw
<a class="active" href="./fb">fb</a>
</div>
</div>

Use box-shadow instead of border, which allows you to avoid shifting the positions of elements:
box-shadow: 0 1px white;
(Note that I have substituted red for emphasis in the snippet below.)
.compare_header_box {
padding: 35px 30px;
direction: rtl;
}
.compare_header_box_title {
font-size: 30px;
width: 100px;
float: right;
margin-right: 5px;
margin-top: 4px;
}
.compare_header_box_items {
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.compare_header_box_items a {
display: inline-block;
font-size: 16px;
padding: 15px 40px;
}
.compare_header_box_items a:hover {
text-decoration: none;
background-color: #f1f1f1;
color: black;
}
.compare_header_box_items .active {
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
box-shadow: 0 1px red; /* white; */
}
<div class="compare_header_box">
<span class="compare_header_box_title active">List</span>
<div class="compare_header_box_items">
gp
in
tw
<a class="active" href="./fb">fb</a>
</div>
</div>

Hyy
Only this things is possible and your problem will solve...
.compare_header_box_items .active {
position: relative;
bottom: -1px;
}
Add this css and your problem will solve.
Thanks :)
Appreciate my answer.

The white border seems to appear bro. But the background is also white. Change the background and you will see the white background or as part of your code you can just hover over it and check the border. To the result part, there are so many answers above. This answer is only to say that the border is visible and element next to it appears.
Even SOF uses padding to fix it. If you remove, you will see border-bottom #CCC
background.

Related

Is it possible to display respective country flag to out side of the select function. Or Can we display country flag on the both place

function onChangeCallback(ctr) {
console.log("The country was changed: " + ctr);
//$("#selectionSpan").text(ctr);
}
$(document).ready(function() {
$(".niceCountryInputSelector").each(function(i, e) {
new NiceCountryInput(e).init();
});
});
.container {
margin: 80px auto !important;
padding: 15px;
}
.bg-box1 {
background-color: #E8E8E8;
padding: 30px;
/* width: 460px;*/
width: 700px;
box-shadow: 3px 3px 5px #808080;
border-radius: 6px;
}
.bg-box {
box-shadow: 1px 1px 3px #484848;
border-radius: 6px;
}
select {
border-radius: 6px;
}
.search {
src: url(img/search.png);
}
.niceCountryInputMenu {
background: white !important;
color: black !important;
border: 1px solid #a8a8a8;
cursor: pointer;
border-radius: 4px;
box-shadow: 1px 1px 3px #808080
/*
font-family: Arial;
font-size: 12px;
*/
}
.niceCountryInputMenuDefaultText {
width: 270px;
padding: 6px;
margin: 6px 0px 0px 15px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.1rem;
}
.niceCountryInputMenuDefaultText a:hover {
text-decoration: none;
}
.niceCountryInputMenu a {
color: #787878 !important;
}
.niceCountryInputMenuDropdown {
/*border-left: 1px solid #a8a8a8;*/
height: 30px;
width: 25px;
float: right;
line-height: 30px;
padding: 8px;
text-align: center;
position: relative;
right: 0;
color: #484848;
}
.niceCountryInputMenuDropdownContent {
border: 1px solid #a8a8a8;
background-color: #fff;
font-size: 1.1rem;
border-top: 0;
max-height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
.niceCountryInputMenuDropdownContent a {
height: 40px;
line-height: 40px;
display: block;
width: 100%;
color: #787878 !important;
overflow: hidden;
text-decoration: none;
border: 1px solid #F5F5F5;
/*
font-family: Arial;
font-size: 12px;
*/
}
.niceCountryInputMenuDropdownContent a:hover {
background-color: #63a2d7 !important;
color: white !important;
text-decoration: none;
}
.niceCountryInputMenuFilter {
border: 1px solid #a8a8a8;
border-top: -10;
border-bottom: 0;
}
.niceCountryInputMenuFilter input {
width: 100%;
width: calc(100% - 10px);
margin: 5px;
padding: 10px;
border: 1px solid #ccc;
outline: none;
border-radius: 6px;
font-size: 1.1rem;
color: #808080;
}
.niceCountryInputMenuCountryFlag {
border: 1px solid #d3d3d3;
width: 23px;
height: 18px;
margin-left: 5px;
margin-right: 5px;
}
.niceCountryInputMenuCountryNoFlag {
display: inline-block;
border: 1px solid black;
background: white;
color: black;
line-height: 15px;
text-align: center;
width: 22px;
margin-left: 5px;
margin-right: 5px;
font-size: 13px;
}
<script src="https://manishasecurity.in/creative-js/niceCountryInput.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h3>Select a Country:</h3>
<div class="bg-box1">
<div class="row">
<div class="col-4">
<div style="background-color: #fff; width: 160px; height: 50px;margin-top: 0px; padding: 4px; border-radius: 6px;font-size: 12px;" data-showflags="true" class=""></div>
</div>
<div class="col-8">
<div class="niceCountryInputSelector bg-box" style="width: 400px;" data-selectedcountry="ad" data-showspecial="false" data-showflags="true" data-i18nall="All selected" data-i18nnofilter="No selection" data-i18nfilter="Search Country..." data-onchangecallback="onChangeCallback" />
</div>
</div>
</div>
</div>
Hi,
I have made the country flag dropdown list.
In the dropdown list, whether it is scroll by mouse or search country name in the search box, the country will be autocompleted and it will be displayed in the input field with the country name and flag.
The dropdown function working properly.
Requirement:-
Without removing its Name and flag from the dropdown section, Can we display Country Flag outside of the dropdown section?. I am trying for that but I am not able to do that.
I hope someone can understand and help me out in this situation.
Thanks Lots
I modified the function onChangeCallback to place the flag to the other div.
function onChangeCallback(ctr) {
let flag=$(".niceCountryInputSelector").find("[data-flagiso='"+ctr+"']")[0];
flag=$(flag).clone();
$(".col-4").children("div:first-child").empty();
$(".col-4").children("div:first-child").append(flag);
}
So, you can append the flagObjElement to where you want to append.

height and width not working with javascript [duplicate]

This question already has answers here:
Setting the width of inline elements
(7 answers)
Closed 2 years ago.
I'm implementing an expanding menu with 2 links, but for some reason when I expand the menu the height and width properties of my menu items are not working.
Here is my HTML:
function navigation() {
document.getElementById('expandingMenu').style.display = "block";}
#navbutton{
background-color: white;
border-left: 0px solid black;
border-top: 0px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
color: blue;
padding: 10px 40px;
}
.subMenu{
background-color: blue;
color: white;
text-decoration: none;
width: 120px;
height: 40px;
text-align: center;
margin-left: 12px;
margin-top: 5px;
}
.hide{
display: none;
}
<nav>
<button onclick="navigation()" id="navbutton">Navigation</button>
<div class="hide" id="expandingMenu" >
<a class="subMenu" href="">-Home -</a>
<a class="subMenu" href="">-Next -</a>
</div>
</nav>
By default a elements are display: inline; which ignores the width and height CSS properties. You can fix this by adding display: block; to your .subMenu class. Fixed working example:
function navigation() {
document.getElementById('expandingMenu').style.display = "block";
}
#navbutton {
background-color: white;
border-left: 0px solid black;
border-top: 0px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
color: blue;
padding: 10px 40px;
}
.subMenu {
background-color: blue;
color: white;
text-decoration: none;
width: 120px;
height: 40px;
text-align: center;
margin-left: 12px;
margin-top: 5px;
display: block;
}
.hide {
display: none;
}
<nav>
<button onclick="navigation()" id="navbutton">Navigation</button>
<div class="hide" id="expandingMenu" >
<a class="subMenu" href="">-Home -</a>
<a class="subMenu" href="">-Next -</a>
</div>
</nav>

up and down arrow onclick

I Have created HTML and css for a button where I need a up and down arrow toggle based on click. I am fine with the HTML and CSS however not so good with using jQuery for this. Could anyone start me off on this?
On click .js-custom-sleeve-option arrow should change up/down.
.js-custom-sleeve-option {
width: auto;
min-width: 3.8rem;
height: 3rem;
display: inline-block;
border: 1px solid #d1cac5;
background: #f7f7f7;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
text-align: center;
}
.js-arrow-down {
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #233354;
position: relative;
left: 7px;
}
.js-arrow-up {
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 6px solid #233354;
position: relative;
left: 6px;
bottom: 12px;
}
<div>
<a class="js-custom-sleeve-option">
<span class="js-arrow-down"></span>
</a>
</div>
this will be something like this.. ofcourse you have to modify it according your needs
$(function(){
$(".js-custom-sleeve-option").on('click' , function(){
this.find('span').removeClass('js-arrow-down').end().addClass('js-arrow-up');
});
});
you could do with toggleClass() of jquery function
$('.js-custom-sleeve-option').click(function(){
$(this).children('span').toggleClass('js-arrow-down js-arrow-up')
})
.js-custom-sleeve-option {
width: auto;
min-width: 3.8rem;
height: 3rem;
display: inline-block;
border: 1px solid #d1cac5;
background: #f7f7f7;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
text-align: center;
}
.js-arrow-down {
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #233354;
position: relative;
left: 7px;
}
.js-arrow-up {
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 6px solid #233354;
position: relative;
left: 6px;
bottom: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a class="js-custom-sleeve-option">
<span class="js-arrow-down"></span>
</a>
</div>

align toggled div directly below parent

Having a little trouble trying to get a toggled div to align directly below the parent. It seems to appear to the right and slightly over the top of the parent.
This will be for use on an editor toolbar, the the text editor stackoverflow and various forums use.
Unsure on the best and simplest way to solve it.
$(document).on('click', ".editor-dropdown", function() {
$('.editor-dropdown-content', this).toggle(); // p00f
});
.editor-dropdown {
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
float: left;
padding: 5px 14px;
}
.editor-dropdown-content {
display: none;
z-index: 900;
position: absolute;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor-dropdown">
Header
<b class="caret-down"></b>
<div class="editor-dropdown-content">
<span class="dropdown-option" data-tag="h1">H1</span> H2 H3 H4
</div>
</div>
Example: https://codepen.io/anon/pen/JNQZzM
Set the parent to position: relative then use top/left positioning to put the menu where you want it. If you want everything to align better, I would make the "header" text an element and apply the border/padding/etc to it and style the menu the same way set to left: 0; top: 100%; to left-align it and put it below "header"
$(document).on('click', ".editor-dropdown", function()
{
$('.editor-dropdown-content', this).toggle(); // p00f
});
.editor-dropdown {
float: left;
position: relative;
}
.dropdown-header {
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
padding: 5px 14px;
display: inline-block;
}
.editor-dropdown-content {
display: none;
z-index: 900;
position: absolute;
background: #ffffff;
left: 0;
top: 100%;
border: 1px solid #ddd;
padding: 5px 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor-dropdown">
<span class="dropdown-header">Header</span>
<b class="caret-down"></b>
<div class="editor-dropdown-content">
<span class="dropdown-option" data-tag="h1">H1</span> H2 H3 H4
</div>
</div>
Please put "Header" text under span tag and give it a class like below:
<div class="editor-dropdown">
<span class="dropdoanHeader">Header</span>
<b class="caret-down"></b>
<div class="editor-dropdown-content">
<span class="dropdown-option" datatag="h1">H1</span>
H2
H3
H4
</div>
</div>
After that replace below css
.editor-dropdown
{
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
float: left;
}
.dropdoanHeader
{
padding: 5px 14px;
}
.editor-dropdown-content
{
position:absolute;
padding-left:10px;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
}
I edited the CSS like below
.editor-dropdown-content
{
display: none;
z-index: 900;
position:relative;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
left: 60;
bottom: 100;
}
Was able to align it below header . Check the codepen below
https://codepen.io/anon/pen/xdoJKp
Is this what you are after?
$(document).on('click', ".editor-dropdown", function()
{
$('.editor-dropdown-content').toggle(); // p00f
});
.editor-dropdown
{
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
padding: 5px 14px;
width: 200px;
}
.editor-dropdown-content
{
display: none;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor-dropdown">Header
<b class="caret-down"></b>
</div>
<div class="editor-dropdown-content">
<span class="dropdown-option" data-tag="h1">H1</span>
H2
H3
H4
</div>
You could try adding position: absolute; to the .editor-dropdown and then left: 0; to .editor-dropdown-content.
However, better is probably to take the .editor-dropdown-content out of the .editor-dropdown
https://codepen.io/anon/pen/dWBjpQ
Take a look at this one?
HTML:
<div class="editor-dropdown">
Header
<b class="caret-down"></b>
</div>
<div class="editor-dropdown-content">
<span class="dropdown-option" data-tag="h1">H1</span>
<span class="dropdown-option" data-tag="h1">H2</span>
<span class="dropdown-option" data-tag="h1">H3</span>
<span class="dropdown-option" data-tag="h1">H4</span>
</div>
Css:
.editor-dropdown
{
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
padding: 5px 14px;
}
.editor-dropdown-content
{
display: none;
z-index: 900;
top: 40px;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
}
.dropdown-option {
display:block;
}
Javascript:
$(document).on('click', ".editor-dropdown", function()
{
$('.editor-dropdown-content').toggle(); // p00f
});
https://codepen.io/anon/pen/ZKdjLJ

I can't figure out why my JQuery UI slide in menu is missing a few pixels

If you click the sort link you will notice there are a few pixels/border missing from the slide in while it's in action. Once it's complete, the pixels/border shows up. How can I get these pixels/border to show while its sliding in?
Please refer to this JS Fiddle: http://jsfiddle.net/R3FkZ/
HTML
<!DOCTYPE html>
<body>
<div id="SortContainer">
<div id="Sorts">
<div>Date</div>
<div>Views</div>
<div>Rating</div>
<div>Title</div>
<div>Random</div>
</div>
<div id="SortButton"><a id="SortLink" href="#">Sort</a></div>
</div>
</body>
</html>
CSS
#SortContainer {
width: auto;
height: 22px;
margin: 40px 0px 0px 0px;
overflow: hidden;
float: right;
}
#SortButton {
width: 55px;
height: 20px;
line-height: 20px;
padding: 0px 0px 0px 4px;
border-top: 1px solid #393939;
border-right: 1px solid #5A5A5A;
border-bottom: 1px solid #393939;
border-left: 1px solid #393939;
-webkit-border-bottom-left-radius: 5px;
-moz-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-top-left-radius: 5px;
border-top-left-radius: 5px;
background-color: #333333;
font-size: 12px;
font-weight: bold;
text-align: left;
float: right;
}
#SortButton > a {
text-decoration: none;
color: #CCCCCC;
}
#Sorts {
display: none;
height: 20px;
line-height: 20px;
float: right;
}
#Sorts div {
width: auto;
height: 20px;
line-height: 20px;
border-top: 1px solid #393939;
border-right: 1px solid #5A5A5A;
border-bottom: 1px solid #393939;
border-left: 1px solid #393939;
padding: 0px 8px 0px 8px;
text-align: center;
float: left;
background-color: #999999;
}
#Sorts div:last-child {
border-right: 1px solid #393939;
-webkit-border-top-right-radius: 5px;
-moz-border-top-right-radius: 5px;
border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#Sorts div a {
text-decoration: none;
color: #CCCCCC;
font-weight: bold;
}
#Sorts div:hover {
background-color: #555555;
}
Javascript
//User clicked SORT link.
$(document).on("click", "#SortLink", function (e) {
e.preventDefault();
$('#Sorts').animate({ width: 'toggle' }, 5000);
});
Thanks!
#Sorts needed to have height:22px;. I updated your Fiddle at http://jsfiddle.net/R3FkZ/1/

Categories