I use the following code, but it seems can not clear the float.
How to clear or close the pull-float or how to correctly use left-float and right-float in Bootstrap v3?
`
text
网站导航
|
人才招聘
|
企业邮箱
|
旗下公司
`
<div class="container">
<div class="pull-left">text</div>
<div class="pull-right">...</div>
<div class="clearfix"></div>
</div>
Related
I hope you are good.
I'm having trouble to customise my label with amcharts.
I'm trying to put on a map, the date and the place of an event as a label like that:
https://codepen.io/acivita/pen/BarvPzZ
<div class="main2">
<div class="container">
<div class="element">713</div>
<div class="element2">Pampelune</div>
</div>
</div>
When I exported this code on amcharts, it works well but it's too big:
https://codepen.io/acivita/pen/KKobeXm
var label = labelSeries.mapImages.create();
label.latitude = element.latitude;
label.date = tmpData[0].eventInfo.date;
label.city = tmpData[0].eventInfo.specific;
label.longitude = element.longitude;
label.interactionsEnabled = false;
label.children.getIndex(0).html = `
<div class="main2">
<div class="container">
<div class="element">713</div>
<div class="element2">Pampelune</div>
</div>
</div>`
Example :
I added a red background to see why it wasn't aligned with the dot.
https://codepen.io/acivita/pen/vYRmzgO
So when I try to reduce it, there are some issues:
the text is not vertically aligned anymore.
it seems to have some margin .
It looks like if I put too small properties for my text the behaviour get weird.
It may be a css/html error because I'm not very good at positioning stuff.
Thanks for the help and have a nice day.
I want to preserve white space to keep every column align properly.
But sidebar auto remove any extra space, could someone give me some advise on this.
Google Sidebar
function Test1() {
var lineBrk = "<br />"
var aValues = "```"+lineBrk+
"BLB001| APPLE | O/B | 100.00"+lineBrk+
"AG010 | ORANGE| O/B | 125.25"+lineBrk+
"B123 | KIWI | O/B | 95.00"+lineBrk+
"```"
// Display a modal dialog box with custom HtmlService content.
var htmlOutput = HtmlService
.createHtmlOutput(aValues);
SpreadsheetApp.getUi().showSidebar(htmlOutput);
}
Sidebars are created using the Google Apps Script HTML service, that means that they use html and that is why Serge included a link to a question regarding the use of . Another alternative is to enclose the text lines on <pre> tags.
Below is an adaptation of the code that builds the html output to work on the stack snippet.
var lineBrk = "</pre><br />"
var aValues =
"<pre>BLB001| APPLE | O/B | 100.00"+lineBrk+
"<pre>AG010 | ORANGE| O/B | 125.25"+lineBrk+
"<pre>B123 | KIWI | O/B | 95.00"+lineBrk;
document.write(aValues);
If you're looking to display plaintext, Ruben's answer above would work. If you want some kind of formatting, using simple HTML layout styles will help.
You could interpret your table example as the following HTML:
<div id="table">
<div class="row">
<div class="col">BLB001</div>
<div class="col">Apple</div>
<div class="col">0/B</div>
<div class="col">100.00</div>
</div>
<div class="row">
<div class="col">AG010</div>
<div class="col">Orange</div>
<div class="col">0/B</div>
<div class="col">125.25</div>
</div>
<div class="row">
<div class="col">B123</div>
<div class="col">Kiwi</div>
<div class="col">0/B</div>
<div class="col">95.00</div>
</div>
</div>
Then, either in a style tag or a linked CSS file, set the display:
#table {
display: table;
table-layout:fixed;
width: 300px; /* This could be any width you'd like */
font-family:monospace;
}
.row { display: table-row; }
.col { display: table-cell; }
You can also set borders, if you want them. The nice thing about using this method is that you can populate any number of rows or cells using an apps script loop if your data is variable.
Here's a very simple CodePen demo showing the layout only.
I have some rendered data, and I want to display it "in table".
How can I implement this using CSS? (Maybe flex could help me)
<div class="test">1</div>
<div class="test">2</div>
<div class="newRow">3</div>
<div class="test">4</div>
<div class="newRow">5</div>
<div class="test">6</div>
Expected result, something like this:
1 3 5
2 4 6
*
Divs are rendered by angular2 loop (ngFor). There may be 2 or more. I need more dynamic solutions which would be depends on "class="newRow"" - end of row.
Perhaps try this:
<div>
<div class="test">1</div>
<div class="test">3</div>
<div class="test">5</div>
</div>
<div>
<div class="test">2</div>
<div class="test">4</div>
<div class="test">6</div>
</div>
CSS:
.test{
display:inline;
}
Fiddle here: https://jsfiddle.net/d0Ltnenp/2/
My target is to search my notes by Title and truncate Body by a letters or words limit. I don't know if its possible to do that and how. I don't want to mess up with any custom filters , directives etc.
This is a idea of the html:
<section class="notespage" ng-controller="NotesController">
<h2>Notes list</h2>
<div>
Search:
<input type="text" ng-model="searchText">
</div>
<div class="notesleft">
<div class="notelist">
<div ng-repeat="note in notes | filter:searchText | truncate:{body:letterLimit}">
<div><h3>{{note.title}}</h3></div>
<div>{{note.body}}</div>
</div>
</div>
</div>
</section>
Where this should be ? In NotesController ?
$scope.letterLimit = 20 ;
Since you don't want to "mess up" with custom filters etc, you can use the built-in limitTo filter to limit the number of characters displayed as note.body:
$scope.letterLimit = 20;
<div>Search:<input type="search" ng-model="searchText" /></div>
<div ng-repeat="note in notes | filter:searchText">
<div><h3>{{note.title}}</h3></div>
<div>{{note.body | limitTo:letterLimit}}</div>
<div>
See, also, this short demo.
JQueryMobile offers the capability to group buttons either horizontally:
BtnA | BtnB
or vertically:
BtnA
----
BtnB
via the controlgroup configuration.
Is the following set up, involving both horizontal and vertical placement, possible:
BtnA | BtnB
-----------
BtnC | BtnD
If yes, how? Any alternatives to controlgroup in this case?
Try Using JQM content grid Like this:
<div class="ui-grid-a">
<div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div>
<div class="ui-block-b"><button type="button" data-theme="c">Next</button></div>
<div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div>
<div class="ui-block-b"><button type="button" data-theme="c">Next</button></div>
</div>
Heres a demo: http://jsfiddle.net/ashanova/kkf9w/
Heres the JQM docs: http://jquerymobile.com/test/docs/content/content-grids.html