How to break line if <span> running out the toolbar in angular8 - css

I have this code which bring value and the value description nearby. I need that if the length of the value is long, it won't run out of the toolbar
<div class="tool-bar">
<ul class="pair-list">
<li class="blue-box-field" *ngFor="let param of data.parameters">
<span>{{ param.paramTypeHebName }}</span>
<span>{{ param.valueHebName }}</span>
</li>
</ul>
</div>
</div>


Just add
.tool-bar{
overflow: hidden
}
to your css and that should fix it.
If you just want the line to break try adding following class to the line that you want to break:
.span-break{
word-wrap: break-word;

Related

Pseudo elements don't appear to work in Salesforce lightning CSS

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

Span - 100% width of Parent

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/

Adapting CSS slide out panel example

I am trying to adapt an excellent slideout panel example from here.
adapted code is here
I like to have different icons for hide/expanded state (something like > when hidden, < when expanded). Is it possible by changing the above code. Ultimately I may use icons from Font-Awesome
Thanks.
EDIT:
To be clear on the changes from the original version, the code I plan to use doesn't use the same markup. This is to avoid hindering the history. Please use the version http://codepen.io/jetpacmonkey/pen/ktIJz
<header class="main-header">
<label for="main-nav-check" class="toggle-menu">
☰
</label>
<h1>cssPanelMenu</h1>
</header>

You can using pseudo elements (IE8+). Replace the icon with a span with class .icon and then hook up a :before style to show the content based on whether the checkbox is checked.
Demo
HTML
<label for="main-nav-check" class="toggle-menu">
<span class="icon"></span>
</label>
CSS
#main-nav-check:checked ~ .page-wrap .icon:before {
content:"<";
}
#main-nav-check ~ .page-wrap .icon:before {
content:">";
}

Just change:
<a href="#main-nav" class="open-menu">
☰
</a>
<a href="#" class="close-menu">
☰
</a>
to this:
<a href="#main-nav" class="open-menu">
>
</a>
<a href="#" class="close-menu">
<
</a>
Demo: http://codepen.io/anon/pen/nImtd

span display block makes text after the span drop as well

HTML:
<p>
<a href="#">my
<span>favorites</span>
</a>
(13)
</p>
I want "favorites" to drop after "my", and then to separately style "(13)", which should be on the same line as "favorites".
I tried with the above markup and the following CSS but (13) also drops:
p span a { display: block; }
(13) should stay on the same line as "favorites" so it looks like
my
favorites(13)

How about this?
my<br>favorites<span>(13)</span>
The longer version (more flexibility)
If you don't want a line break, you could use a block element. Now, since block elements aren't allowed inside inline elements (<a>), you should use span tags and style them as block elements.
<a href="#">
my
<span class="second-line">
favorites <span class="count">(13)</span>
</span>
</a>
And the CSS:
a .second-line {
display: block;
}
a .count {
color: #888888;
}

Would this work for you?
<p>
<a href="#">my
<p>favorites <span>(13)</span></p>
</a>
</p>

CSS: question about aligning and lists

i have this page.
Press "Registrate".
Is there any way to align vertically each field with the error message without giving a left margin?
Regards
Javi

You will need to move your error message elements into their corresponding <li class="form_1"> elements. Then, assign float: left; to each error message element.

Putting everything into list-items will be tricky. You could change this:
<li class="form_1_errores">
<ul class="error_list">
<li>Debes escribir tu e-mail</li>
</ul>
</li>
<li class="form_1">
<label for="register_password">Contraseña</label>
</li>
<li class="form_1">
<input type="password" name="register[password]"
id="register_password"></input>
</li>
To This:
<li class="form_1">
<label for="register_password">Contraseña</label>
<input type="password" name="register[password]"
id="register_password"></input>
<ul class="error_list">
<li>Debes escribir tu e-mail</li>
</ul>
</li>
.form_1 label, .form_1 input, .form_1 ul{
float: left;
}

Instead of assign a margin-left to each individual item, give the margin to the containing block. #formulario_registro seems like the best candidate.
Also as I suggested in your other post: There is nothing wrong with layouting forms like this with a table.

Resources