The following image is the effect that I am going to implement. I used jquery ui sortlist so that the items within the box can be dragged and sorted. However, I cannot wrap a div around the sortlist. Actually I have come across the same problems whenever I using bootstrap columns. I cannot easily wrap div around the content, and format the inside elements if columns are used.
Here it is my HTML code:
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<div class="summary-theme">
<p>Theme1</p>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
CSS:
/* SUMMARY BOXES */
.summary-theme{
display:block;
margin-top:10px;
margin-bottom: 40px;
width:100%;
background: #fff;
box-shadow: 1px 1px 2px #A7A7A7;
}
.summary-theme .connectedSortable{
border:0px;
}
.summary-theme p{
display:block;
float:left;
margin:-20px -15px;
background: #0CBD94;
border: 4px solid #FFFFFF;
}
The box can wrap successfully if I set the overflow to be 'hidden'. But in that case, the tag <p> will not show properly because it is negative margins.
Things look alright when they are not wrap by Bootstrap Columns. Sorry I don't know how to write an online demo with Bootstrap features. So do you have any ideas how to fix the div wrap problem?
Thank you!
Where overflow: hidden can't be used, the next option is to go for a common clearfix, such as:
.summary-theme:after {
content: "";
display: table;
clear: both;
}
I'm not familiar with BS, but it might already have a class for this that you can just reuse.
Related
This question already has answers here:
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 2 years ago.
I got a div containing an unordered list and an image.
Currently, the image is bigger, thus increasing the size of the div.
I want the image to have the same height as the unordered list, like this:
How can I do this using HTML/CSS/js?
.container {
display: flex;
}
.list {
list-style-type: none;
}
.picture{
max-width: 100%;
height: auto;
}
<div class="container">
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Sample_abc.jpg" class="picture" />
</div>
</div>
Example:
https://jsfiddle.net/ck26ybg4/
There is another way to get rid of img and add a picture as a background image, for example:
.container {
width: 50%;
display: grid;
grid-auto-flow: column;
border: 1px solid red;
margin-bottom: 10px; /* demo only */
}
.list {
margin: 0;
padding: 0;
}
.picture{
border: 1px solid green;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<div class="container">
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div class="picture" style="background-image:url(https://via.placeholder.com/728x90.png)"></div>
</div>
<div class="container">
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div class="picture" style="background-image:url(https://via.placeholder.com/728x90.png)"></div>
</div>
You can just make the picture container relative and add position: absolute to the image, so it won't affect the flow of the document.
.container {
display: flex;
}
.picture-container {
position: relative;
}
.picture{
position: absolute;
height:100%;
}
<div class="container">
<ul class="list">
<li>Point</li>
<li>Point</li>
<li>Point</li>
</ul>
<div class="picture-container">
<img class="picture" src="https://dummyimage.com/150/efefef/242424"></img>
</div>
</div>
You can use object-fit so the image adapts to the container
The object-fit property defines how an element responds to the height and width of its content box.
For example .picture { object-fit: 'fill' }
I have spent about an hour trying to find a solution that can work, however, none of them come close to my desired goal. I am not expecting someone to spend the time creating it for me (its a lot of work), but I want to know how I can achieve it. Links or js fiddle would be amazing.
So this sidebar I am working on. It should have three states.
The first and second state show up on table onwards.
The default state is when the sidebar is loaded.
The second state is what happens when the user clicks on one of the icon images that are seen in the first image. It now expands to show the additional navigation. (Ex. Icon says Friends, and the new menu that appears has a list of like 10 people).
The Third state only appears on mobile. It basically eliminated the icon sidebar seen in the Default State (first image)
I appreciate any advice on how to solve this. I have tried so many different things and none come close to what I want.
Is this what you are looking for?
var titles = $('.title');
titles.each(function() {
$(this).on('click', function() {
$(this).next().toggleClass('active')
})
});
$('.toggle').on('click', function() {
$('.sidebar').toggleClass('hide');
});
.toggle {
position: fixed;
z-index: 1000;
}
.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 200px;
padding-top: 20px;
border-right: 1px solid black;
}
.group {
margin-top: 16px;
}
.title {
cursor: pointer;
border-bottom: 1px dashed black;
}
.list {
max-height: 0;
overflow: hidden;
}
.list li {
margin-top: 4px;
}
.active {
max-height: 400px;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">Button</button>
<div class="sidebar">
<section class="group">
<h3 class="title">Click me first.</h3>
<ul class="list">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</section>
<section class="group">
<h3 class="title">Maybe click me.</h3>
<ul class="list">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</section>
<section class="group">
<h3 class="title">Nope - click me!</h3>
<ul class="list">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</section>
</div>
Is this possible without the help of javascript?
Typically we have menu bars at the top of the page - we place them as a child of body and then absolutely position them e.g. top: 10px; right: 10px;.
What if we want to achieve the same goal but as a context menu further down the page?
I have started a fiddle to give an idea - here there's no positioning, we just have the default of overflow: visible.
I can't absolutely position it because I don't know the x,y due to the dynamic nature of the content that precedes it.
The only way I can think of is go down the traditional route of the top nav bar, and with javascript find the x,y of it's container and position it there. However I would need to manage that if the content that precedes it changes then it's position needs to change also.
Does anyone know of a "stick-to" jquery method. Or even better achieve it with pure css?
Thanks
here's my crude fiddle - click "one" http://jsfiddle.net/hHR23/1/
I think you want this but I'm not certain from your description:
http://jsfiddle.net/samih/hHR23/2/
Notice this:
.section {
height: 58px;
background-color: yellow;
position: relative;
}
And this:
.menu {
position: absolute;
}
Now your menu will follow with the "dynamic" page because the absolute position is relative to the "position: relative" container.
Another approach - Fiddle.
HTML
<div class='header'>Header</div>
<div class='floatingmenu'>
<ul class="menu">
<li>One
<ul class="sub-menu">
<li>one a</li>
<li>one b</li>
<li>one c</li>
<li>one d</li>
<li>one e</li>
<li>one f</li>
<li>one g</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
CSS
.header {
height: 40px;
background-color: blue;
}
.floatingmenu {
width: 30%;
height: 30%;
background-color: green;
color: white;
border: 10px solid white;
border-radius: 10px;
margin: 20px auto;
}
.footer {
height: 200px;
background-color: yellow;
}
I have a Menu with ToolGroups:
I want to let appear a sub-menu on the right side of an hovered toolgroup div. How can I realize this with html5, javascript(also jQuery) and CSS?
EDIT: Source code on JsFiddle
<div id="menu">
<center><h1>Toolbox</h1></center>
<hr/>
<div class="toolGroup">MyToolGroup⇒</div>
<hr/>
<div class="toolGroup">MyToolGroup2⇒</div>
<hr/>
<div class="toolGroup">MyToolGroup3⇒</div>
<hr/>
<div class="toolGroup">MyToolGroup4⇒</div>
<hr/>
<div class="toolGroup">MyToolGroup5⇒</div>
<hr/>
<div class="toolGroup">MyToolGroup6⇒</div>
<hr/>
<div class="toolGroup">MyToolGroup7⇒</div>
<hr/>
<br/>
</div>
#menu
{
position: absolute;
top: 20px;
left: 20px;
background-color: #c0c0c0;
border-radius: 8px;
padding: 10px 10px 10px 10px;
}
.toolGroup
{
cursor: pointer;
text-align: center;
font-size: 18px;
font-weight: bold;
}
Here is the simple css solution for it http://jsfiddle.net/Mohinder/UJErC/
HTML
<ul class="toolgroup">
<li>Toolgroup
<ul>
<li>Toolgroup
<li>Toolgroup</li>
<li>Toolgroup</li>
<li>Toolgroup</li>
<li>Toolgroup</li>
<li>Toolgroup</li>
</li>
</ul>
</li>
<li>Toolgroup
<ul>
<li>Toolgroup
<li>Toolgroup</li>
<li>Toolgroup</li>
<li>Toolgroup</li>
<li>Toolgroup</li>
<li>Toolgroup</li>
</li>
</ul>
</li>
<li>Toolgroup
<ul>
<li>Toolgroup
<li>Toolgroup</li>
<li>Toolgroup</li>
<li>Toolgroup</li>
<li>Toolgroup</li>
<li>Toolgroup</li>
</li>
</ul>
</li>
<li>Toolgroup
<ul>
<li>Toolgroup
<li>Toolgroup</li>
<li>Toolgroup</li>
<li>Toolgroup</li>
<li>Toolgroup</li>
<li>Toolgroup</li>
</li>
</ul>
</li>
</ul>
CSS
body,ul,li { margin:0px; padding:0px; }
.toolgroup,.toolgroup li ul { padding:0px; list-style:none; width:150px; background:#ccc; border:1px solid #000; }
.toolgroup li,.toolgroup li ul li { width:100%; position:relative; }
.toolgroup li a,.toolgroup li ul li a { padding:7px 10px; display:block; border-bottom:1px solid #000; }
.toolgroup li ul { display:none; position:absolute; left:150px; top:0px; }
.toolgroup li:hover ul { display:block; }
You could use a hover event on some child lists:
http://jsfiddle.net/qAZFC/1/
HTML:
<div class="toolGroup">MyToolGroup4⇒
<ul>
<li>Test item</li>
<li>Test item</li>
<li>Test item</li>
</ul>
</div>
CSS:
.toolGroup ul {
display:none;
}
.toolGroup:hover ul {
display:block;
}
Or with jQuery, bind a mouseenter/mouseout event and fade in:
http://jsfiddle.net/7TPab/1/
You need to have the menus on the right already existing and formatted via HTML and CSS. Once this is done, set them all to display:none via CSS.
Now we move on to javascript (I'll show you a jQuery solution because it's easier and you suggested it).
Something like this should accomplish your task:
$(function(){
$(MyToolGroup).hover(function(){
$(MyToolGroupSubMenu).css("display","box")
},function(){
$(MyToolGroupSubMenu).css("display","none")
})
})
This is a VERY simple, stripped down version just to get you moving in the right direction.
The important thing is to next your sub-menu inside of each relating toolgroup, this way the hover handler applies to both the menu item as well as the sub-menu item.
Please note that the selectors in the code above are just pseudo code, I can't use your code because you did not supply it, but replace them as applicable.
Here's a basic jsfiddle http://jsfiddle.net/rsEGZ/1/
The only reason I recommend javascript (and jQuery) instead of CSS is because it allows for the freedom to grow this into something more intricate through animations and callbacks.
BUT, here is the CSS solution http://jsfiddle.net/rsEGZ/2/
I have a div with a fixed position (a top panel) which shall also contain a settings menu at the far right (currently via floating).
When hovering over the settings-image, I want to display a menu below the image.
I want the menu to be aligned to the right side just like the image.
<div id="panel" style="position:fixed">
<panel-entry 1>
<panel-entry 2>
<panel-entry n>
<div id="settings" style="float:right/snapped to the right side>
<img src=settings>
<ul>
<li>setting 1</li>
<li>setting 2</li>
<li>setting n</li>
</ul>
</div>
</div>
Any idea using jQuery very much appreciated, feel free to rearrange any html.
No jQuery necessary, just give your #panel a width:
#panel {
position: fixed;
width: 100%;
}
#settings {
float: right;
}
See DEMO.
Aside from your example not being HTML, I would anyhow correct the conceptual approach. There is no jQuery required for such a task, which can be done entirely in CSS.
You want your #panel to first of all contain a <ul> which will contain <li>s, which will be your <panel-entry>, those should be set as inline-block.
The #settings should be one of those, perhaps with a special class or id (we'll keep settings for now). You can position: absolute this to right: 0, or have it float. Don't use an image element for this, but rather use a background-image.
Inside this element, you will have a submenu: i.e. another <ul> with display: none, a position:absolute, right: 0 and top: X, so that X doesn't overlap with your #panel.
Next, you want to make the element visible on :hover of li#settings.
Here's a working demo
Basic HTML
<div id="panel">
<ul>
<li>Panel entry 1</li>
<li>Panel entry 2</li>
<li>Panel entry n</li>
<li id="settings">
<ul>
<li>setting 1</li>
<li>setting 2</li>
<li>setting n</li>
</ul>
</li>
</ul>
</div>
Basic CSS
#panel {
position: fixed;
top: 0;
width: 100%;
}
#panel > ul > li {
display: inline-block;
}
#panel > ul > li > ul {
display: none;
position: absolute;
top: {X};
right: 0;
}
li#settings {
background: url({youricon}) no-repeat top center;
position: absolute;
right: 0;
min-width: {youricon-x};
min-height: {youricon-y};
}
li#settings:hover > ul{
display: block;
}