I have the following code being generated in a c# asp.net mvc application:
<div class="col-5">
<div class="row">
<div class="col-9">
<div class="card">
<div class="card-body">
<h5 class="card-title">You are currently saving a total of <b>15%</b> of your paycheck</h5>
<hr />
<p class="card-text" style="font-size: smaller">
<b>Pre-tax</b><br /><b>9.00%</b> per paycheck<br />Est. <b>$93.75 bi-monthly
</p>
<hr />
<p class="card-text" style="font-size: smaller">
<b>Roth</b><br /><b>6.00%</b> per paycheck<br />Est. <b>$62.50 bi-monthly
</p>
<hr />
<button class="btn btn-primary btn-lg btn-block" type="submit" id="submitButton">Review and Submit</button>
</div>
</div>
</div>
</div>
</div>
I have no custom css files and I am making use of all generic bootstrap css files.
This is what it looks like when the page is generated:
In the card on the right, the Pre-Tax literal, the percent, and the dollar amount and literal are bold. The text "per paycheck" and the text "Est." are not. But it looks like the entire section for "Roth" is all bold. Any suggestions as to why this is happening? I am trying to get the bolding for the "Roth" section to be the same as the "Pre-tax" section.
Any help is greatly appreciated. Thank you.
Related
I'm having trouble trying to push the containers inside my two columns layout. Right now it aligns which means that there are gaps between a container if it happens to be longer than other containers.
Here is the picture that hopefully explains it further
Below is the code of this part:
<section class="maincontent container container-fluid">
<!-- BOX 1 -->
<article class="servicestatus container container-fluid col-xs-12 col-md-6 float-md-left">
<a id="aservicestatus"></a>
<div class="container">
<span class="sprite icon"></span>
<h3>Service Status Notifications</h3>
<j:while test="${ou.next()}">
<j:if test="${ou.type!='planned'}">
<div class="statusitem">
<j:if test="${ou.type=='outage'}">
<span class="status red">Outage</span>
</j:if>
<j:if test="${ou.type=='degradation'}">
<span class="status yellow">Degradation</span>
</j:if>
<j:if test="${ou.type=='informational'}">
<span class="status green">Informational</span>
</j:if>
<h5>${ou.short_description}</h5>
<p class="subheader"><strong>Start Date</strong> <em>- ${ou.begin.getDisplayValue()}</em></p>
<p class="subheader">${ou.u_outage_details}</p>
</div>
</j:if>
</j:while>
</div>
</article>
<!-- BOX 2 -->
<article class="plannedoutages container container-fluid col-xs-12 col-md-6 float-md-right">
<a id="aplannedoutages"></a>
<div class="container">
<span class="sprite icon"></span>
<h3>Scheduled Maintenance</h3>
<j:while test="${mn.next()}">
<j:if test="${mn.type=='planned'}">
<div class="outageitem">
<p class="subheader"><strong>${mn.cmdb_ci.name}</strong></p>
<p class="subheader">From: <em>${mn.begin.getDisplayValue()} - ${mn.end.getDisplayValue()} </em> </p>
<p class="subheader">${mn.u_outage_details}</p>
</div>
</j:if>
</j:while>
</div>
</article>
<article class="wifi container container-fluid col-xs-12 col-md-6 pull-md-right">
<a id="awifi"></a>
<div class="container">
<span class="sprite icon"></span>
<h3>Wifi Information</h3>
<div class="container">
<j:if test="${bt.next() || bt.getRowCount() > 0}">
<j:if test="${bt.u_omers_company=='oxford'}">
<p class="subheader">Please follow these Instructions</p>
</j:if>
<j:if test="${bt.u_omers_company!='oxford'}">
<p class="subheader">Please follow these Instructions</p>
</j:if>
</j:if>
</div>
</div>
</article>
<!-- BOX 3 -->
<article class="windows10 container container-fluid col-xs-12 col-md-6 pull-md-right">
<a id="awindows10"></a>
<div class="container">
<!--<span class="sprite icon"></span> -->
<img src="win10icon.png" width="62" height="63"/>
<h3>Exchange/Win 10 Information</h3>
<div class="container">
<p class="subheader">IT Team is pleased to announce the deployment of Windows 10 with Office Professional Plus and Outlook Exchange Online (part of the Microsoft Office 365 platform). You can get regular updates here.</p>
<p></p>
<!--<p class="subheader">For those who would like to preview it prior to receiving the Windows 10 upgrade, please click here.</p> -->
<p class="subheader">We are pleased to inform you that your Office suite has been updated to a new version (1808).</p>
<p class="subheader">This will enable new collaboration features like <B>Document collaboration and co-authoring, AutoSave for Teams and OneDrive files, Improved cell and formula bar editing</B>, etc.</p>
<p></p>
<p class="subheader">To ensure your upgrade is complete:</p>
<p class="subheader">1. <B>Close</B> all open Microsoft apps. </p>
<p class="subheader">2. <B> Relaunch</B> any Microsoft Office desktop app (e.g. Word, PowerPoint, Excel, Outlook) </p>
<p class="subheader">3. <B> Check</B> that you have the right version. Go to <B>File > Account</B>, and look under Product Information for <B>"Version 1808"</B> </p>
<p></p>
<p class="subheader">Please see full release notes here.</p>
</div>
</div>
</article>
<!-- BOX 4 -->
<article class="hoursofoperation container container-fluid col-xs-12 col-md-6 float-md-right">
<a id="ahoursofoperation"></a>
<div class="container">
<span class="sprite icon"></span>
<h3>Hours of Operation</h3>
<j:if test="${be.next()}">
<j:if test="${be.u_omers_company=='oxford'}">
<p class="subheader"><B>Regular Operating Hours: </B> <em>Monday to Friday – 8AM to 8PM ET</em></p>
<p class="subheader"><B>After-Hours Emergency Support: </B> <em>Monday to Friday – 8PM to 11PM ET Saturday to Sunday – 10AM to 7PM ET</em></p>
<p class="subheader"><B>Telephone: </B> <em>416-865-8349</em></p>
<p class="subheader"><B>Email:</B> Service Desk</p>
</j:if>
<j:if test="${be.u_omers_company=='omers'}">
<p class="subheader"><B>Regular Operating Hours: </B> <em>Monday – Friday 7am to 7pm ET</em></p>
<p class="subheader"><B>24/7 on call support: </B> <em>available outside of business hours (by phone only). For urgent issues requiring immediate attention, please call the Service Desk instead of emailing. Depending on volumes being handled by the team, it may take up to 24 business hours for the Service Desk to respond to emails. Outside of normal business hours, the Service Desk phone line is automatically redirected to 24/7 on call support.</em></p>
<p class="subheader"><B>Telephone: </B> <em>416-814-6555, option 1 </em></p>
<p class="subheader"><B>Email:</B> Service Desk</p>
</j:if>
</j:if>
</div>
</article>
<!-- BOX 5 -->
<article class="ITsupport container container-fluid col-xs-12 col-md-6">
<a id="ITsupport"></a>
<div class="container">
<img src="/Facility_logoMobile.png" height="45px"/>
<h3>Facilities Portal</h3>
<p class="content"> From here you can submit a request relating to new office furniture, security cards, confidential shredding services or to request an ergonomic consultation.</p>
Go >
</div>
</article>
</section>
I'm setting up a User Interface using a simple database and angular, where users can post a message, either with only a message, or with a picture attached to the message.
By doing some research, I found out about the built in ngIf conditions, where you can display variables if the variable doesn't hold a null value.
Here is my code and the output:
<div ng-repeat="m in chatDetailsCtrl.messageList">
<!-- This card prodives space for the message and Like/dislike buttons -->
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-content">
<!-- Card Title is the person who wrote the message -->
<span class="card-title">{{m.user_ID}}</span>
<!-- Here comes the message text -->
<p> {{m.post_msg}}
<div> <span class="new badge light-blue">{{m.post_date}}</span></div>
<p *ngIf="m.photo_url">
<img src="{{m.photo_url}}" width="100" height="100">
</p>
{{m.post_date|date("m/d/Y")}} -->
</p>
<td><a class="waves-effect light blue lighten-1 btn-small" ng-click="chatDetailsCtrl.postDetails(m.post_ID)">Post Details</a></td>
</div>
<div class="card-action">
<a class="btn-floating btn-small waves-effect waves-light blue" ><i class="material-icons">thumb_up
</i></a> <span ng-bind= "m.likes"> </span>
<a class="btn-floating btn-small waves-effect waves-light blue"><i class="material-icons">thumb_down
</i></a><span ng-bind="m.dislikes"> </span>
</div>
</div>
</div>
</div>
</div>
I want to see if m.post_url contains a value. When null, I want to skip adding this variable to my website.
For example, last post, without a picture, I want it to look like this:
Sorry for my bad english, english is not my first language.
first of all, you are mixing angularJs syntax with new angular.
if you are using angularjs use ng-if in your image tag. it works properly.
as I can see you are using ng-repeat and ng-bind you are using angularjs and not angular.
so in your image tag use
<p ng-if="m.photo_url">
<img src="{{m.photo_url}}" width="100" height="100">
</p>
Hi this is the code I am using to display my directory info. Is there a way to have the part called {{Email Address}} show as a hyperlink in the directory?
<div class="aboutcontainer">
<div class="photocontainer">
<img src="{{Picture}}" width="100%">
</div>
<p class="aboutname">
<b>{{First Name}} {{Last Name}}</b>
</p>
<p class="department">{{Department}}</p>
<div class="infocontainer">
<div class="basicinfocontainer">
<b>Infos</b>
<p class="info">
<b>Country</b>: {{Country}} <br>
<b>Department</b>: {{Department}}<br>
<b>Position</b>: {{Position}}<br></p>
</div>
<div class="basicinfocontainer">
<b>Contact</b>
<p class="info">
<b>Email</b>: {{Email Address}}<br>
<b>Phone Number</b>: {{Phone Number}}<br></p>
</div>
</div>
</div>
You can make a hyperlink by replacing
<b>Email</b>: {{Email Address}}<br>
with
<b>Email</b>: {{Email Address}}<br>
This question already has answers here:
What is XHTML role attribute? What do you use it for?
(3 answers)
Closed 8 years ago.
I have created a web page using html5.
I used source code from bootstrap.
For example: role="main", role ="navigation", role = "document" etc.
If I remove these attribute from my code, page didn't any change.
So I want to know: what is the purpose of "role" attribute?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Raleway:900,500,600,200,400,700' rel='stylesheet' type='text/css'>
<title>Layout</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body role="document">
<!-- Fixed navbar -->
<div class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<h1><img src="img/logo.png" /></h1>
</div>
</div>
</div>
<div class="container theme-showcase" role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="container">
<div class="banner-div">
<img src="img/banner.png" class="banner"/>
<img src="img/issue-no-img.png" class="issue-badge"/>
<span class="issue">Issue No.<br /><b>376</b></span>
</div>
<div class="row">
<div class="col-md-4">
<img src="img/left-note-img.png"/>
</div>
<div class="col-md-4 align-center">
<p><span class="new-radius"> NEW! </span> <span class="new">JUN 07, 2003</span></p>
<p><i>Get your breaks points on.</i></p>
<span>
<h1>DOT NET ARTICLES</h1>
</span>
<span class="comments"><i>by</i> <a>JOHN WOO</a> <i> - 10 Commments</i></span><br/>
</div>
<div class="col-md-4 pull-right">
<div class="input-group">
<input type="text" class="form-control search-input-box" placeholder="Search..." />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<hr class="hr-style"/>
<p class = "header-pgf">
Text, navigation, and tables, oh, my! What's a responsive web designer to do? How can you confine your design to as few major breakpoints as possible? Where and when will you sketching? Is it possible to sketch on actual devices, and what are the accessibility implications of doing so? The answers to these and other profound questions will be found in this exclusive excerpt from Chapter 7 of Responsive Design Workflow, Stephen Hay's new book, available now from New Riders.
</p>
<hr class="hr-style">
<h1 class="more-apart">More from A List Apart</h1>
<hr class="hr-style">
<div class="row">
<div class="col-md-3">
<h2>Columnists</h2>
<p>JACK MCGRANE <i>on</i> CONTENT</p>
<p class="pgf-header">The Alternative is Nothing</p>
<img src="img/thumb1.jpg" class="float-left" />
<p>We're witnessing one of thr latest waves of technological disruption, as mobile devices put access to the internet in the hands of people who previously never had that power.</p>
</div>
<div class="col-md-3">
<h2>From the Blog</h2>
<p class="pgf-header">Maps Should Be Crafted.Not "Plugged In"></p>
<p>Web designers: erase the line between "the map" and "the content" by harnessing the power of open-source Leafler and your own fresh creative thinking. In the tradition of ALA's recent "Hack Your Maps." Happy Cog's Brandon Rosage shares how to make location a central aspect of the content experience-not just a visual aid.</p>
</div>
<div class="col-md-3">
<p class="md-3">Amazon Web Services Introduces a New API</p>
<p>Amazon Web Services Identity and Access Management(IAM) is expanding to support web identity federation. Developers can integrate Amazon.com, Facebook, or Google odentity into their app by using the new AWS Security Token Services(STS) API, AssumeRoleWithWebIdentity. to request temporary security credentials.</p>
</div>
<div class="col-md-3">
<h5>Gratitude</h5>
<p>Thanks to our RSS sponser Typekit-offering desktop and web fonts in a single subscription starting June 17</p>
<div class="well align-center">
<img src="img/mothers-day.jpg" /> <br/>
<p class="font-10">Two special Mothers' Say Kits are available from Field Notes Brand. Ad via The Deck </p>
</div>
<div class="job-board">
<h5>Job Board</h5>
<a href="#" >New York Times is looking for a <br />Ruby on Rails Web Developer.</a>
More on the Job Board >
</div>
</div>
</div>
<br />
</div>
</div>
<!-- /container -->
<div class="footer" style="">
<div class="container">
<div class="list-footer" style="font-size:13px;">
<span class="padding-10"><img src="img/article-logo.png" /></span>
<span class="padding-10">ARTICLES</span>
<span class="padding-10">COLUMNS</span>
<span class="padding-10">BLOG</span>
<span class="padding-10">TOPICS</span>
</div>
<div class = "list-footer" style="font-size:12px;">
<span class="padding-10">ABOUT</span>
<span class="padding-10">AUTHORS</span>
<span class="padding-10">MASTHEAD</span>
<span class="padding-10">CONTRIBUTE</span>
<span class="padding-10">STYLE GUIDE</span>
<span class="padding-10">CONTACT</span>
<span class="padding-10">SPONSORSHIPS</span>
</div>
<hr class="hr-style"/>
<div class="row">
<div class="col-md-6">
<img src="img/dot-net-ad.jpg" class="footer-image"/>
<h3>.NET Training</h3>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<a class="footer-link" href="#">ask here. ></a>
</div>
<div class="col-md-6">
<img src="img/shopify-expert-ad.jpg" class="footer-image"/>
<h3>Shopify Expert</h3>
<p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
<a class="footer-link" href="#">click to view</a>
</div>
</div>
<hr class="hr-style" />
<div style="text-align:center">
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</div>
</div>
</body>
</html>
It provides support for ARIA (Accessible Rich Internet Applications) which allows to specify even more semantic richness in documents.
You can add role="search" to your search form, role="banner" to your
masthead, and role="contentinfo" to your page footer. There’s a full
list of values in the ARIA specification at
http://www.w3.org/TR/wai-aria/roles#role_definitions.
Basically you don't have to add them, but its better if you do as it provides more context for your page. More discussed at A List Apart.
The new structural elements in HTML5 will be very useful to assistive technology. Instead of creating “skip navigation” links, all we need to do is use the nav element correctly. This will allow screen reader users to skip past navigation without us having to provide an explicit link.
Twitter Bootstrap uses like <nav role="navigation">. So Bootstrap take consider not only normal browser but also take care of screen reader browsers.
Note: By including Role attribute you are making your website more accessible and its good practice to use this Role attribute.
Im using the following code and currently the text and the button is in different side of the
screen,the text is above the button ,I want the both of them be in parallel
how should I do that?
<h4>my text</h4>
<div class="text-right">
<i class="glyphicon glyphicon-ok"></i> New
<br />
</div>
Sounds like this is how you want it
http://jsfiddle.net/xv5rP/
<h4 style="display:inline">my text</h4>
<div class="text-right" style="float:right">
<i class="glyphicon glyphicon-ok"></i> New
<br />
</div>
Add style="display:inline" to your <h4> and <div>
<h4 style="display:inline">my text</h4>
<div class="text-right" style="display:inline">
<i class="glyphicon glyphicon-ok"></i> New
<br />
</div>
you cant give heading tags, because they take the whole line within itself and anything else after it is showed in the next line. So try some other tag of better use span to style it.
dont use <p> either.