I have values in using ng repeat in span.I got word like in new line like
Actual output:
I used CSS like
border: 1px solid #ECE9E6;
border-radius: 3px;
text-align: center;
font-size: 12px;
padding: 5px 15px;
position: relative;
line-height: 33px;
margin-right: 3px;
word-wrap: break-word;
I want output like:
Instead of using word-wrapover span. I'll suggest you to use display:inline-block in the parent div.
This will make sure your complete inner div will move to next line.
Just make your HTML as below
<div id='mainDiv'>
<span class='tag'>abc</span>
<span class='tag'>lmn</span>
<span class='tag'>xyz</span>
<span class='tag'>etc</span>
<span class='tag'>etc</span>
</div>
Add css as below.
#mainDiv{
width: 200px; // any pixel you want to set;
}
.tag{
display:inline-block;
}
Related
In my mobile theme I have been playing around with the CSS of my tables to make the information clearer and easier to understand for my users.
In column 1 I have a network logo, in column 2 I have text which I have formatted both as (display:table-cell) and given them a border of 1px.
The problem is I can't get them to vertically align exactly I have attached an image to show you exactly what I mean.
http://pasteboard.co/1vII00Yg.png
As its an image in column one when I first inserted it in there it was messed up so I did this in the CSS to try to align it to the adjacent text cells.
HTML
<td class="network-cell">
<center><img alt="EE" src="/wp-content/themes/wootique-child/images/network-logos/ee-logo.png" class="network-logo"></center>
</td>
CSS
.network-logo {
min-height: 30px;
min-width: 30px;
position: relative;
top: 5px !important;
}
.network-cell > center {
border-bottom: 1px solid gainsboro;
border-right: 1px solid gainsboro;
border-top: 1px solid gainsboro;
height: 39px;
position: relative;
top: 5px;
width: 100%;
}
The adjacent cells are formatted differently because they don't contain an image.
For example.
HTML
<td>
<p id="minutes" align="center">300</p>
</td>
CSS
#minutes, #texts, #data, #infinity {
background-color: ghostwhite;
border-color: gainsboro;
border-style: solid;
border-width: 1px;
color: black !important;
font-size: 13px;
font-weight: normal;
line-height: 3em;
padding-left: 1px;
padding-right: 1px;
width: 100%;
}
How can I make the column 1's border align exactly to the border of column 2,3 + 4?
I know I need to change these to classes also - to view the problem scroll to the bottom of the website and select view mobile version.
http://mobilereactor.co.uk/shop/mobile-phones/samsung-galaxy-j1-white-deals/
This question is way more complex than the question you highlighted it
to be a duplicate of, the rules are different and we are talking about
aligning objects formatted as table cells not table cells themselves!
Replace all the id= with class=, as id shouldn't be duplicated. Just remove the <tbody> structure there and replace with the following:
.row {font-family: 'Open Sans', 'Segoe UI', sans-serif; font-size: 10pt;}
.row > div {display: inline-block; vertical-align: middle; height: 40px; background: #f5f5f5; border: 1px solid #ccc; line-height: 40px; padding: 0 10px;}
.row .network-cell {background: #fff; padding: 0;}
.row img {display: inline-block; line-height: 1; vertical-align: middle;}
<div class="row">
<div class="network-cell">
<img class="network-logo" src="http://mobilereactor.co.uk//wp-content/themes/wootique-child/images/network-logos/three-logo.png" alt="Three" />
</div>
<div class="minutes">100</div>
<div class="infinity">unltd*</div>
<div class="data">500MB</div>
</div>
Preview
Try border-collapse: collapse on each offending element. I believe that would be <center> and <img>. border-spacing: 0 may be of use as well. Keep in mind that your metro stylesheet reset the border-collapse: separate, so either place the styles in a <style> block with !important, or use inline, or better yet, assign classes.
With minimal effort:
.network-cell > center {
...
...
top: 6px;
...
...
}
But use table for alignment isn't so good, in this case better div with display: inline-block, and the tag center is deprecated.
I have to generate custom buttons in a row. The problem is when I place the button class inside of a "span" tag, the button shape turns from round to oval. If I place it inside of a "div" tag, it displays fine, but not in a row.
Here is my CSS:
.dashboard-button-green{
height: 27px;
width: 27px;
background-color: #72a017;
border-radius: 50%;
text-align:center;
text-decoration:none;
font-size: 8pt;
font-weight:bold;
margin: 5px 10px 5px 5px;
top:10px;
padding-top: 12px;
padding-left: 10px;
padding-right: 2px;
color:white;
}
Here is my HTML:
<div ng-app="myModule" ng-controller="ContractorCtrl">
<span class="dashboard-button-green">70%</span> <span><img src="~/Images/ContractorWidget/red_cross.png" /></span>
</div>
This is how it renders:
The image on the left should look like the image on the right. I tried changing the line-height, but it didn't help.
Any assistance is greatly appreciated!
It's because the span tag is inline. You need to add display: inline-block to your span to behave more like a button.
You can add this to your css:
span{
display:block;
}
I'm trying to get a signature and date aligned on a certificate I've created in HTML (but will be printed out).
As it currently stands, the fields all collapse onto multiple lines, and I want them all on the same line, like this:
And here's the code:
.sign {font-weight:bold;}
.sign span {width:7cm;border-bottom:0.1em solid #000;display:block;}
<div class="sign">
Signature:<span></span>Date:<span></span>(dd mon yyyy)
</div>
I know the solution is simple I just can't think straight at the moment!
You need to use display:inline-block instead of block. inline-block makes it easy to keep on the same line.
.sign {font-weight:bold;}
.sign span {width:3cm;border-bottom:0.1em solid #000;display:inline-block;}
<div class="sign">
Signature:<span></span>Date:<span></span>(dd mon yyyy)
</div>
(note that i shrunk it to 3cm for this example so that it fits in the snippet)
You need to use inline-block for the display property instead of block.
You just have to display them inline-block I have added the margin to create the desired result
.sign {
font-weight: bold;
}
.sign span {
width: 4cm;
border-bottom: 0.1em solid #000;
display: inline-block;
margin-right: 18px;
}
<div class="sign">
Signature:<span></span>Date:<span></span>(dd mon yyyy)
</div>
Html
<div class="sign">
Signature: <span></span> Date: <span></span>
</div>
Css
.sign {
font-wight: bold;
}
.sign span {
width: 150px;
display: inline-block;
border-bottom: 1px solid #999999;
font-weight: normal;
}
Fiddle Demo
I am trying to get the following result, but cannot get the css correct - I keep getting either a span on a new line, or all of the span's inline.
I've tried messing with display, clear, float, etc. and just can't seem to get this to line up?
I can use table to do this, and it works fine...but think there must be a css way to acheive the same?
<div>
<span class="button">
<button type="button">
CLICK!</button>
</span>
<span class="field">
<span>
Field 1
</span>
<span>
Field 2
</span>
</span>
</div>
.button
{
margin: 1em 10px 0px 0px;
width: 250px;
text-align: right;
display: inline-block;
}
.field
{
margin: 0.5em 0px 0px;
color: #002c5a;
}
Your new css: Change display:inline-block to float:left; in both classes (button & field) and add display:block; to .field span {}.
.button
{
margin: 1em 10px 0px 0px;
width: 250px;
text-align: right;
float:left;
}
.field
{
float:left;
margin: 0.5em 0px 0px;
color: #002c5a;
}
.field span { display:block;}
DEMO
Demo 2 is with more css that looks like you sample!
DEMO 2
Try:
.button,.field{display:table-cell;vertical-align:middle;padding:5px;border:1px solid #ccc;width:50%;}
.button{text-align:right;}
.field{text-align:left;color: #002c5a;}
div{display:table;margin:0 auto;width:100%;}
.field span{display:block;}
DEMO here.
In above attachment, there is problem with last span(last word- "for"); it is actually going out of my gray region(this is actually div tag with class textframe).
I am really not getting the problem. The html code is also shown below. The borders for the <span> are shown because I just want to ask that, there is some gap present between two <span>, is it the reason which causing the last word problem? Then how to reduce this gap?
<div style="left:0pt; top:0pt; width:612pt; height:792pt; position:absolute;" class="page">
<div style="left:103.2pt; top:189pt; width:396pt; height:156pt; position:absolute; background-color:rgb(191,191,191); overflow:hidden; border:0px Solid rgb(0,0,0);" class="textFrame">
<p style="text-align: justify; padding-top: 0pt; padding-bottom: 0pt;">
<span class="ln" style="height: 14.4pt; width: 396pt;">
<span style="font-size: 12pt; font-family: F0; word-spacing: 45.9943pt; width: 197.802pt; letter-spacing: 0em; text-align: left; color: rgb(0, 0, 0); border: 0.1px solid red; display: inline-block;">Subject to the</span>
<span style="font-size: 24pt; font-family: F0; width: 64.9904pt; letter-spacing: 0em; text-align: left; color: rgb(0, 0, 0); border: 0.1px solid green; display: inline-block;">license</span>
<span style="font-size: 12pt; font-family: F0; word-spacing: 45.9943pt; width: 133.208pt; letter-spacing: 0em; text-align: right; color: rgb(0, 0, 0); border: 0.1px solid gold; display: inline-block;">terms for</span>
</span>
</p>
</div>
</div>
You have white-space: nowrap; set for span.ln this will stop it from wrapping when the content gets to the end of its parent element. It would stick out of the parent unless the parent has overflow: hidden; set, in which case the text would be obscured. Remove the white-space: nowrap; rule to allow the spans to wrap. You may also get weird layout issues as the inner spans are display: inline-block; which means they appear as a block element within some inline content, you may want to remove this too.
Unless the spans are actually next to each other in the source any white space will be rendered as a space between them whilst they are either display: inline; which is the default display for span elements or display: inline-block; as the inner spans are set up in this example (the style is visible in the style attribute of the element). To get rid of the space between elements with display: inline-block; set you need to remove the white-space (spaces, tabs and new lines) between the spans in the source.
Personally the thing that worked for me ,
I gave the parent element a "word-wrap: break-word" and the specified the width for the child span element.