I'm using Fomantic-UI (Semantic-UI). I have a list with items that consist of an avatar, a text and a button. When the text is to wide to fit on one line, it should wrap to a second line. But instead, the whole line wraps to a new line under the avatar and the button. See the fiddle below:
https://jsfiddle.net/j2pguvko/8/
<body>
<div class="ui list" style="width: 140px">
<div class="item">
<a class="right floated content">
<i class="trash icon"></i>
</a>
<img class="ui avatar image">
<div class="content">
Blabla blabla
</div>
</div>
</div>
</body>
How can I make the text wrap?
Something like this?
Justify the text, and make the image float.:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css" integrity="sha512-g/MzOGVPy3OQ4ej1U+qe4D/xhLwUn5l5xL0Fa7gdC258ZWVJQGwsbIR47SWMpRxSPjD0tfu/xkilTy+Lhrl3xg==" crossorigin="anonymous" />
<style>
img {
float: left;
margin: 5px;
}
p {
text-align: justify;
}
</style>
</head>
<body>
<div class="ui list" style="width: 140px">
<div class="item">
<a class="right floated content">
<i class="trash icon"></i>
</a>
<img class="ui avatar image">
<p>
Blabla blabla asjd aejhfk jihas wknik kjanwk nlsajn
</p>
</div>
</div>
</body>
Related
See jsfiddle here.
In Semantic UI, how does one create a horizontal menu with (a) vertically centered items, and (b) a vertical break between icon and text inside an item?
This code ...
<div class="ui icon menu">
<div class="item">
<div style="width:100px;height:100px;background:#f00"></div>
</div>
<div class="item">
I want this<br>vertically centered
</div>
<div class="item">
<i class="huge blue settings icon"></i>
I want these<br>beneath the icon
</div>
<div class="item">
<i class="huge blue power icon"></i>
... and centered<br>vertically
</div>
</div>
... is close. Below is what happens before and after adding labeled to the menu.
Without labeled I can't figure out how to move the text below the image.
With labeled, I can't figure out how to vertically center the item contents.
Any advice?
EDIT: The easiest solution would be to answer the question "How do you force a line-break between an icon and text in the item?"
You can't do that without changing HTML and CSS code.
.item {
background-color: #aa8 !important;
}
.item div {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.js"></script>
<link href="https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui labeled icon menu">
<div class="item">
<div style="width:100px;height:100px;background:#f00"></div>
</div>
<div class="item">
<div>
I want this
<br>vertically centered
</div>
</div>
<div class="item">
<div>
<i class="huge blue settings icon"></i> I want these
<br>beneath the icon
</div>
</div>
<div class="item">
<div> <i class="huge grey power icon"></i> ... and centered
<br>vertically
</div>
</div>
</div>
I almost succeeded making aligned html and css but between writing "today" and "yesterday" the content is not aligned. I want it to look like a table. Now it writes "Today" and just packs the content so that the next row doesn't look adjusted.
.ui.left.floated {
min-width: 80px;
}
<!DOCTYPE html>
<html dir="ltr" lang="en-IN" class="js">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
<body>
<div id="wrapper"> <div class="ui top attached tabular menu">
<a class="item active" data-tab="first">All</a>
<a class="item" data-tab="second">Company</a>
<a class="item" data-tab="third">Private</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">
<div class="ui divided items">
<div style="margin-top:10px!important" class="item">
<div class="ui left floated">
Today
<br>3:28
</div>
<div class="image">
<a href="/vi/5773759738806272.html">
<img src="http://lh3.googleusercontent.com/rVL0kUVl6aHzOiyiz5fWq0YZcwALQdrqn2Vf0DWW0R5OvClZgYj5S4_VoQUajZC54gxlQxgP6NZUr3f9pALqzw3EyQ=s150" title="Get Opencart Development Services from TRS Software Solutions" alt="Get Opencart Development Services from TRS Software Solutions">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5773759738806272.html">
Get Opencart Development Services from TRS Software Solutions </a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>TRS Software Solutions is leading ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Lakeland</div>
<div class="ui label">Florida</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
<div class="item">
<div class="ui left floated">
Yesterday
<br>3:44
</div>
<div class="image">
<a href="/vi/5329266862456832.html">
<img src="http://lh3.googleusercontent.com/QQ0YVYpyC5LGhKzpXGlkh-hzQuoYnkDTk4IHtyRKoREVStKOUBrsSH7IdtIZr1F-bXJb38gPRCRtNZuDDROpIOSbO6w=s150" title="Learn jQuery and JavaScript by creating an apple style thumb Slider" alt="Learn jQuery and JavaScript by creating an apple style thumb Slider">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5329266862456832.html">
Learn jQuery and JavaScript by creating an apple style thumb Slider </a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>Originally started as a programming ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Other city</div>
<div class="ui label">Massachusetts</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
<div class="item">
<div class="ui left floated">
12 July.
<br>0:42
</div>
I tried making a row with cells with semantic-ui but that made things worse. Can you help me?
I want it to look like this (mockup)
Will it work if I make rows and cells?
.ui.left.floated {
min-width: 80px;
}
I am sorry is this what you are after? this will make sure that all the images are aligned? make it 100px as if the date is say.. 31 September (longer wording)
Below is the grid system I use for these sorts of things.
/*________ GRID ________*/
.grid {
margin: 0 auto;
overflow: hidden;
margin-left: -30px;
}
.grid > div {
float: left;
min-height: 1px;
padding-left: 30px;
}
.grid:after {
content: "";
display: table;
clear: both;
}
.grid .third {
width: 33.33%;
}
.grid .halve {
width: 50%;
}
and so on. then when you get down to smaller sizes eg mobiles.
#media (max-width: 740px) {
.grid .third {
width: 100%;
}
}
here's my markup:
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="/images/foo.jpg">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
which will look like this:
the problem however is - when reducing the browser width it will turn out like this:
the image will overflow its container although it should be responsive ..
any ideas what's wrong?
thanks
Wrap the red and grey divs in a DIV tag, not a link. Give the following style to your containing div:
.containing-div {display:block; overflow:auto;}
you are missing the parent class .container form bootstrap. look at bootstrap docs
.container {
border: 1px grey solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="///dummyimage.com/300x600">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
</div>
Would you help me please make appear pictures in one column? It needs to be full width with no space between those images.
Thanks in advance.
What I want it to look like
What I have
Code:
img,
.image {
display: block;
height: 350px;
margin: 0;
width: 50%;
}
<section class="main">
<div class="container">
<div class="full-width">
<div class="vibe_editor clearfix">
<div class="v_module v_column col-md-12 fullwidth v_first">
<style>
<div class="v_module v_text_block about_us">
<p>
<a href="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas.jpg?189db0">
<img class="alignnone size-big wp-image-3125" width="768" height="282" alt="o-nas1" src="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas-768x282.jpg?189db0">
</a>
<a href="http://www.kurzon.cz/wp-content/uploads/2015/10/2048x1536-orange-red-solid-color-background.jpg?189db0">
</p>
</div>
</div>
<div class="v_module v_column col-md-12 fullwidth v_first">
</div>
</div>
</div>
</section>
href="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas.jpg?189db0"> <img class="alignnone size-big wp-image-3125" width="768" height="282" alt="o-nas1" src="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas-768x282.jpg?189db0"> </a> <a href="http://www.kurzon.cz/wp-content/uploads/2015/10/2048x1536-orange-red-solid-color-background.jpg?189db0"> </p> </div> </div> <div class="v_module v_column col-md-12 fullwidth v_first"> </div> </div> </div> </section>
The p tag has padding by default remove it?
Also remove unwanted <style> tag
How can I wrap a glyphicon and a word together so that the icon is centered over or under the word. For an example:
<div class="row">
<div class="span4">
<div style="font-size: 60px;">
<i class="icon-camera-retro"></i> </p>
<h1>Photography </h1>
</div>
</div>
<div class="span4">
<div style="font-size: 60px;">
<i class="icon-camera"></i> </p>
<h1>Rentals</h1>
<p></center></p>
</div>
</div>
<div class="span4">
<div style="font-size: 60px;">
<i class="icon-star-empty"></i> </p>
<h1>Dance Media</h1>
<p></center></p>
</div>
If I understand your question correctly, you need to put text-align: center; in the div that contains the text and the icon. Check out this example: http://jsfiddle.net/rahjU/11/