I'm trying to populate two columns with some content in the following way (this is expected behavior)
<div id="identifier_0"></div> | <p id="paragraph_0"></p>
|
------------------------------| -------------------------
<div id="identifier_1"></div> | <p id="paragraph_1"></p>
|
|
|
----------------------------- | -------------------------
<div id="identifier_2"></div> | <p id="paragraph_2"></p>
----------------------------- | -------------------------
every paragraph_n is provided by my Rails backend. Every identifier_n is autogenerated on the fly by a javascript script (because they identify the paragraph to the right, which might change because of user input)
I want the paragraphs column to be contenteditable=true as a whole (so users can join paragraphs or split a paragraph into many, or basically edit the text inside) and identifier column to be contenteditable=false, so my javascript is the only one allowed to change them.
Currently it looks like this:
<div id="container" contenteditable="true">
<p id="paragraph_0" class="paragraph"></p>
<p id="paragraph_1" class="paragraph"></p>
<div id="identifier_0" class="identifier"></div>
<div id="identifier_1" class="identifier"></div>
</div>
But this makes both columns, the paragraphs and the identifiers, inherit the contenteditable=true attribute. And I only want the paragraphs column to have it.
Is there a way to do what I want?
Thanks in advance
(Answer in comments ==> just add contenteditable="false" to the identifier_n, and it will do it even if wrapped inside a contenteditable="true" div)
Related
I want to present name, phone and email like this:
| Joe Shmoe | 555-555-5555 |
| | joe#shmoe.net |
And when the name get's too long, I want to wrap like this:
| Josephine | 555-555-5555 |
| Hosssenpfefer | jfine#mail.net |
And when the email get's too long, I want to overflow like this:
| Joe Shmoe | 555-555-5555 |
| someverylongemail#mail.net |
I created this html, which defines a row with two half-width columns. The right hand column has two nested rows, and each of those nested rows has a full width column...
<div class="row">
<h5 class="col-xs-6 list-group-item-heading">Joe Shmoe</h5>
<div class="col-xs-6">
<div class="row">
<p class="col-xs-12 list-group-item-text text-right">555-555-5555</p>
</div>
<div class="row">
<p class="col-xs-12 list-group-item-text text-right" style="color:navy">joe#shmoe.net</p>
</div>
</div>
</div>
This almost works, but as you can see in this fiddle, the bottom nested row won't right-align. (You might need to make the view narrow to see the problem).
I'd like it right aligned just like the nested row above it. Furthermore, when the content is long, I'd like that content (not wrapped) to overflow on the left side, spilling into the left column if necessary.
Can someone give advice? Thanks!
I would try using a table for this. It might need additional styling, but find tables make it easier to handle the longer characters. Is this at all on the right track?
<div class="col-xs-12">
<table class="table">
<tr class=""><td class="col-xs-6">Joe Shmoe</td><td class="col-xs-6 text-right">555 555-5555</td></tr>
<tr class=""><td class="col-xs-6"></td><td class="col-xs-6 text-right">somereallylongemailaddress#reallylongemail.com</td></tr>
</table>
</div>
I'm a noob to html programming, but basically I want to have 3 divisions that look something like this:
| | |
| 1 | 2 |
| | |
-------------------
| |
| 3 |
| |
Right now, I'm using bootstrap and I can have columns beside each other using the div classes. But that only works if I want to do columns. For example:
<div class=col-lg-6>
Also, I can't use a fixed size, because div2 might be bigger than div1 or vice versa depending on the info that I get. Any suggestions to how I can do this?
I'm not entirely sure what you're asking. Did you want something like this?
https://jsfiddle.net/Garconis/zqptbjur/
This is utilizing Twitter Boostsrap CSS:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6" style="background: gray;">
Content1
</div>
<div class="col-xs-6" style="background: wheat;">
Content2
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" style="background: tan;">
Content3
</div>
</div>
</div>
If you don't want to use javascript, you can make those divs have fluid width like 30%, 70% and set their display property to 'inline-block', set the wrapping div's white-space property to 'nowrap'. After that, adding a br tag will drop the third div down. ..or you can just use table layout which I'd never suggest.
In HTML:
<div class="field" ng-repeat="field in fields ">
<strong>{{field.fieldName | json}}: {{field.itemCount | json}}</strong>
<p ng-switch="field.type">
<p ng-switch on="NUMBER">
{{field.numberStats | json}}
</p>
</p>
</div>
Is there a way to specify | json just once somewhere and let the expression to be evaluated correctly?
thanks a lot
json filter is not solution for style issues either worst. Redefine html structure better, as quick fix, try to change all <p> to <div>. And also your markup is incorrect, <p> tag cannot nest
Coding simple php/html/css site based on the CSS grid system at www.cssgrid.net
I have set my headers to display: inline to be able to print `back to top´ links on the same line as my section headers. Like this:
<h2 id="section1">Section 1</h2>
Back to top
This renders as follows (Stackoverflow doesn't support this, so imagine the bold text being a header)
Section 1 Back to top
This is all fine and dandy and just as I want, the problem comes on other places where I use headers, for example in the following context. (Please note that this is not a question weather or not to use CSS grid templates, but a question about headers. So please refrain from any comments about the general structure).
<div class="container" id="main">
<div class="row">
<div class="eightcol" id="first-div">
<h1>This is a header</h1>
<p>This is a p-tag</p>
</div>
<div class="fourcol last" id="second-div">
<div id="twitter">
<p>Twitter here</p>
</div>
</div>
</div>
</div>
This does not render right, at least not according to what I want. This renders as the following mockup shows:
main
--------------------------
| first-div | second-div |
| This is a header |
| This is a | Twitter |
| p-tag | here |
--------------------------
Perhaps not the most artistic ascii-render, but the point is that the header expands into the area of the div floated next to it.
What should I do to make it wrap in its containing div?
Edit:
I've created a fiddle with the code, the error does not occur there though. No idea what's going on. http://jsfiddle.net/nefGZ/
I believe I've found the problem.
If you inspect the header on Chrome (Edit as HTML), this is what you'll get:
<h1>HEJ och välkommen till Basårsmottagningens hemsida!</h1>
It's all those that's preventing the word wrap.
Edit by question author: Always check your copy pasted text, especially when pasting from PDF or Word.
put a
display: inline-block
style on the H1, and I think you will be fine
I have multiple floated blocks. Is it possible to specify which block should be cleared?
Check following structure:
+------------+ +--------------------+
| | |+--------+ +-------+|
| float:left | ||fl left | |fl left||
| | |+--------+ +-------+|
| | |+------------------+|
| | || ||
| | || block that clears||
| | || prev 2 floated ||
| | || blocks but doesn't|
| | || clear first fl. ||
| | || block ||
| | |+------------------+|
| | +--------------------+
+------------+
in html:
<div class="floated-left-column">
left column content
</div>
<div class="right-column">
<div>
<div class="float-left">...</div>
<div class="float-left">...</div>
</div>
<div>
This block should clear only ".float-left" blocks (not ".floated-left-column")
</div>
<div>
Here is some content
</div>
</div>
You need to float the parent block on the right hand side "left" as well. You can float and clear in sub-containers and the parent container will not clear.
I see you added an example now. Float left the DIV "right-column"
This is basic HTML/CSS layout. Take a look at this JSFiddle example.
When you clear a float, it will usually only clear floats within the same container, or lower. This is why when you put something with clear: both into your container at the top level it clears everything.
I have solved it with following html. Thank you for your help. Is it ok solution for my problem (it works but I don't know it works in other browsers and etc.)?
<div class="floated-left-column">
left column content
</div>
<div class="right-column">
<div class="floated-left-with-100-precent-width">
<div>
<div class="float-left">...</div>
<div class="float-left">...</div>
</div>
<div class="clearfix"></div>
</div>
<div>
This block should clear only ".float-left" blocks (not ".floated-left-column")
</div>
<div>
Here is some content
</div>
</div>
This is probably pretty easy to do using bootstrap. If you're designing a new site from scratch, bootstrap's an excellent place to start anyway..