I am trying to center the contents of a tag. This is the div that I am trying to center:
<div class="Paging" style="margin: 0 auto;">
<div class="PageOfPage" style="display:inline-table;padding: 10px;">
Page<label id="CurrentPage">1</label> From #Model.CountPage
</div>
<div class="RecordsOfRecord" style="display:inline-table;padding: 10px;">
Record
<label id="FromRecord">
#{
int i1 = (Model.CurrentPage-1)*Model.CountRecordInPage;
if (i1 == 0)
{
i1 = 1;
}
string recordFrom = i1.ToString(CultureInfo.InvariantCulture);
}#recordFrom
</label>
To
<label id="ToRecord">#Model.CountRecordInPage</label>
From #Model.AllRecord
</div>
</div>
There must be something that I am missing, but I am out of ideas.
just use
<div class="Paging" style="margin: 0 auto; text-align:center;">
Live Demo
Give a width of your div if you want to use margin: auto
.Paging {
width :70%;
margin : auto;
}
add a width to the div!!
or if you want the text to be centered add
text-align:center;
Related
I have array of elements that I want to display, and I want to create this all tiles in same width, and make div 100% width. (In this code the tile sizes are different). Any help is much appreciated.
<div class="summaryArea" align="center">
<div *ngFor="let item of getSummery()">
<kendo-tilelayout [rowHeight]="200" [resizable]="true">
<kendo-tilelayout-item>
<kendo-tilelayout-item-body align="center">
<div class="summary" align="center">
<h4>{{item.amount}}</h4>
<div *ngIf="item.status == 'up'"><span class="k-icon k-i-arrow-60-up k-icon-md" style="color:green"></span></div>
<div *ngIf="item.status == 'down'"><span class="k-icon k-i-arrow-60-down k-icon-md" style="color:red"></span></div>
</div>
<br />
<div>{{item.name}}</div>
<hr />
<div>{{item.Description}} </div>
</kendo-tilelayout-item-body>
</kendo-tilelayout-item>
</kendo-tilelayout>
</div>
</div>
This is my CSS
.summary {
display:inline-flex;
}
.summaryArea {
width:fit-content;
font-size:medium;
display: flex;
}
I tried like this but this not works
<kendo-tilelayout-item [width] ="calculatewidth(getSummery().length)">
Ts file
public calculatewidth(length) {
return 100 / length+'%';
}
what if the width in the .summaryArea area is changed to width : 100%? is the result what you want?
I did it using following code. Thanks All for your effort
<div class="summaryArea">
<div *ngFor="let item of getSummery()" [style.width]="calculatewidth(getSummery().length)">
<kendo-tilelayout [rowHeight]="170">
<kendo-tilelayout-item>
<kendo-tilelayout-item-body align="center">
//content
</kendo-tilelayout-item-body>
</kendo-tilelayout-item>
</kendo-tilelayout>
</div>
</div>
Css
.summaryArea {
width:100%;
font-size:medium;
display: flex;
}
ts
public calculatewidth(length) {
return 100 / length + '%';
}
try by using 25% each because it is 4 box
I have the following data that I want to show.
Ideally I want the keys and values left aligned, separated with colons in the middle.
I want the result to be like the following:
key1 : value1
key2 : value2
keyAbc: Value Abc
key_N : value N
And not like the following:
key1: value1
key2: value2
keyAbc: Value Abc
key_N: value N
How to do this in CSS or SCSS, and not using HTML table?
You can use grid, making the columns take on the max width of content.
This snippet adds the colons in a pseudo element as they seem to be just a visual clue rather than part of the data.
Of course you will want probably to add some padding to suit your particular requirements.
.table {
display: grid;
grid-template-columns: max-content max-content;
}
.table > *:nth-child(even)::before {
content: ":";
}
<div class="table">
<div>key1</div>
<div>value1</div>
<div>key2222222</div>
<div>value2</div>
<div>key3</div>
<div>value3</div>
</div>
Just use the inline-block and make sure the children of the main DIV gets that too and it will automatically resize based on widest width, much like table. No need for flex.
.inline-block {
display: inline-block;
}
.inline-block > div {
margin: 2px;
padding: 1px;
}
<div class="inline-block">
<div>key1</div>
<div>keykey2</div>
<div>key3</div>
</div>
<div class="inline-block">
<div>:</div>
<div>:</div>
<div>:</div>
</div>
<div class="inline-block">
<div>value1</div>
<div>value2</div>
<div>Value3</div>
</div>
If you're using div structure, you can use display: flex and could do something like this:
.css-table {
display: flex;
}
.key {
width: 10%;
}
.val::before {
content: ': ';
}
<div class="css-table">
<div class="key">key1</div>
<div class="val">value1</div>
</div>
<div class="css-table">
<div class="key">key2111</div>
<div class="val">value2</div>
</div>
<div class="css-table">
<div class="key">key3</div>
<div class="val">value3</div>
</div>
<div class="css-table">
<div class="key">key4</div>
<div class="val">value4</div>
</div>
If you don't want to specify width, you'll need use JavaScript to calculate the width and apply it inline.
let maxWidth = 0;
// Calculate maxWidth
document.querySelectorAll('.css-table').forEach(function(cssTableEl) {
cssTableEl.querySelectorAll('.key').forEach(function(keyEl) {
let currWidth = keyEl.clientWidth;
if (currWidth > maxWidth) {
maxWidth = currWidth;
}
});
});
// Apply maxWidth
document.querySelectorAll('.css-table').forEach(function(cssTableEl) {
cssTableEl.querySelectorAll('.key').forEach(function(keyEl) {
keyEl.style.width = maxWidth + 'px';
});
});
.css-table {
display: flex;
}
.val::before {
content: ': ';
}
<div class="css-table">
<div class="key">key1</div>
<div class="val">value1</div>
</div>
<div class="css-table">
<div class="key">key2111</div>
<div class="val">value2</div>
</div>
<div class="css-table">
<div class="key">key3</div>
<div class="val">value3</div>
</div>
<div class="css-table">
<div class="key">key4</div>
<div class="val">value4</div>
</div>
This is my html:
<div style="width: 45%; float: left; margin-left:5%">
<div class="chartHeaderClass" style="width: 100%;">
<h3>Service Level Per Campaign</h3>
<%-- Start Dropdown Code --%>
<a id="DropdownSeviceLink" href="#">+</a>
<div ID="campaignDiv" runat="server" ><ul>
</ul>
</div>
<script type="text/javascript" src="Scripts/DropdownCheckbox.js"></script>
<%-- End Dropdown Code --%>
</div>
<div id="line-chart" class="chart-holder" style="border:1px solid #D5D5D5; margin-top:2px">
<canvas class="overlay" width="479" height="265"></canvas>
</div>
</div>
<div style="width: 45%; float: right">
<div class="chartHeaderClass" style="width: 100%;">
<h3>Calls Per Campaign</h3>
</div>
<div id="pie-chart" class="chart-holder" style="border:1px solid #D5D5D5; margin-top:2px">
<canvas class="overlay" width="479" height="265"></canvas>
</div>
</div>
notice that it has this div campaignDiv which I fill in c# like this:
if (!IsPostBack) {
List<string> comps = getCompainNames();
string html = "<ul>";
for (int i = 0; i < comps.Count(); i++) {
html = html + CreateLiCheckbox(comps[i]);
}
html = html + "</ul>";
campaignDiv.InnerHtml = html;
}
private string CreateLiCheckbox(string checkBoxText)
{
return string.Format("<li><input type=\"checkbox\">{0}</li>", checkBoxText);
}
This result is this:
I can't click on the checkboxes. In other words, when I click on them nothing happens
I noticed something
I can't select the text inside the red area. It seems that it is not exit because when I tried to select it using the mouse, nothing becomes selected.
could u help please?
css for this red area is
#DropdownSeviceLink {
float:right;
margin-right:10px;
}
a#DropdownServiceLink:visited {
color:inherit;
}
#campaignDiv {
background-color:red;
width:200px;
height:200px;
float:right;
position:relative;
}
Finally the context of my page is
when clicking on that plus sign, I want to show this red area, I can do that on jquery, but I just told you the context maybe that helps
jsfiddle
http://jsfiddle.net/jdhMs/
I had this exact same issue in my application and it turned out that the div I had my checkboxes in was being overlapped by the footer of the modal box. Since the footer of the modal box was white/transparent, this wasn't evident until I added a border around the footer. Only then I was able to see that I could see the checkboxes but couldn't actually select them.
I don't know its work or not but try Z-Index.
Example:
#campaignDiv {
Z-Index:100;
}
li{
Z-Index:101;
}
I'm dynamically adding select dropdowns with jquery into a div. I would like to begin with the div centered and then as the new dropdowns are added to move out from the center outwards.
Here is the CSS for the divs:
#pageMiddle{
width:940px;
margin:0 auto;
text-align: left;
position:relative;
}
#searchBar{
background: red;
width:500px;
margin: 0 auto;
}
#searchwrapper{
width:850px;
background: blue;
}
#searchwrapper form {
display:inline ;
margin: 0 auto;
}
and the actual HTML:
<div id="pageMiddle">
<div id="holder">
<div id="searchBar">
<div id="searchwrapper">
<form name="search_input">
I am looking for a
<div id="sBar1" style="display:inline;">
<select id="search_level" class="selectSearchBar" name="search_level">
<?php echo "<option>Level</option>";
while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){
echo "<option value=".$row['id'].">".$row['level']."</option>";
}?>
</select>
</div>
<div id="sBar2" class="selectSearchBar"></div>
<div id="sBar3" class="selectSearchBar"></div>
tutor in
<input type=text class="searchbox" id="location" value="Location"/>
<input type=image src="images/search_icon.png " class="searchbox_submit" name="searchbox_submit" onclick="searchLocations()" value=""></form>
</div>
</div>
</div>
</div>
I assume you mean something like this?
Notice the blue section is centered in the red section. This was done with the table display, which allows something of indefinite size to be centered via automatic margins. Otherwise, it must be a block element and have a definite size.
#searchwrapper
{
display: table;
margin: 0 auto;
}
<?php echo "<option style="text-align:center;">Level</option>";
while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){
echo "<option value=".$row['id'].">".$row['level']."</option>";
}?>
Let me know if this works please.
I'm using twitter bootstrap and also it's responsive design. When I shrink my browser (Chrome) or view the below code in my iPhone browser, the text all appears on one line. However, when I increase the font size to 20px, the text wraps underneath the image. What can I do in order to have the the text (when it is 2 lines long) appear to the right of the icon/image instead of wrapping beneath it?
<div class = 'row'>
<img src = "http://a286.phobos.apple.com/us/r1000/113/Purple2/v4/a2/b1/40/a2b14050-c4be-4243-2cad-7dc1fcaec726/mzl.vkophohs.png" style = "width:60px;">
<span style = "font-size:18px;">The Hobbit: Kingdoms of Middle-earth<br /></span>
</div>
I would do the same as Nik but a bit differently:
http://jsfiddle.net/gkxz4/
<div class = 'row'>
<div class="col_image">
<img src = "http://a286.phobos.apple.com/us/r1000/113/Purple2/v4/a2/b1/40/a2b14050-c4be-4243-2cad-7dc1fcaec726/mzl.vkophohs.png" style = "width:60px;">
</div>
<div class="col_text">The Hobbit: Kingdoms of Middle-earth</div>
</div>
.row { width:400px; overflow:hidden; }
.col_image { float:left; width:60px; margin:0 20px 0 0; }
.col_text {float:left; width:320px; font-size:18px;}
<div class = 'row'>
<img src = "http://a286.phobos.apple.com/us/r1000/113/Purple2/v4/a2/b1/40/a2b14050-c4be-4243-2cad-7dc1fcaec726/mzl.vkophohs.png" style = "width:60px; float:left; padding-bottom:30px;">
<span style = "font-size:20px; vertical-align:middle; line-height: 30px; ">The Hobbit: Kingdoms of Middle-earth<br /></span>
</div>
<div class="row">
<img src="http://a286.phobos.apple.com/us/r1000/113/Purple2/v4/a2/b1/40/a2b14050-c4be-4243-2cad-7dc1fcaec726/mzl.vkophohs.png" style="width:60px;float:left;">
<div style="float:left;">The Hobbit: Kingdoms of Middle-earth<br/></div>
</div>