Disclaimer: I am not really familiar with CSS. I am using overflow: hidden to truncate text on dynamic Bootstrap tabs. When a second tab is created, all the tabs move up slightly because of the padding underneath. I'm trying to get rid of the extra padding because the bottom border appears when all the elements get moved up. I did some Googling, but using vertical align bottom or top does not eliminate the gap. I don't know if this has anything to do with it, but there is also a margin-bottom: -1px in order to hide the bottom border to get the effect of a connected tab.
I want it to look like how it looks without overflow:hidden checked.
unwanted space with overflow hidden
with overflow hidden
with overflow hidden
without overflow hidden
<div class=container-fluid" id="dashboard">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#overall-statistics" role="tab" aria-controls="Overall Statistics"><span>Overall Statistics</span></a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="overall-statistics" role="tabpanel">
<table>
<tr>
<td style="padding: 10px;">
View by
</td>
<td style="padding: 10px;">
<select class="selectpicker" id="view-by" multiple title="Levels">
<option id="view-levels">Levels</option>
<option id="view-store-type">Store Type</option>
</select>
</td>
</tr>
</table>
</div>
</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
.nav-tabs .nav-item {
margin-left: -1px;
width: 150px;
}
.nav-tabs .nav-link {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}
To eliminate the extra border, you may want to add this:
.nav-tabs .nav-link { border-bottom: none; }
Related
I'm trying to achieve a solution where a horizontal line appears to the left of the text but the text remains centre aligned. Please see image below.
I've also added my mark-up below. I'm currently using Bootstrap 4.
<div class="text-center nav-items">
<ul>
<div class="pb-5">
<li>
<h2 class="sidebar-first-item">About</h2>
</li>
<p>Behind the brand // Meet the team</p>
</div>
<div class="pb-5">
<li>
<h2>Our Work</h2>
</li>
<p>Take a look at our marvelous creations</p>
</div>
<div class="pb-5">
<li>
<h2>Services</h2>
</li>
<p>Learn more about what we can do for you</p>
</div>
<div class="pb-5">
<li>
<h2 class="sidebar-last-item">Contact</h2>
</li>
<p>Get in touch today. Let's make some magic</p>
</div>
</ul>
</div>
Use pseudo-elements to do so:
.sidebar-first-item {
position: relative;
}
.sidebar-first-item:before {
content: '';
position: absolute;
width: 45%;
height: 5px;
background-color: red;
top: 50%;
left: 0%;
}
CodePen: https://codepen.io/manaskhandelwal1/pen/xxEaQYg
First cleanup your html, a <ul> list may not have children other than <li>, <script> or <template> elements (see The Unordered List element). Hence remove the div's inside the <ul> and add their classes to the <li>.
A solution to your design problem is to add a element before and after your anchor elements, size them (width) with a percentage you like and set a min-width for the anchor, so you have a nice responsive layout also on small devices. This creates an equal width red line
If you want the red line to align with the width of the text, you can make your anchor non-breaking white space and a set a padding, so the red line comes as close as defined in the padding towards the text.
.redline,
.spacer {
width: 100%;
height: 3px;
display: inline;
background-color: red;
}
.spacer {
height: 0px;
}
li {
display: flex;
align-items: center;
}
li a {
margin: 0 auto;
border: 0px solid gold;
padding: 0 20px;
white-space: nowrap;
}
li p {
width: 100%; margin:-50px 0 50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="text-center nav-items">
<ul>
<li class="pb-5">
<span class="redline"></span>
<a href="#">
<h2 class="sidebar-first-item">About</h2>
</a>
<span class="spacer"></span>
</li>
<li>
<p>Take a look at our marvelous creations</p>
</li>
<li class="pb-5">
<span class="redline"></span>
<a href="#">
<h2>Our Work</h2>
</a>
<span class="spacer"></span>
</li>
<li>
<p>Behind the brand // Meet the team</p>
<li>
</ul>
</div>
This is where a CSS pseudo element can come into play! A pseudo element can be used to place designs before or after an element.
I added a class called horizontal-line to your h2.
<div class="text-center nav-items">
<ul>
<div class="pb-5">
<li>
<h2 class="horizontal-line sidebar-first-item">About</h2>
</li>
<p>Behind the brand // Meet the team</p>
</div>
<div class="pb-5">
<li>
<h2>Our Work</h2>
</li>
<p>Take a look at our marvelous creations</p>
</div>
<div class="pb-5">
<li>
<h2>Services</h2>
</li>
<p>Learn more about what we can do for you</p>
</div>
<div class="pb-5">
<li>
<h2 class="sidebar-last-item">Contact</h2>
</li>
<p>Get in touch today. Let's make some magic</p>
</div>
</ul>
The CSS will look like this.
.horizontal-line {
position: relative;
}
.horizontal-line::before {
content: "";
display: block;
width: 60px;
height: 2px;
position: absolute;
top: 50%;
left: 35%;
border-radius: 30px;
background-color: #DE657D;
}
By adding the pseudo element it will know to place it before any content with that class name. In this case, we are leaving content blank and placing in
https://jsfiddle.net/rc463gb8/1/
I have this JSFiddle: https://jsfiddle.net/96urhqcz/
There are 4 divs in a row - the HTML looks like this:
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link1/">
<div style="margin:10px; padding: 30px 0px; background:#E74C3C" class="app">
<i class="fa fa-3x fa-comments-o" width="50%" style="display:block; margin:auto" src="/static/launcher/comments-o"></i>
Link Number 1
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link2/">
<div style="margin:10px; padding: 30px 0px; background:#9D55B8" class="app">
<i class="fa fa-3x fa-paper-plane" width="50%" style="display:block; margin:auto" src="/static/launcher/paper-plane"></i>
Link Number 2
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link3/">
<div style="margin:10px; padding: 30px 0px; background:#3395DD" class="app">
<i class="fa fa-3x fa-street-view" width="50%" style="display:block; margin:auto" src="/static/launcher/street-view"></i>
Link 3
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link4/">
<div style="margin:10px; padding: 30px 0px; background:#00838F" class="app">
<i class="fa fa-3x fa-line-chart" width="50%" style="display:block; margin:auto" src="/static/launcher/line-chart"></i>
Link 4
</div>
</a>
</div>
The CSS for g-1-4 looks like this:
.g-1-4{
width: 25%;
}
As you can see in the JSFiddle - the margins between the boxes are 'linked' to the appropriate box.
Ultimately I'm trying to have a 4-across layout, but have the margins not linked. When a user mouses between the boxes I want it to be a regular mouse with no clickability.
I'm sure it's something really simple I'm missing - but I can't seem to correct it.
Any thoughts or ideas?
You can set a fixed width to your divs, and using flexbox they will be automaticaly displayed with space which is not 'linked'.
Hope this little code will help you.
.flex {
display : flex;
justify-content : space-around;
}
.div1, .div3 {
width : 120px;
height : 120px;
background-color : red;
}
.div2, .div4 {
width : 120px;
height : 120px;
background-color : blue;
}
p {
margin : 0;
color : white;
line-height: 120px;
font-size : 12px;
text-align : center;
}
<div class="flex">
<a href="#" class="div1">
<p>LINK 1</p>
</a>
<a href="#" class="div2">
<p>LINK 2</p>
</a>
<a href="#" class="div3">
<p>LINK 3</p>
</a>
<a href="#" class="div4">
<p>LINK 4</p>
</a>
</div>
Take the margin off of the <div> and add it to the <a> that's wrapping the div. Also add style="display:block:" to the <a>.
This CodePen has the updates.
The issue is coming from your using the table cell display method.
.g > div,
.g-m > div {
display: table-cell;
vertical-align: top;
}
I also support the flex box usage as pointed out by Louis.
What is happening is that the link element is expanding to the 100% of the container div to get some space you could set a specific width for the a tag or you could add some padding to the container element, you will have to play with padding and width to make it look good though.
https://jsfiddle.net/96urhqcz/1/
.g-1-4{
width: 25%;
padding: 10px;
}
I've added a second nav element to a view, under the site banner. But when the screen is expanded at it's default resolution, the menu is skewed to the left of the site banner.
My aim is to position the menu directly under in line with the site banner. I made a new JSFiddle link of the page setup to explain the current positioning issue.
I did inspect with Chrome dev tools and it look like a padding causing the positioning highlighted in orange:
The menu currently appears of center like this:
Whereas I want position it directly under the "Self Service" div like this:
I've tried reducing the right margin on the nav element's custom CSS in order to push in further right in line with the banner:
#chartNav {
background-color: #614767;
display: inline-block;
padding: 10px 20px 10px 20px;
margin: 0 5% 0 10%;
padding-bottom: 20px;
text-align: center;
}
But the nav menu is still pulling off center of the banner.
Question:
How can I position a nav element center under parent div?
This is a gist of the markup containing the banner site title div and it's containing nav menu:
<div class="container-fluid">
<div class="col-md-2 col-xs-2"></div>
<div class="col-md-10 col-xs-6">
<label class="main-title">Self Service</label>
</div>
<div class="row">
<div class="col">
<div class="col">
<nav>
<ul id="chartNav">
<li><a>Asset Selection:</a></li>
<li>
<a>All <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li><input type="checkbox" /> Option 1</li>
<li><input type="checkbox" /> Option 2</li>
</ul>
</li>
<li><a>Date Range:</a></li>
<li>
<input class="input-sm" type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
</li>
<li><a>Profile:</a></li>
<li>
<a>Default <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li><input type="checkbox" /> Option 1</li>
<li><input type="checkbox" /> Option 2</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
Adding this seems to solve the issue, the first two lines align the nav's container to the center, while the third removes that unnecessary left margin that you mentioned.
.col-md-10{
width: 100%;
text-align: center;
margin-left: 0px;
}
check it out https://jsfiddle.net/m7h541vb/3
When adding a dropdown to a table row, it is getting cut off as so:
Other questions have pointed me in the direction of a stacking problem, but I just can't work out how to fix it. I have tried adding z-index:1000 and position:relative style attributes to each of the parent DIV's but that hasn't fixed the issue. Not sure what to try next...
<div class="row-fluid">
<div class="span12">
<div class="grid simple ">
<div class="grid-body table_highlight>
<table class="table table-striped" id="example2">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-group">
<a class="btn btn-info dropdown-toggle btn-demo-space" data-toggle="dropdown" href="#"> Info <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Edit
I have changed the code to the following to make it clearer how it all fits together:
<div class="row-fluid" style=" border: 5px red solid;">
<div class="span12" style=" border: 5px green solid;">
<div class="grid simple " style=" border: 5px blue solid;">
<div class="grid-title">
...
</div>
<div class="grid-body table_highlight" style=" border: 5px yellow solid;">
This is how it now appears:
It looks like the problem is that the grid-body class has an overflow style set to hidden. When the dropdown is activated, its size is larger than the grid-body's size, so the dropdown gets clipped. You can see it fixed if you add overflow: visible to the style attribute on your div with the grid-body class: fiddle
As a permanent fix, you might want to explore modifying the HTML and/or CSS instead of just adding the style directly to the element, though.
I have two columns with the left being some text with a background color and the right being an image.
Full Example: http://jsfiddle.net/kvFG4/
Here's the basic structure:
<div class="container">
<table style="height:auto;">
<tbody>
<tr>
<td align="center" style="width:35.7143%">
<div data-cycle-fx="fade" data-cycle-timeout="5000" data-cycle-speed="2000" data-cycle-slides="li" class="squareMarketingText cycle-slideshow squareMarginTop" id="dnn_squareMarketingTextPane" style="position: relative; height: 548px;">
<li style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;" class="cycle-slide cycle-sentinel">
<div class="squareOrange" style="visibility: hidden;">
<span class="center marketingText" style="visibility: hidden;">
CREATING WHAT YOUR BUSINESS NEEDS, TO GO WHERE YOUR BUSINESS NEEDS TO GO
</span>
</div>
</li>
</div>
<div class="clear"></div>
</div>
</div>
<li style="position: absolute; top: 0px; left: 0px; z-index: 97; opacity: 0; display: block; visibility: hidden;" class="cycle-slide">
<div class="squareOrange">
<span class="center marketingText">
CREATING WHAT YOUR BUSINESS NEEDS, TO GO WHERE YOUR BUSINESS NEEDS TO GO
</span>
</div>
</li>
</div>
</td>
<td style="width:64.2857%">
<img class="plc-logo" src="http://newsite.plcellc.com/Portals/_default/Skins/PLC//images/AllSquares.png">
</td>
</tr>
</tbody>
</table>
</div>
I'd like the text in the left column to be flexible with the right column but the only way I was able to get it to work was with this javascript:
setTimeout(function () {
$(".squareMarketingText").css({ 'height': ($(".plc-logo").height() + 'px') });
}, 500);
Is there away to have the left column be sized right with just .css?
You are using <li> inside a <div> tag.... li tags should always be within <ul> or <ol> tags.
Rest of your code is fine.
Check the Demo
I turned div in to UL & removed the inline css height.