I have a page, where in the top, there's a question, and below that, there's a list of answers, and you can add new answers too. (image below)
In a format like (name of the user who answered) "válasza: ekkor: (date), which means his answer, at this time.
Below every question there are 3 buttons, + C and -, the ppl who asked the question can accept the answer (+), deny the answer (-) and cancel applying or denying (C).
Problem is, if I press any button for example in any row, the effect only applies to the first one.
Accept -> Green Background, Deny -> red, C -> white
Here's the HTML code:
<div class="container" style="...">
<ul class="list-group">
<li id="colorTarget" class="list-group-item" *ngFor="let comment of actualComments">
<div style="...">
<b>{{comment.iro}}</b> válasza, ekkor: {{comment.mikor}} {{comment.leir}}
</div><br/>
<div class="row" style="width:120px;">
<div style="...">
<button class="btn btn-light" id="buttonTarget1" (click)="acceptAnswer(comment.iro,comment.mikor,comment.leir)">
+
</button>
</div>
<div style="...">
<button class="btn btn-light" id="buttonTarget2" (click)="clearAnswer(comment.iro,comment.mikor,comment.leir)">
C
</button>
</div>
<div style="...">
<button class="btn btn-light" id="buttonTarget3" (click)="denyAnswer(comment.iro,comment.mikor,comment.leir)">
-
</button>
</div>
</div>
</li>
</ul>
</div>
And the TypeScript:
acceptAnswer(iro, mikor, iras) {
var x = this.answerid(iro, mikor, iras);
this.actualComments[x].accepted = 1;
var target = document.getElementById("colorTarget");
target.style.background = 'green';
target.style.color = 'white';
}
Deny and Clear Answer functions are exactly like this, but with red and white color.
If you have any idea..please.
So, in short: unique id to all li and pass this unique id to the functions.
try to use CSS classes on li elements:
<div class="container" style="...">
<ul class="list-group">
<li id="colorTarget"
class="list-group-item {{ statuses[i] }}"
*ngFor="let comment of actualComments; let i = index;">
<div style="...">
<b>{{comment.iro}}</b> válasza, ekkor: {{comment.mikor}} {{comment.leir}}
</div>
<br/>
<div class="row" style="width:120px;">
<div style="...">
<button class="btn btn-light"
id="buttonTarget1"
(click)="statuses[i] = 'accept'; acceptAnswer(comment.iro,comment.mikor,comment.leir)">
+
</button>
</div>
<div style="...">
<button class="btn btn-light"
id="buttonTarget2"
(click)="statuses[i] = 'clear'; clearAnswer(comment.iro,comment.mikor,comment.leir)">
C
</button>
</div>
<div style="...">
<button class="btn btn-light"
id="buttonTarget3"
(click)="statuses[i] = 'deny'; denyAnswer(comment.iro,comment.mikor,comment.leir)">
-
</button>
</div>
</div>
</li>
</ul>
</div>
this way each li element will get CSS class ('accept', 'deny' or 'clear'). I made it inline within each button (click) function, it also could be dome in the TS file.
Now just add some SCSS:
li {
&.accept {
color: white;
background: green;
}
&.deny,
&.clear {
color: white;
background: red;
}
}
or CSS:
li.accept {
color: white;
background: green;
}
li.deny,
li.clear {
color: white;
background: red;
}
If you need to isolate li's selection, you may add its ID to each li, like li#colorTarget
Now, in you TS file you do not need to deal with styling:
acceptAnswer(iro, mikor, iras) {
var x = this.answerid(iro, mikor, iras);
this.actualComments[x].accepted = 1;
}
UPDATE
you wrote:
actualComment.accepted represent the accept/deny/clear colors
if I understand correctly, actualComment.accepted will have an integer representing one of three colors. If this is correct, let's assume 1 is green (accepted), 2 and 3 are red (deny and clear). In this case you could only change li from my original answer to:
<li id="colorTarget"
class="list-group-item"
[class.accept]="comment.accepted === 1"
[class.deny]="comment.accepted === 2"
[class.clear]="comment.accepted === 3"
*ngFor="let comment of actualComments">
or add public statusesMap (or ENUM) to your ts file:
statusesMap = {
1: 'accept',
2: 'deny',
3: 'clear'
}
and in your HTML:
<li id="colorTarget"
class="list-group-item {{ statusesMap[comment.accepted] }}"
*ngFor="let comment of actualComments">
Here is what I came up with.
Updated template. Added a div, and moved the *ngFor to it to allow me to grab the data needed to create the id. The createId function build the id based on values used.
<div class="container">
<ul class="list-group">
<div *ngFor="let comment of actualComments">
<li [id]="createId(comment.iro,comment.mikor,comment.leir)" class="list-group-item">
<div>
<b>{{comment.iro}}</b> válasza, ekkor: {{comment.mikor}} {{comment.leir}}
</div>
<br/>
…
</li>
</div>
</ul>
</div>
Addition to the component to create the id. This is used in the template above.
createId(iro, mikor, leir) {
return `${iro}${mikor}${leir}`;
}
Update to acceptAnswer function to use the new id created using the new createId function.
acceptAnswer(iro, mikor, iras) {
const x = this.answerid(iro, mikor, iras);
this.actualComments[x].accepted = 1;
const target = document.getElementById(this.createId(iro, mikor, iras));
target.style.background = 'green';
target.style.color = 'white';
}
This is my Problem : I'm making a website and when I try to resize it the divs that I added (which are empty) stop scaling my whole website after a certain point. This is very basic but I'm not sure what's going wrong.
html-
<body>
<!-- navbar 01 starts here -->
<nav class = "navbar navbar-inverse col-lg-12">
<div class = "container">
<nav class = "navbar navbar-default">
<div class = "container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class = "navbar-header">
<button class = "navbar-toggle collapsed"
data-target = "#defaultNavbar1"
data-toggle = "collapse"
type = "button">
<span class = "sr-only">
Toggle navigation
</span>
<span class = "icon-bar">
</span>
<span class = "icon-bar">
</span>
<span class = "icon-bar">
</span>
</button>
<a class = "navbar-brand" href = "#">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id = "defaultNavbar1"
class = "collapse navbar-collapse">
<ul class = "nav navbar-nav">
<li>
<a href = "#">
Home
</a>
</li>
<li>
<a href = "#">
Contact Us
</a>
</li>
</ul>
<form class = "navbar-form navbar-left"
role = "search">
<div class = "form-group">
</div>
</form>
<ul class = "nav navbar-nav navbar-right">
<li>
<a href = "#">
Support
</a>
</li>
<li>
<a href = "#">
Get Started
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</nav>
<!-- empty div 1 -->
<div class = "index-section01">
</div>
<!--empty div 2-->
<div class = "index-section02">
</div>
<!--image-half-way-logo to home-->
<div class = "index-logo01">
<a href = "index.html">
<img class = "img-responsive"
alt = ""
src = "images/3logo_home.png"
width = "1360"
height = "138"/>
</a>
</div>
<!--empty div 3-->
<div class = "index-section03">
</div>
<script src = "js/jquery-1.11.2.min.js"
type = "text/javascript">
</script>
<script src = "js/bootstrap.js"
type = "text/javascript">
</script>
</body>
And the css code...
body
{
background-image : url(images/Final_Web_Home.jpg);
background-repeat : no-repeat;
background-size : cover;
}
.index-section01
{
min-width : 100%;
padding-bottom : 500px;
padding-right : 127px;
padding-top : 500px;
}
.index-section02
{
min-width : 100%;
padding-bottom : 770px;
padding-top : 600px;
}
.index-section03
{
min-width : 100%;
min-width : 0px;
padding-bottom : 578px;
padding-top : 833px;
}
.index-logo01
{
display : block;
padding-bottom : 85px;
padding-left : 132px;
padding-right : 0px;
padding-top : 224px;
}
.navbar-default
{
background-color : #FFE016;
padding-top : 17px;
}
.navbar-inverse
{
background-color : #FFE016;
}
This is done on the dreamweaver platform.
You are using bootstrap.
You put all the content inside <div class="container">
From the documentation:
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
Use .container for a responsive fixed width container.
So, yes, it stops getting wider when you hit the maximum width of your container. That's the point of that class.
Use .container-fluid for a full width container, spanning the entire width of your viewport.
I have this html file am working on with semantic UI,the final product is supposed to look like the one in the pic.However it doesn't render well and the image keeps being pushed to the far left side of the screen.More so the elements are also improperly aligned.Where am i growing wrong ? Here is the current code.
html code
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<meta http-equiv= "X-UA-Compatible" content ="IE=edge,chrome=1"/>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0,maximum-scale =1.0"/>
<title>SEMANTIC UI</title>
<!--Site properties-->
<!--CSS-->
<link rel = "stylesheet" type ="text/css" href ="dist/semantic.min.css">
<link rel = "stylesheet" type ="text/css" href ="dist/mycss.css">
<script type ="text/javascript" src = "dist/jquery.js"></script>
<!--Javascript-->
<script type ="text/javascript" src = "dist/semantic.min.js"></script>
<script type ="text/javascript" src = "dist/myjs.js"></script>
</head>
<body>
<!--sidebar-->
<div class = "ui sidebar menu large compact container icon labeled vertical thin">
<a class ="item" href ="#"><i class="global icon">Cities</i></a>
<a class ="item" href ="#"><i class="car icon">find a ride</i></a>
<div class = "ui buttons">
<button class = "ui button black">
<i class = "sign in icon"></i>Login
</button>
<div class = "or"></div>
<button class = "ui button green">
<i class = "users icon">Sign Up</a>
</button>
</div>
</div>
<!--Main content-->
<div class = "pusher">
<div class = "ui vertical aligned center segment landing inverted">
<div class = "transbg">
<div class = "ui container">
<div class = "ui secondary inverted top large pointing menu">
<div class = "left item">
<a class "toc item">
<i class ="sidebar icon"></i>
</a>
</div>
<div class = "right-item">
<a class = "active item" href = "/">Home</a>
<a class ="item" href ="#">Cities</a>
<a class = "item" href="#"><i class = "car icon">Find a Ride</i></a>
<div class = "item">
<div class = "ui buttons">
<button class = "ui button black">
<i class = "sign in icon"></i>Login
</button>
<div class = "or"><div>
<button class = "ui button green"><i class ="users icon"><i class = "users icon">Sign Up
</button>
</div>
</div>
</div>
</div>
</div>
<div class = "ui text container">
<h1 class = "ui header centered inverted">Look up for a ride near you</h1>
<div class = "container fluid findbg">
<form class ="ui form">
<div class = "field">
<div class = "fields">
<div class = "eleven wide field">
<div class = "ui search location">
<div class = "ui left icon input">
<i class = "inverted circular blue map icon"></i>
<input class = "prompt"type = "text" name = "location" placeholder = "enter your location...">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
CSS code file
.landing{
background:url("bg.jpg") #103d50 70% 30% no-repeat !important;
}
.landing.segment{
min-height: 500px;
padding:0em 0em;
}
.transbg{
min-height: 500px;
background:rgba(32,154,189,0.655);
}
.menu{
border:0px!important;
}
.landing h1.ui.header{
margin-top: 4.2em;
margin-bottom: 0.11em;
font-weight: 100;
}
.findbg{
padding: 1em 1.5em;
width:100%;
background:rgba(255,255,155,0.7);
}
I'd have to say that you have a few errors in your markup:
unmatched closing tags (<i> is paired to </a>)
Misuse of Semantic UI icon tags. You shouldn't put any text inside <i class="<icon name> icon"></i> as this is
translated by Semantic UI to icons specified in the class attribute.
(As pointed out by #Anirudh) Improperly closed tag (i.e. <div class="or"> <div>)
Kindy check the code below for reference. Not sure if I achieved your desired look but it fixed the broken display in your existing markup.
.landing{
background:url("bg.jpg") #103d50 70% 30% no-repeat !important;
}
.landing.segment{
min-height: 500px;
padding:0em 0em;
}
.transbg{
min-height: 500px;
background:rgba(32,154,189,0.655);
}
.menu{
border:0px!important;
}
.landing h1.ui.header{
margin-top: 4.2em;
margin-bottom: 0.11em;
font-weight: 100;
}
.findbg{
padding: 1em 1.5em;
width:100%;
background:rgba(255,255,155,0.7);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<!--sidebar-->
<div class = "ui sidebar menu large compact container icon labeled vertical thin">
<a class ="item" href ="#"><i class="global icon"></i>Cities</a>
<a class ="item" href ="#"><i class="car icon"></i>find a ride</a>
<div class="item">
<div class = "ui buttons">
<a class = "ui button black">
<i class = "sign in icon"></i>Login
</a>
<div class="or"></div>
<a class = "ui button green">
<i class = "users icon">Sign Up</i>
</a>
</div>
</div>
</div>
<!--Main content-->
<div class = "pusher">
<div class = "ui vertical aligned center segment landing inverted">
<div class = "transbg">
<div class = "ui container">
<div class = "ui fluid secondary inverted top large pointing menu">
<a class = "toc item">
<i class ="sidebar icon"></i>
</a>
<div class = "right menu">
<a class = "active item" href = "/">Home</a>
<a class ="item" href ="#">Cities</a>
<a class = "item" href="#"><i class = "car icon"></i>Find a Ride</a>
<div class = "item">
<div class = "ui buttons">
<a class = "ui button black">
<i class = "sign in icon"></i>Login
</a>
<div class = "or"></div>
<a class = "ui button green"><i class = "users icon"></i>Sign Up</a>
</div>
</div> <!-- item -->
</div><!-- right menu-->
</div><!-- pointing menu -->
</div>
<div class = "ui text container">
<h1 class = "ui header centered inverted">Look up for a ride near you</h1>
<div class = "container findbg">
<form class ="ui form">
<div class = "fields">
<div class = "sixteen wide field">
<div class = "ui search location">
<div class = "ui left icon fluid input">
<i class = "inverted circular blue map icon"></i>
<input class = "prompt"type = "text" name = "location" placeholder = "enter your location...">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I am a new user here and a beginner in the web programming area of life.
I've just started to create my own site with bootsrap and can't move the signin button with a link to the signin site above the navbar with the order btn-pull-right. How can I move the signin button to the right side of screenplay so that the link to the login site does functioning as well? Here is my code:
<body>
<div class="container" id="topContent">
<a class="btn btn-default btn-pull-right" href="../probe/signin.html" role="button">Sign in</a>
</div>
<nav class="navbar navbar-default navbar">
<div class="container-fluid">
<div class="navbar-header">
In your css :
create a class (signinbtn for exemple) and put it on position: absolute. As so :
.signinbtn {
position: absolute;
top: 10px;
right 10px;
}
then add your class to the btn : as so :
<a class="btn btn-default btn-pull-right signinbtn" href="../probe/signin.html" role="button">Sign in</a>
The btn-pull-right should be just pull-right, as you can see from Bootstrap site
I am trying to align some button and a input box with a table. Previous day and next day may or may not be present on the page depending on if a day exists. Below is by start code, current output and desired output.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form class = "form-inline" >
<h1>some data</h1>
<br>
<button class="btn" name = "prevDayBtn"><i class="icon-backward"></i> Previous Day</button>
<input type='text' READONLY name = 'pageDate' value = '2013-05-18' />
<button class="btn" name = "nextDayBtn" >Next Day <i class="icon-forward"></i></button>
<br>
<br>
<table class = "table table-striped">
<th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th><th>col6</th><th>col7</th><th>col8</th>
</table>
</form>
</div> <!-- /container -->
</body>
</html>
Current Output
Desired Output
Edit:
I tried Accipheran answer and got the result below. Also added code to jsFiddle http://jsfiddle.net/Y9SLs/1/
I would give the next-day button a class of pull-right (a bootstrap class) and the date field a class of center (custom class) where center is defined as
.center {
float: none;
display: table;
margin: 0 auto;
}
Think that should work
In addition to Accipheran's answer I used Twitters grid system to get the desired result. Code Below:
HTML
</head>
<body>
<div class="container">
<form class = "form-inline" >
<h1>some data</h1>
<div class = "row">
<div class = "span4">
<button class="btn" name = "prevDayBtn pull-left"><i class="icon-backward"></i> Previous Day</button>
</div>
<div class = "span4">
<input class = "center " type='text' READONLY name = 'pageDate' value = '2013-05-18' >
</div>
<div class = "span4">
<button class="btn pull-right" name = "nextDayBtn" >Next Day <i class="icon-forward"></i></button>
</div>
</div>
<br>
<div class = "row">
<div class = "span12">
<table class = "table table-striped">
<th>col11</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th><th>col6</th><th>col7</th><th>col8</th>
</table>
</div>
</div>
</form>
</div> <!-- /container -->
</body>
</html>
Additional CSS
input.center {
float: none;
display: table;
margin: 0 auto;
}