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.
Related
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.
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>
In my code I am using bootstrap and adding words to go with the glyphicons. My words are within the span tag and have this awkwardly large space when it is just a normal space.
<div class="first-draft view">
<h4>First-Draft</h4>
<img src="img/view.png" alt="City View"/>
<h5><span class="glyphicon glyphicon-file"> View Report</span></h5>
<h6><span class="glyphicon glyphicon-unchecked"> Compare</span></h6>
</div>
Here is a jsfiddle example http://jsfiddle.net/zbyztda8/
If any of the solution doesn't work, try removing the font-family. I think the spacing is due to font 'Glyphicons Halflings' . Better way is to have text in separate span without any styling and different span for glyphicon.
HTML:
<div class="first-draft view">
<h4>First-Draft</h4>
<img src="img/view.png" alt="City View" />
<h5><span class="glyphicon glyphicon-file"> View Report</span></h5>
<h6><span class="glyphicon glyphicon-unchecked"> Compare</span></h6>
</div>
<br/>
<div class="first-draft view">
<h4>First-Draft</h4>
<img src="img/view.png" alt="City View" />
<h5><span class="glyphicon glyphicon-file"></span><span>View Report</span></h5>
<h6><span class="glyphicon glyphicon-unchecked"> Compare</span></h6>
</div>
Demo: http://jsfiddle.net/zbyztda8/2/
See the last section which doesn't have font-family in span tag.
Im having table and I have on top of it in the right side button
and in the left side some text.(they parallel)
Currently its very close to the table which is below and I want to move
the text and the button little bit up ,how should I do that ?
<h4 style="display:inline">Users Table</h4>
<div style="float:right" class="text-right">
<i class="glyphicon glyphicon-plus"></i> New
</div>
//Here start the table
#* List of users *#
<table class="table table-striped ">
If I use the <br /> it move it lot up ,there is a way to do it by pixels?
Just make a div surrounding the text and the button and apply some margin-bottom to that.
<div style="margin-bottom: 20px">
<h4 style="display:inline">Users Table</h4>
<div style="float:right" class="text-right">
<i class="glyphicon glyphicon-plus"></i> New
</div>
</div>
//Here start the table
#* List of users *#
<table class="table table-striped ">
Since you're useing Bootstrap you can do a simple grid to accomplish that.
<div class="row">
<div class="col-md-6>
<h4>Users Table</h4>
</div>
<div class="col-md-6>
<i class="glyphicon glyphicon-plus"></i> New
</div>
</div>
<!-- table -->
I don't know what .text-right does, but probably can be applyed to the button.
Yes using CSS you can add padding like this :
style="padding-top:0.5px;"
Or
style="padding-bottom:0.5px;"
do this in your css:
table.table { clear:both; margin-top:10px;}
I am trying to make a page by only using html , as i am new to html what i tried is
<div id="container" style="width:400px">
<div id="header" style="background-color:#0000;">
<h1 style="margin-bottom:0;">Box Office</h1>
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
<p>
<a href="http://www.imdb.com/title/tt1170358/?ref_=hm_cht_t1" target="_blank" >1. The Hobbit: The Desolation of Smaug $31.5M </a>
</p>
<p>
<a href="http://www.imdb.com/title/tt1229340/?ref_=hm_cht_t2" target="_blank" >2. Anchorman 2: The Legend Continues $26.8M </a>
</p>
<p>
<a href="http://www.imdb.com/title/tt2294629/?ref_=hm_cht_t3" target="_blank" >3. Frozen $19.6M </a>
</p>
<p>
<a href="http://www.imdb.com/title/tt1800241/?ref_=hm_cht_t4" target="_blank" >4. American Hustle $19.1M </a>
</p>
<p>
<a href="http://www.imdb.com/title/tt2140373/?ref_=hm_cht_t5" target="_blank" >5. Saving Mr. Banks $9.34M </a>
</p>
</div>
Which make something like this
Now i want to start my next phase in the same flow but i want to start from the empty space after this block like in tha landscape flow , What i need to do so that my next part will start after it , i don't want to use the new line for next thing i want to enter
Reuired output
Now i want that when i start my new block it should start from after the first block like it shuld start from where i write "Now i want this"
Does this solve your problem?
Are you trying to float the 2 container divs side-by-side in landscape?
<div id="container" style="width:400px">
<div id="header" style="background-color:#0000;">
<h1 style="margin-bottom:0;">Box Office</h1>
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:600px;float:left;">
<div style='width: 50%;display:inline-block;float:left;'>
<p> 1. The Hobbit: The Desolation of Smaug $31.5M
</p>
<p> 2. Anchorman 2: The Legend Continues $26.8M
</p>
<p> 3. Frozen $19.6M
</p>
<p> 4. American Hustle $19.1M
</p>
<p> 5. Saving Mr. Banks $9.34M
</p>
</div>
<div style='width: 50%;
display:inline-block;
float:left;background:#ddd;height:100%; '>
<h2>Now I want this</h2>
</div>
</div>