I am starting my first project creating a website and I am getting some problems trying to set the width of a div. Somehow it is not taking 100% of the width available for that element.(i want them to display horizontally with equal space between them)
I can only get the three list item to be one next to the other at the begining(left) of his line
Thats the html:
.sort_buttons {display:inline-block;
width: 100%;
}
.sort_btn {display:inline-block;
margin:auto;
width:auto }
<ul class="sort_buttons">
<li class="sort_btn" type="button" name="button">size</li>
<li class="sort_btn" type="button" name="button">size</li>
<li class="sort_btn" type="button" name="button">size</li>
</ul>
Thanks in advance.
Where is the div? Do you mean the ul element?
If so, that in fact is 100% width.
If you mean you wish for the li's to be 100%, you simply have to use:
.sort_btn {
list-style: none;
}
Instead use display:inline-block; use display:flex to wrap div(in your case:sort_buttons)
.sort_buttons {display:flex;
width: 100%;
}
.sort_btn {
margin:auto;
width:auto }
<ul class="sort_buttons">
<li class="sort_btn" type="button" name="button">size</li>
<li class="sort_btn" type="button" name="button">size</li>
<li class="sort_btn" type="button" name="button">size</li>
</ul>
Updated to automatically adjust width of .sort_btn depending on the space available, and also have .sort_buttons fill the available space remaining on a line (i.e. if you wanted to another button or menu).
I think this is what you're aiming for.
.bar {
display: flex;
}
.sort_buttons {
display:flex;
flex: 1;
}
.sort_btn {
margin:auto;
width:auto
}
<div class="bar">
<div class="title">
Sort Options:
</div>
<div class="sort_buttons">
<div class="sort_btn">size</div>
<div class="sort_btn">size</div>
<div class="sort_btn">size</div>
</div>
</div>
Related
Having a menu like this (emphasized by a red rectangle)...
how can I (in pure CSS) make this responsive so that, if there is not enough width available, the menu turns into a drop-down list (or anyway something smaller).
The question is not about implementing the drop-down list itself, but how to switch from one content to the other depending on available space.
I know this is rather simple when using #media max-width queries, but the problem is that I do not know the actual with of the menu items at "design time" - especially because the text gets translated and/or changed, leading to different widths depending on the actual language displayed.
Perhaps, there is some CSS trick that makes a whole "text" line / content disappear if it does not fit the parent container?
Here's a solution I've just come up with that should do the job. I added some style to make the structure more evident but it's not pixel perfect, you'll have to take care of that. Run the snippet in full screen and resize the window to see it in action.
.table-row{
display: table-row;
}
.table-cell{
display: table-cell;
vertical-align: middle;
white-space: nowrap;
}
.wrapper{
height:75px; /*the height of your menu, it's critical to define this value equal to the horizontal menu height*/
overflow:hidden; /*this will hide the horizontal menu when the screen width is too small*/
}
.top_nav{
padding-right:120px; /*allow space for right section*/
background-color: green;
color:white;
}
.top_nav_background{ /* this serves as a background for the rest of the structure, pay attention if you have other z-indexed elements */
background-color:green;
height:85px;
width:100%;
position:absolute;
top:0px;
z-index:-1;
}
.floating-box {
height: 55px;
padding:10px;
float: left;
border: 1px solid #73AD21;
background-color:green;
}
.h-menu{
height: 75px;
float: left;
min-width: 150px;
background-color:yellow;
}
.h-menu-item{
height: 55px;
padding:10px;
border: 1px solid #73AD21;
}
.v-menu{
margin-top:20px;
height: 20px;
background-color:red;
}
.right-items{
position:absolute;
right:20px;
top:20px;
color:white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="top_nav_background"></div>
<div class="top_nav table-cell">
<div class="wrapper">
<div class="floating-box">Left section.</div>
<div class="h-menu table-row">
<div class="table-cell h-menu-item">item1</div>
<div class="table-cell h-menu-item">item2</div>
<div class="table-cell h-menu-item">item3</div>
<div class="table-cell h-menu-item">long long long item4</div>
</div>
<div class="v-menu">v-menu</div>
</div>
<div class="table-cell right-items">Right section.</div>
</div>
</body>
</html>
In one project I did I came up with a solution where you show part or all of the menu and only show it as a dropdown/side-menu when the screen gets smaller.
The sub-menu is optional and you can just use the main menu for your effect.
http://codepen.io/anon/pen/LRJoEB
<nav id="top-menu">
<ul>
<li class="link menu" tabindex="0">
Menu
</li>
<li class="link">
<a class="help" href="#">Help</a>
</li>
<li class="link">
<a class="account" href="#">My Account</a>
</li>
<li class="sub-nav">
<nav id="sub-menu">
<ul>
<li class="sub-link">
<a class="details" href="#">My Details</a>
</li>
</ul>
<div id="close-menu" tabindex="0"></div>
</nav>
</li>
</ul>
</nav>
Just change the bits and parts to fit your needs, should you get stuck just leave a comment ;)
edit
Just realised you don't want to be using any media queries. I'll see if I can come up with something in that direction, not off the top of my head.
First here is the screenshot of what is wrong with the current code
and here is the code that is associated with the same
<nav class="blue darken-3">
<div class="nav-wrapper">
Chatter
<ul class="right hide-on-med-and-down">
<li><a nohref><i class="material-icons">search</i></a></li>
<li><a nohref><i class="material-icons">view_module</i></a></li>
<li><a nohref><i class="material-icons">refresh</i></a></li>
<li><a nohref><i class="material-icons">more_vert</i></a></li>
</ul>
</div>
</nav>
<div class="row">
<div class="col s3 red">1</div>
<div class="col s9 indigo" style="height:100%">4</div>
</div>
first i don't see the reason why 4 is a little below 1. This bug resolves when i add a margin of 10 px to top of row, but the thing is that red menu bar should be colored and therefore i don't wan't any white space in between that.
The second question, that i am not sure about how to do that the correct way is that i want both blue and red to cover the entire height on the browser window. Is there anyway how to do the same in materialize , or if not please help me with how that is possible.
To set the height to full view add this CSS
.col.s3.red, .col.s9.indigo {
min-height: 100vh; /* use "vh" instead of % */
}
It will help setting the height to view port height.
These solutions work so long as the content in either of the div's does not overflow the browser window and cause it to scroll.
In order for both columns to fill 100% of the page height (not viewport height) I found this:
CSS: equal height columns
Add the following code to the parent div (row)
.flex {
display: flex;
flex-wrap: wrap;
min-height: 100vh; /*or use calc(100vh - header_height)*/
}
I solved this using:
.full-width {
height: 100%;
min-height: 1000px !important;
}
You need to use !important because .row .col has a min-height: 1px;
<div class="col s3 yellow lighten-4 full-width">
A
</div>
<div class="col s9 grey lighten-4 full-width">
B
</div>
This solution used 100% of the viewport's larger dimension.
.myColumnFormat {
min-height: 100vmax;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<div>
<h4>This solution uses Materialize</h4>
</div>
<div class="row">
<div class='col myColumnFormat blue s6'>
<ul>
<li>This column is blue</li>
<li>This column's background colour is full length</li>
</ul>
</div>
<div class='col green s5 offset-s1 '>
<ul>
<li>This column is green</li>
<li>This column's background colour ends at the end of this list</li>
</ul>
</div>
</div>
To get full height you can do following. jsfiddle
HTML
<nav class="blue darken-3">
<div class="nav-wrapper">
Chatter
<ul class="right hide-on-med-and-down">
<li><a nohref><i class="material-icons">search</i></a></li>
<li><a nohref><i class="material-icons">view_module</i></a></li>
<li><a nohref><i class="material-icons">refresh</i></a></li>
<li><a nohref><i class="material-icons">more_vert</i></a></li>
</ul>
</div>
</nav>
<div class="row">
<div class="col s3 red">1</div>
<div class="col s9 indigo">4</div>
</div>
jQuery
$(document).ready(function() {
window_size = $(window).height();
$('.col').height(window_size);
});
Second question, add this in your CSS-File:
div.col.s3.red {
min-height: 500px;
height: 100%;
}
div.col.s9.indigo {
min-height: 500px;
height: 100%;
}
It gives a height of 100% to the two elements, it should work in newer Browsers. For older Browser you could add min-height to it.
First Question, the nav elements have a line-height of 64px, you could reduce it as you like in your CSS-File:
.nav-wrapper {
line-height: 44px;
}
var resizeColumn = function () {
my_column_el.height($(window).height() - my_column_el.offset().top);
};
$(window).on('resize.column', _.debounce(resizeColumn, 300));
resizeColumn();
As with Bootstrap, most Materialize styling starts with a container. If the container is not 100% then child divs will not be either. This styling will start you off with 100% width and 100% height:
CSS
html, body {
min-height: 100vh;
margin: 0;
padding: 0;
}
.container {
min-height: 100vh;
width: 100%;
}
.content-wrapper-100vh {
min-height: 100vh;
}
Remove "width: 100%;" in the container css and it will be 70% wide (default).
HTML
<div class="container">
<div class="valign-wrapper content-wrapper-100vh">
<div class="row center-align">
<div class="col l12">
<div class="my-title">Centered/Middle Title</div>
</div>
</div>
</div>
</div>
Hi I have a container div for a page (called innercontent) and within that I have a div called tabs2. Tabs2 contains a tabbed navigation that allows content inside a div (within tab2) change. The content inside the div varies, so the height should expand itself if there is a lot of content in that div. The problem is that when changing the tabs in the content area, the div does not resize automatically, so the content cannot be seen. Here is the code:
CSS:
.innercontent {
overflow: hidden;
background-color:#FFF;
padding:24px 30px;
border-radius:5px;
}
#tabs2 {
width: 100%;
height:100%;
}
.div2 {
position: absolute;
visibility: hidden;
width: 100%;
left: 0;
}
HTML:
<div id="tabs2">
<ul>
<li id="One">One
<div class="div2">
<p>Insert content here</p>
</div>
</li>
<li id="Two">Two
<div class="div2">
<p>Insert content here</p>
</div>
</li>
<li id="Three">Three
<div class="div2">
<p>Insert content here</p>
</div>
</li>
</ul>
</div>
Are you sure they have to be absolute? As I don't think they need to be.You could look at using something such as jqueryui http://jqueryui.com/tabs/
Alternatively, amend your html and it should be easier.Essentially move the content divs outside of the but have a data-attribute that links them to a specific link. I'm assuming you use some js at the moment to manipulate showing and hiding as you currently have visibility:hidden. I've changed this to display:none in my example (as visibility still occupies space in the document. When a user clicks a link, hide all the divs by default, then show the one with the correct matching data-attribute.
I've created a fiddle at http://jsfiddle.net/9bH7s/ that shows this and the code is below.
html
<div class="innercontent">
<div id="tabs2">
<ul>
<li id="One">One
</li>
<li id="Two">Two
</li>
<li id="Three">Three
</li>
</ul>
<div class="div2" data-id="first">
<p>Insert content here</p>
</div>
<div class="div2" data-id="sec">
<p>Insert content here</p>
</div>
<div class="div2" data-id="third">
<p>Insert content here this has a lot more <br /><br />and some more content</p>
</div>
</div>
</div>
css
.innercontent {
overflow: hidden;
background-color:#efefef;
padding:24px 30px;
border-radius:5px;
}
#tabs2 {
width: 100%;
height:100%;
}
#tabs2 ul li{
float:left;
list-style:none;
margin-left:10px;
}
.div2 {
display:none;
width: 100%;
clear:both;
}
js
$('#tabs2').delegate('a','click',function(){
$('.div2').hide();
$('.div2[data-id=' + this.id +']').show();
});
1st change::dont indicate any height for .tab2..it will take an automatic height corresponding to the item that it contains
2nd change: you have made position:absolute; and expecting it to be dynamic.how that can be possible.remove it..either make it position:relative; or better choice is not to mention position property at al ...you can use margin-left:100px; to position your div
I'd like to display a telephone number that appears on the navbar next to the navbar toggle button. The toggle button only appears once the navbar is in the collapsed state. I'd like the text to appear next to it.
Here's what I have now:
And here's what I am trying to achieve:
HTML from the relevant divs:
<div class="header-centered"><img src="http://placehold.it/350x150"></div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
</div>
</div>
</div>
I don't want the text to appear unless the navbar is collapsed. How can this be achieved?
You can control the visibility of your text by CSS, something like this:
.abcde .text {
display: none;
}
.abcde.collapse .text {
display: inline-block;
}
Easy - just add the following HTML right before the 'hamburger button'
<p class="navbar-text visible-xs-inline-block">Menu</p>
Then style it to suit.
p.navbar-text {
font-size: 22px;
margin-top: 8px;
padding-bottom: 0;
text-align: right;
width: 70%;
}
There are too many ways to handle this situation.
Display: none; It's a browser friendly, they no more assume any element because its in permanently hidden state.
Visibility: hidden; it can hide any element on your document but still it has a limitation, browsers'll have to find that element on the page and then they hide that element. So for a few of few milliseconds but they have to work a bit to hide this.
By keeping font-size: 0; and after collapsing state use font-size: 1em;.
Keep opacity: 0 and later on opacity: 1.
postion: absolute; left:-99999em; and and later left:0;
You can use z-index if you have positioned element. Stacking the element in order also works.
So, finally there are a whole bunch of methods to hide and show elements on your document. It all depends on you whatever you choose.
But according to me Display: none; is the best one for your project.
I'm adding this answer for users that want to use bootstrap way of handling collapsing element using the grid-float-breakpoint , that is the point at which the navbar becomes uncollapsed.
So if you want elements that is visible only when the bar is collapsed add the collapsed-addon class and include this css.
The default gird-float-breakpoint value is setted to screen-sm-min that is 768px
#media (min-width: 768px){
.collapsed-addon {
display: none;
}
If you are using some processors use the css variable grid-float-breakpoint
#media (min-width: $grid-float-breakpoint){
.collapsed-addon {
display: none;
}
}
I searched for the answer and this is what I did - replace Menu with your desired text
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar btn-block" data-target=".navbar-inverse-collapse" data-toggle="collapse">
<span class="icon icon-white icon-align-justify"></span>
MENU</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
I have the following li item:
<li>
<span style='float:left; background-color:red'>a</span>
<span style='float:left; background-color:green'>b</span>
</li>
I'd like the span on the right to fill whatever width is remaining in its parent li. Is there a way to do that?
Thanks
You don't want to float each of them left, only the first one, and then make the second one display in block mode:
<li>
<span style="float:left; background-color:red">a</span>
<span style="display: block; background-color:green">b</span>
</li>
Looked for the same solution, but found only this which worked great for me:
<li>
<span style='display: table-cell; background-color:red'>a</span>
<span style='display: table-cell; width: 100%; background-color:green'>b</span>
</li>
All you need is just using table-cell displaying and set filler span width to 100%. All other solutions I've tried didn't work for me as expected.
Don't float the second one, and make it display:block.
http://jsfiddle.net/ymAt5/
You can use the grid layout:
<li class="my-grid">
<span class="left">a</span>
<span class="right">b</span>
</li>
And the css :
.my-grid {
display: grid;
grid-template-columns: max-content auto;
}
.left{
background: red;
}
.right{
background: blue;
}
Play with the grid-template-columns property so it suits your needs.
https://jsfiddle.net/c9j3ok7u/