I have the following structure within a bootstrap document -
<div class="col-lg-6 col-sm-6>
<ul class="stdULGrey st_tabs_ul">
<li class="st_li_first st_li_active">
<a href="#view_1" class="st_tab st_tab_first st_tab_active">
<span class="icoMore icoA"></span>
<span class="tabText">WANT TO KNOW MORE?</span></a>
</li>
<li>
<a href="#view_2" class="st_tab">
<span class="icoWhereTo icoA"></span>
<span class="tabText">WHERE TO FIND US?</span>
</a>
</li>
</ul>
The span element - icoMore contains a background image - which I'd like to respond to the full width of thebootstrap parent - I have tried the following code -
.icoMore{background:url(../img/logos%20and%20icons/Wanttoknow_Icon_Off.png) no-repeat; min-width:100%; min-height:auto; display:block; }
But it displays at zero width and height - can anyone advise a solution?
Add display: block to span. It should be enough.
You'll need to add any character into your <span>, even a space, like:
<span> </span>
Check this fiddle:
http://jsfiddle.net/dimaspante/5j6vt0mk/
Related
I have a list group that holds a bunch of attributes, but when I clarify that the last element within that group hold a margin of 0, the output doesn't match.
The Salesforce HTML:
<aura:iteration items="{!v.IdeasList}" var="idea">
<li class="list-group-item">
<a href="{!v.ideaDetailPath + idea.Id }" class="anchorLink">
<div class="prodname">{!idea.Title}</div>
</a>
<div class="ideaInfo">
<span class="points">{!idea.VoteTotal} points </span>
<span style="padding-right:24px;">
<span class="status">
{!idea.Status}
</span>
</span>
<span class="createdDate"><ui:outputDate value="{!idea.CreatedDate}"/></span>
<!--span class="slds-avatar slds-avatar_circle slds-avatar_small">
<img src='{!idea.CreatorSmallPhotoUrl}'/>{!idea.CreatorName}</span>
<span class="slds-text-title_bold">
<a class="profileName" href="javascript:void(0)"
id="profile-link"
data-createdByValue="{!idea.CreatedById}"
onclick="{!c.openProfileWindow}">
{!idea.CreatorName}</a></span-->
<a class="slds-text-title_bold profileName" id="profile-link" data-createdByValue="{!idea.CreatedById}" href="javascript:void(0);" onclick="{!c.openProfileWindow}">
<span class="slds-avatar slds-avatar_circle slds-avatar_small slds-m-right_x-small">
<img src="{!idea.CreatorSmallPhotoUrl}"/>
</span>{!idea.CreatorName}
</a>
</div>
<div class="slds-border_bottom">
</div>
</li>
</aura:iteration>
The Salesforce CSS:
.THIS .list-group-item {
font-size: 12px;
list-style: none;
width: 100%;
margin-bottom:24px;
}
.THIS .list-group-item:last-child{
margin-bottom:0;
}
Does that mean pseudo elements (specifically last-child in this case) don't work in Salesforce Lightning CSS?
It seems that the only thing that works is :nth-last-child(2) - because for some reason, :last-child doesn't acknowledge that the last item is actually the last item.
I did a search within the HTML to check that there was no other element after the element I was hoping to edit via CSS, but there wasn't. Seems as though this is a salesforce bug? Anyway,s :nth-last-child(2) worked instead of :last-child
The picture is the layout that I want but when you hover, everything gets messed up. The div's start shifting around and moving horizontally when the next div italicizes. How can I maintain this exact layout 100% of the time?
.project-link {
font-family: 'UtopiaStd';
color:#010202;
font-size:5.6vw;
white-space:nowrap;
text-decoration:none;
margin-right: 3%;
line-height:125%;
border-bottom: solid transparent 2px; }
https://jsfiddle.net/zjkouzbo/1/
Solution 1:
You had the right idea with trying white-space:nowrap. To keep your first two links together and keep them on one line, wrap them in a parent element and apply the white-space:nowrap to that parent element. If you have that on both the anchor elements and the parent elements, then you won't break the lines in the middle of a link or between them.
<div class="line">
<a class="project-link" id="one" href="#modal1">Maru speaker design <span> (1) </span> </a>
<a class="project-link" id="two" href="#modal2">Lights — Out <span> (2) </span></a>
</div>
CSS
.line{
white-space: nowrap;
}
New fiddle: https://jsfiddle.net/zjkouzbo/2/
Solution 2:
Place a non-breaking space between the anchor elements that you want to keep on the same line using the HTML entity . Just make sure that you take out any other spaces, including line breaks, between the two elements. This makes your code a little annoying to read, but it doesn't suffer from the "div-itis" that solution one does.
<a class="project-link" id="one" href="#modal1">Maru speaker design <span> (1) </span> </a> <a class="project-link" id="two" href="#modal2">Lights — Out <span> (2) </span></a>
Second fiddle: https://jsfiddle.net/zjkouzbo/3/
Since the <a> tag is an inline element, it will adjust which 'line' it is on as the parent block element changes width, or in your case the link width changes size. If you want to keep a the particular layout where link 1 and 2 are on the same line, but different lines from the rest, you should organize each group in a block element.
<div class="project_miniwrap">
<div class="group-block">
<a>Link 1</a>
<a>Link 2</a>
</div>
<div class="group-block">
<a>Link 3</a>
<a>Link 4</a>
</div>
</div>
adding
display:inline-block
and removing the line breaks you added to project-link solves the issue.
https://jsfiddle.net/70dceskq/1/
I want make a list with a few names.
But i need put all in same size.
How i can make that background with same size using bootstrap?
<ul class="list-unstyled">
<li>
<a class="btn btn-xs btn-warning">
<span >Loren ipsum</span>
</a>
</li>
<li>
<a class="btn btn-xs btn-warning">
<span >Lorem ipsunis</span>
</a>
</li>
<li>
<a class="btn btn-xs btn-warning">
<span >Lorem ip</span>
</a>
</li>
</ul>
Code in jsfiddle
http://jsfiddle.net/novasdream/d3fkoeee/
You'll need to set a width or min-width on those elements. Min-width is a little safer if the button content has the potential to get long. Something like this in your css would do it:
.btn-xs {
min-width: 15em;
}
Note: 1em is roughly the width of one "M" character in the font in use, so I'd recommend looking at your actual text content to find an appropriate width. (15 is just a number I grabbed out of the air.)
Also, bear in mind that this style, if authored as above, will apply to any .btn-xs elements. If you want finer-grained control, you'll probably want to put a specific class on either these buttons or their containing list, so you can target only this instance.
Make the .btn links display:block so that they become 100% the width of the parent li. Size your ul as required.
.list-unstyled li a.btn {display:block;}
http://jsfiddle.net/d3fkoeee/4/
a better way would be to add an id to the link a like so http://jsfiddle.net/1shzc3bh/1/ and add a width there
e.g. a#button{width:100px;!important
}
I have modified my bootstrap skeleton top nav to this: http://jsfiddle.net/55dTU/
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">SketchFemme</a>
<div class="brand slogan">
<span>pencial mileage</span><br>
<span>one curve at a time</span>
</div>
<div class="container nav-collapse">
<ul class="nav">
<li>Artists</li>
<li>Onion Skin</li>
<li>News</li>
<li>About</li>
</ul>
<ul class="nav" id="account_corner">
homonolocus
<span class="divider">|</span>
Settings
<span class="divider">|</span>
Sign out
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Bootstrap .container sets the width to 1170px. Can someone please tell me why the .container.nav-collapse div can be nested inside .navbar-inner .container and somehow overlap the .brand and slogan? I would think since every instance of .container is the width of 1170px, that the .nav links would be forced into the next line instead of being on the same line as the brand and slogan.
My question isn't so much that I need something to be fixed. Rather I'm asking for an explanation of why this works. Why can one .container contain another .container, of the same width right on top of it. I was looking for a position:absolute which would allow that, but I don't find any. How does the ul.nav know where to indent?... there is no left padding and no left margin, and the containing element spans the entire width of the navbar. I want to know how this is being achieved.
I updated your fiddle ; I added
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
height: 1px; /* These */
clear:left;
}
It makes the container act like a real block: its display is set to block by default, but as its height was 0px, it didn't act like a block but rather as an inline-block.
The clear:left; also cancel any floating conflict (I put both in the fiddle without thinking, but hey, it's 6:30 am here in France).
Since you are using a responsive navbar, is there a reason why you aren't also using a responsive CSS file so the navbar collapses? I replaced your CSS file with
#import url('http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css');
In the account_corner div you have ul but no list items. I replaced the ul with a plain div. Also, if you are following the example from http://twitter.github.io/bootstrap/components.html#navbar the div with your main links should have these classes
<div class="container nav-collapse">
Which partly answers your question.
This is the result http://jsfiddle.net/panchroma/ruAmz/ ?
Hope his helps get you closer to what you want!
I have the following code which is created with a datalist control:
http://jsfiddle.net/vmE2E/1/
But i am unable to float the to ULs side by side with padding in between.
Please can you help?
edit: added code
<span style="display:inline-block;background-color:Transparent;border-color:#404040;border-style:None;" id="DataList1"><span style="color:Transparent;background-color:Transparent;">
<ul class="latest-posts">
<li>
<a href="http://www.site.co.uk/blog/post/using-jquery.aspx">
using jquery<br>
</a>
</li>
</ul>
</span><br><span style="color:Transparent;background-color:Transparent;">
<ul class="latest-posts">
<li>
<a href="http://www.test.co.uk/First-Blog-Post.aspx">
First Blog Post<br>
</a>
</li>
</ul>
</span></span>
css
ul.latest-posts
{
width:500px;
border:1px solid black;
}
ul li.latest-posts
{
float:left;
}
That is some unusual/unnecessary use of markup (inline block span, span used as containers for block elements, etc). Simply removing that <br> will put your sections next to one another (but not because they float but because they are span, meaning they stay inline)
see fiddle for code and demo
Fiddle: http://jsfiddle.net/vmE2E/2/
Demo: http://jsfiddle.net/vmE2E/2/embedded/result/