When I use the W3-card class, the right side of the element is not always used.
I have set the padding-right to 0px and still same.
What could be reason.
Code below
<div class="w3-content w3-card-4" style="width:500px; padding-right:2px ">
<div class="w3-row">
<div class="col-md-7">
<h2 style="color:blue;"> Logged Out </h2>
<br />
You have Logged Out Successfully. You can <a runat="server" class="w3-badge
w3-purple w3-hover-blue" href="~/Login.aspx">Login</a> here
</div>
</div>
</div>
The issue was the use of that class="col-md-7". it is limiting the usage of the other side.
Got it cracked
Related
I'm implementing a Jumbotron element like this:
<div className="jumbotron">
<div>
<h6 className="display-6">Reset Password</h6>
<p className="lead">We've just emailed you password reset instructions at <u>{this.email && this.email}</u></p>
<hr className="my-4" />
</div>
</div>
Unfortunately, the content overflows the jumbotron, like this:
How do I fix this?
EDIT: Here's another one. The compiled HTML appears like this in my browser:
<div class="container">
<div class="jumbotron">
<h6 class="display-6">Activate account</h6>
<p class="lead"><!-- react-text: 215 -->Please confirm the verification code we've just emailed you at <!-- /react-text --><u>b_kogan#hotmail.com</u></p>
<button class="btn btn-primary">Resend email verification code</button>
</div>
</div>
And, again, it's overflowing:
Here is a quick example of what you have in your HTML and with using bootstrap 4 and everything looks as expected,I think you have different style applied or this is not the rendered html on the browser.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div>
<h6 class="display-6">Reset Password</h6>
<p class="lead">We've just emailed you password reset instructions at <u>{this.email && this.email}</u></p>
<hr class="my-4" />
</div>
</div>
I tried to bind data into a pivotItem using Winjs.ui.repeater dynamically but the debugger throws an error and show the base.js, can anyone pls help me out.
<section class="page-section" aria-label="Main content" role="main">
<div>
<div data-win-control="WinJS.UI.Pivot">
<div data-win-control="WinJS.UI.PivotItem" data-win-options="{'header':'AJJ-MAS'}">
<div data-win-control="WinJS.UI.Repeater" data-win-options="{data: AjjMsb.data}">
<section>
<label data-win-bind="{innerText:trainnumber}"></label>
<p data-win-bind="{innerText:starttime}"></p>
<p data-win-bind="{innerText:endtime}"></p>
</section>
</div>
</div>
<div data-win-control="WinJS.UI.PivotItem" data-win-options="{'header':'AJJ-MSB'}">
</div>
</div>
</div>
</section>
Curly brackets are not required for the data-win-bind property. Let me know if that fixes your problem!
I know similar questions have been asked earlier, but I have tried them and they aren't working. I have a dialog box, with some text and a button, which I need to position in the center of the box. My HTML is given below:
<div id='step3' class='item'>
<div class='row span9'>
<div class="text center"><button id='loginButton' class='btn btn-success' onClick='window.location.reload()'>Login again</button></div>
<small>using your new credentials.</small>
</div>
</div>
I tried placing the button inside a div and used <div style="text-align:center"> but it didn't work. Does anyone know how I could place the button in the center, preferably without adding an external CSS class?
Your class="text center" should be class="text-center", and you also don't need the row tag (it breaks the responsiveness).
<div id="step3" class="item">
<div class="span12">
<div class="text-center">
<button id="loginButton" class="btn btn-success" onClick="window.location.reload()">Login again</button>
<br> <small>using your new credentials.</small>
</div>
</div>
Also you have single quotes '' on most of your markup. Keep in mind this is with an old version of Bootstrap so depending on how wide the viewport is it might not be perfectly center.
I have this:
{{#config.buildings:building}}
<div class="building" id="building-item-{{building}}">
<div class="image-container">
<div class="thumbnail" style="background: transparent url({{staticUrl}}/game_images/town/buildings/{{building}}/{{building}}-1-thumbnail.png) no-repeat center center;"></div>
<div class="cover"></div>
<div class="undercover"></div>
<div class="level">{{village.buildings[building].level + alreadyInQueue(building)}}</div>
</div>
<div class="big_title">{{lang('buildings',building)}}</div>
<p class="{{buildingMaxed(building) ? 'maxed' : ''}}">{{lang('buildings',building+'_description')}}</p>
<div on-tap="upgradeBuilding:{{building}}" class="upgrade-button" tooltip="{{lang('general','upgrade_building')}}"></div>
<div on-tap="downgradeBuilding:{{building}}" class="downgrade-button disabled" tooltip="{{lang('general','downgrade_building')}}"></div>
<div class="resources">
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/woodB.png">
<label class="res-count-wood">{{config.buildings[building][village.buildings[building].level].wood}}</label>
</div>
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/ironB.png">
<label class="res-count-iron">{{config.buildings[building][village.buildings[building].level].clay}}</label>
</div>
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/clayB.png">
<label class="res-count-stone">{{config.buildings[building][village.buildings[building].level].iron}}</label>
</div>
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/workersB.png">
<label class="res-count-builders">{{config.buildings[building][village.buildings[building].level].people}}</label>
</div>
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/timeB.png">
<label class="res-count-time">{{secsToString(config.buildings[building][village.buildings[building].level].time)}}</label>
</div>
</div>
<div class="hr"></div>
</div>
{{/config.buildings:building}}
When I'm using
contentTPL.set('village.buildings[1].level',4)
The only things that update are
<div class="level">{{village.buildings[building].level + alreadyInQueue(building)}}</div>
// and
<label class="res-count-time">{{secsToString(config.buildings[building][village.buildings[building].level].time)}}</label>
I don't seem to understand why the other values don't update on update() as they should. There's no error in the code and I'm using the edge version (same result with the lastest version from 8th of April, 0.4.0).
UPDATE
I have stripped all the unnecessary data, and added a console.log in the alreadyQueued function. It gets called on init, but, when i call contentTPL.update() it doesn't get called anymore. Nothing updates in the file, when pressing the startQueue button. There's another contentTPL.update() when the queue expires, which updates only the level and the time needed as stated above. I'm asking Rich or Marty to advise on this problem as I'm stuck here for about 4 hours and can't seem to understand wether it is my misuse of the library or it's a bug.
It turns out this was a bug, which is now fixed in dev.
Follow up question to achieving hover effect answer, most said that the HTML markup below was abysmal. So I implemented one of their suggestion which is to change tables into divs.
<html>
<head>
<title>Abyssal Warder Fire</title>
<link href="http://225175.edicypages.com/stylesheets/cards.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="pictureholder"><img src="http://lh5.googleusercontent.com/_qvhVKLFln2A/TU-51_bGZ9I/AAAAAAAAEW4/uAmzL3e-vn0/Abyssal%20Warder%20fire.jpg" /></div>
<div class="information">
<div class="Orbs">
<div class="layout">Orbs:</div>
<div class="value"><img src="http://225175.edicypages.com/photos/N.jpg" /><img src="http://225175.edicypages.com/photos/N.jpg" /><img src="http://225175.edicypages.com/photos/N.jpg" /> <i>(3)</i></div>
<div class="Affinity">
<div class="layout">Affinity:</div>
<div class="value"><font color="red">Fire</font></div>
</div>
<div class="Energy">
<div class="layout">Energy:</td>
<div class="value">250</td>
</div>
<div class="Type">
<div class="layout">Type:</td>
<div class="value">Creature <i>(Giant Destroyer)</i></div>
</div>
<div class="Charges">
<div class="layout">Charges:</div>
<div class="value">1</div>
</div>
<div class="Rarity">
<div class="layout">Rarity:</div>
<div class="value">UR</div>
</div>
<div class="Edition">
<div class="layout">Edition:</div>
<div class="value">Lost Souls</div>
</div><br />
<div class="WeaponType">
<div class="layout">Weapon:</div>
<div class="value">L</div>
</div>
<div class="Size">
<div class="layout">Size:</div>
<div class="value">XL</div>
</div>
<div class="Attack">
<td class="layout">Attack:</div>
<td class="value">2500</div>
</div>
<div class="Defense">
<div class="layout">Defense:</div>
<div class="value">2500</div>
</div>
<div class="CardID">
<div class="layout">CardID:</div>
<div class="value"></div>
</div><br />
<div class="Abilities">
<p class="description"><i>
<img src="http://225175.edicypages.com/photos/Activated.jpg" />Crystal Spikes - Activate to ram Abyssal Warder's crystaline fist into the ground. Crystal Spikes will erupt from the ground and within 4 seconds cover a 20m radius. They deal 570 damage to enemies within it, up to 1710 in total that cannot be warded off with the help of damage reducing abilities as the crystals are able to circumvent every buff or protective shield. Knocks back small and medium units. Only affects ground entities. Reusable every 20 seconds. (Power: 80)<br /><br />
<img src="http://225175.edicypages.com/photos/Passive_r.jpg" />Infused Breakdown - Upon dying the unit collapses into pieces that will reassemble on their own to form two large sized Abyssal Warders. If those die their remains will again form to medium sized golems each. All smaller variants of Abyssal Warder are enraged and deal increasingly more damage the longer they attack.
</i></p></div>
</div>
<div class="upgrades">
<div class="Upgrade1">
<div class="L U1"><u>Upgrade I:</u></div>
<div class="V Map1">Empire <br />(<font color="green">Standard</font>)</div><br />
<div class="L HT1">Honor Tokens:</div>
<div class="V HTV1">0</div>
<div class="L VT1">Victory Tokens:</div>
<div class="V VTV1">4</div>
<div class="L BT1">Battle Tokens:</div>
<div class="V BTV1">30</div>
<div class="L PR1">PvP Rank:</div>
<div class="V PRV1">8</div>
</div><div class="Upgrade2">
<div class="L U2"><u>Upgrade II:</u></div>
<div class="V Map2">Empire <br />(<font color="orange">Advance</font>)</div><br />
<div class="L HT2">Honor Tokens:</div>
<div class="V HTV2">0</div>
<div class="L VT2">Victory Tokens:</div>
<div class="V VTV2">30</div>
<div class="L BT2">Battle Tokens:</div>
<div class="V BTV2">60</div>
<div class="L PR2">PvP Rank:</div>
<div class="V PRV2">9</div>
</div><div class="Upgrade3">
<div class="L U3"><u>Upgrade III:</u></div>
<div class="V Map3">Empire <br />(<font color="red">Expert</font>)</div><br />
<div class="L HT3">Honor Tokens:</div>
<div class="V HTV3">40</div>
<div class="L VT3">Victory Tokens:</div>
<div class="V VTV3">70</div>
<div class="L BT3">Battle Tokens:</div>
<div class="V BTV3">120</div>
<div class="L PR3">PvP Rank:</div>
<div class="V PRV3">10</div></div>
</div>
<div class="comments"></div>
Here is before and after the changes. Before I proceed to CSS, is there any html codes I should add or remove? Any div tags I should change?
P.S. I will be using Microsoft Excel to automate more than 500 html pages and uploading them manually one by one, so it is important that I get this right.
Layouts and individual styling should be done in CSS, agreed. However, if within a layout you have tabular data, you should use tables. You don't want to indulge in "divs for divs' sake"!
Looking at your mark-up, it's very "dense"—there are an awful lot of classes specified in there. For ease of maintenance (and your sanity), I'd really try to think about what you're trying to achieve and go from there.
For example, this sort of mark-up, with subtly different (and obscurely-named) classes is a bear to maintain:
<div class="L BT2">Battle Tokens:</div>
<div class="V BTV2">60</div>
Perhaps you could use a list instead; this seems more readable to me, but your mileage may vary:
<li class="tokens">Battle Tokens:<span class="count">60</span></div>
1st of all, it is great that you changed from <Table> to <div>, however!
You have to understand that each tag has it's own purpose, and the fact that you use div for everything, is quite bad HTML etiquette.
Also, the <i>, <font> tags are OBSOLETE, instead of writing your code like that, you can use the styling properties of CSS, for example:
p{font-style: italics}
or if you want to color the element
p{color:red}
and if you already have styled element, it's not a problem adding a sub-style (or an extra style to the element)
<p class='style 1 style2'>bla bla</p>
in this case, the <p> element will make usage of both style1 and style2.
also, I believe that you can be MUCH, MUCH smarter if you'll not create 500 html pages, and you'll make usage of database power, so you could easily change the pages if you'll want later on, and simply parse the pages using simple PHP.
Will be MUCH EASIER than to re-write 500+ html pages in the future, incase you'll want to change the layout.
Sniff around the topics of PHP and MySQL - it might seem a bit tricky at first, but in the long run, it'll make your life much easier.
I'm not sure, this looks pretty tabular for me, so id try working with tables, making sure to use proper semantic.
This is a reference http://www.htmlcodetutorial.com/tables/_THEAD.html
Although I'd work the layout with divs (html/css stuffs)
GL.