Cannot add element in the same line

Clash Royale CLAN TAG#URR8PPP

up vote
7
down vote

favorite

I'm trying to make a favourite checkbox on the right side of the div, this is the html structure:

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

if you look at the JSFIDDLE, you will see that the checkbox is greather than the container, how can I manage this?

html css

share|improve this question

edited yesterday

Pete

37.9k1872113

asked yesterday

Dillinger

50611135

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Did you forget the position:relative on the parent
  – Paulie_D
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  you mean on the group?
  – Dillinger
  yesterday
  

  
  
  
  

add a comment | 

up vote
7
down vote

favorite

I'm trying to make a favourite checkbox on the right side of the div, this is the html structure:

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

if you look at the JSFIDDLE, you will see that the checkbox is greather than the container, how can I manage this?

html css

share|improve this question

edited yesterday

Pete

37.9k1872113

asked yesterday

Dillinger

50611135

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Did you forget the position:relative on the parent
  – Paulie_D
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  you mean on the group?
  – Dillinger
  yesterday
  

  
  
  
  

add a comment | 

up vote
7
down vote

favorite

up vote
7
down vote

favorite

I'm trying to make a favourite checkbox on the right side of the div, this is the html structure:

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

if you look at the JSFIDDLE, you will see that the checkbox is greather than the container, how can I manage this?

html css

share|improve this question

edited yesterday

Pete

37.9k1872113

asked yesterday

Dillinger

50611135

I'm trying to make a favourite checkbox on the right side of the div, this is the html structure:

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

if you look at the JSFIDDLE, you will see that the checkbox is greather than the container, how can I manage this?

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

html css

html css

share|improve this question

edited yesterday

Pete

37.9k1872113

asked yesterday

Dillinger

50611135

share|improve this question

edited yesterday

Pete

37.9k1872113

asked yesterday

Dillinger

50611135

share|improve this question

share|improve this question

edited yesterday

Pete

37.9k1872113

edited yesterday

Pete

37.9k1872113

edited yesterday

Pete

37.9k1872113

37.9k1872113

asked yesterday

Dillinger

50611135

asked yesterday

Dillinger

50611135

asked yesterday

Dillinger

50611135

50611135

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Did you forget the position:relative on the parent
  – Paulie_D
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  you mean on the group?
  – Dillinger
  yesterday
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Did you forget the position:relative on the parent
  – Paulie_D
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  you mean on the group?
  – Dillinger
  yesterday
  

  
  
  
  

Did you forget the position:relative on the parent
– Paulie_D
yesterday

Did you forget the position:relative on the parent
– Paulie_D
yesterday

you mean on the group?
– Dillinger
yesterday

you mean on the group?
– Dillinger
yesterday

add a comment | 

6 Answers
6

active

oldest

votes

up vote
5
down vote



accepted

My solution it's to suggest you to use flexbox it's very easy to understand, your problem is come from the font-size that you assign on your icon. You need to reduce font-size and on the parent make the CSS I make for you :)

.group 
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 justify-content: space-between;

.star 
 position: relative;
 visibility: hidden;
 font-size: 20px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

share|improve this answer

edited yesterday

answered yesterday

KolaCaine

4431315

add a comment | 

up vote
7
down vote

There are a few things I would change:

1. use flex instead of float


2. use a label for your star instead of the input itself


3. remove the absolute positioning - it's not needed and can just complicate things


4. don't mix inline styles with css - it's best to use all css (I haven't fixed this though)

/* seperate the checkbox and star styles */
.group-checkbox 
 display:none;

.group-checkbox:checked + .star:before /* using the adjacent sibling selector to selec the star after a checked input */
 content: "2606";


.star 
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";



.group 
 background-color: #20262e;
 line-height:30px; /* may want to match the size of the star font */
 display:flex; /* make the container flex */
 width:100%;


.group .font-weight-bold 
 flex-grow:1; /* make this label grow to fill the space the star doesn't take */

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" class="group-checkbox" id="checkbox"><!-- give this an id -->
 <label class="star" for="checkbox"><!--use a label and point it at the id of the chechbox so that you can click on it to change the status--></label>
</div>

share|improve this answer

answered yesterday

Pete

37.9k1872113

• 
  
  
  

  
  

  
  
  
  
  
  

  
  This is also the only answer so far where the star doesn't change sizes upon clicking.
  – spacetyper
  yesterday
  

  
  
  
  

add a comment | 

up vote
6
down vote

Please add position: relative; to .group and adjust the star position accordingly. check below:

.star 
 visibility: hidden;
 font-size: 20px;
 cursor: pointer;
 color: orange;


.star:before 
 top: -3px;
 right: 2px;
 content: "2605";
 position: absolute;
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 position: relative;
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

share|improve this answer

edited yesterday

answered yesterday

VicJordan

9,88574068

add a comment | 

up vote
3
down vote

in your .star:before and .star:after, you need to set the position to relative

Now it let's them to be in the same position as the input that has star class itself!

Now you can align the input to be in the right place.

In that case, you can add these to your .star styles:

.star 
 position: relative;
 bottom: 12px;
 right: 15px;

And it will be what you're looking for

This is the snippet:

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;
 position: relative;
 bottom: 12px;
 right: 12px;


.star:before 
 content: "2605";
 position: relative;
 visibility: visible;
 


.star:checked:before 
 content: "2606";
 position: relative;


.group 
 background-color: #20262e;
 height: 25px;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

share|improve this answer

answered yesterday

imans77

337110

add a comment | 

up vote
2
down vote

I think you can just add a top attribute and clean it up with positioning and padding like below.

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;
 top: 0;
 right: 10px;


.star:checked:before 
 content: "2606";
 position: absolute;


.group
 background-color: #20262e;
 padding: 5px;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
 </div>

share|improve this answer

answered yesterday

Zaren Wienclaw

10510

add a comment | 

up vote
2
down vote

Few minor updates to the .star and .star:before classes will fix the issue, please have a look at the below-working snippet

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;
 position: relative;
 margin: 0;
 padding: 0;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;
 top: 0;
 right: 0;
 line-height: 1;
 font-size: 20px;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 background-color: #20262e;

<div class="group text-truncate">
 <input type="checkbox" style="float:right;" class="group-checkbox star">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
</div>

share|improve this answer

answered yesterday

Girisha C

904513

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52278140%2fcannot-add-element-in-the-same-line%23new-answer', 'question_page');

);

Post as a guest

Name Email

6 Answers
6

active

oldest

votes

6 Answers
6

active

oldest

votes

active

oldest

votes

active

oldest

votes

up vote
5
down vote



accepted

My solution it's to suggest you to use flexbox it's very easy to understand, your problem is come from the font-size that you assign on your icon. You need to reduce font-size and on the parent make the CSS I make for you :)

.group 
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 justify-content: space-between;

.star 
 position: relative;
 visibility: hidden;
 font-size: 20px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

share|improve this answer

edited yesterday

answered yesterday

KolaCaine

4431315

add a comment | 

up vote
5
down vote



accepted

My solution it's to suggest you to use flexbox it's very easy to understand, your problem is come from the font-size that you assign on your icon. You need to reduce font-size and on the parent make the CSS I make for you :)

.group 
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 justify-content: space-between;

.star 
 position: relative;
 visibility: hidden;
 font-size: 20px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

share|improve this answer

edited yesterday

answered yesterday

KolaCaine

4431315

add a comment | 

up vote
5
down vote



accepted

up vote
5
down vote



accepted

My solution it's to suggest you to use flexbox it's very easy to understand, your problem is come from the font-size that you assign on your icon. You need to reduce font-size and on the parent make the CSS I make for you :)

.group 
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 justify-content: space-between;

.star 
 position: relative;
 visibility: hidden;
 font-size: 20px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

share|improve this answer

edited yesterday

answered yesterday

KolaCaine

4431315

My solution it's to suggest you to use flexbox it's very easy to understand, your problem is come from the font-size that you assign on your icon. You need to reduce font-size and on the parent make the CSS I make for you :)

.group 
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 justify-content: space-between;

.star 
 position: relative;
 visibility: hidden;
 font-size: 20px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

.group 
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 justify-content: space-between;

.star 
 position: relative;
 visibility: hidden;
 font-size: 20px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

.group 
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 justify-content: space-between;

.star 
 position: relative;
 visibility: hidden;
 font-size: 20px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

share|improve this answer

edited yesterday

answered yesterday

KolaCaine

4431315

share|improve this answer

share|improve this answer

edited yesterday

edited yesterday

edited yesterday

answered yesterday

KolaCaine

4431315

answered yesterday

KolaCaine

4431315

answered yesterday

KolaCaine

4431315

4431315

add a comment | 

add a comment | 

up vote
7
down vote

There are a few things I would change:

1. use flex instead of float


2. use a label for your star instead of the input itself


3. remove the absolute positioning - it's not needed and can just complicate things


4. don't mix inline styles with css - it's best to use all css (I haven't fixed this though)

/* seperate the checkbox and star styles */
.group-checkbox 
 display:none;

.group-checkbox:checked + .star:before /* using the adjacent sibling selector to selec the star after a checked input */
 content: "2606";


.star 
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";



.group 
 background-color: #20262e;
 line-height:30px; /* may want to match the size of the star font */
 display:flex; /* make the container flex */
 width:100%;


.group .font-weight-bold 
 flex-grow:1; /* make this label grow to fill the space the star doesn't take */

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" class="group-checkbox" id="checkbox"><!-- give this an id -->
 <label class="star" for="checkbox"><!--use a label and point it at the id of the chechbox so that you can click on it to change the status--></label>
</div>

share|improve this answer

answered yesterday

Pete

37.9k1872113

• 
  
  
  

  
  

  
  
  
  
  
  

  
  This is also the only answer so far where the star doesn't change sizes upon clicking.
  – spacetyper
  yesterday
  

  
  
  
  

add a comment | 

up vote
7
down vote

There are a few things I would change:

1. use flex instead of float


2. use a label for your star instead of the input itself


3. remove the absolute positioning - it's not needed and can just complicate things


4. don't mix inline styles with css - it's best to use all css (I haven't fixed this though)

/* seperate the checkbox and star styles */
.group-checkbox 
 display:none;

.group-checkbox:checked + .star:before /* using the adjacent sibling selector to selec the star after a checked input */
 content: "2606";


.star 
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";



.group 
 background-color: #20262e;
 line-height:30px; /* may want to match the size of the star font */
 display:flex; /* make the container flex */
 width:100%;


.group .font-weight-bold 
 flex-grow:1; /* make this label grow to fill the space the star doesn't take */

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" class="group-checkbox" id="checkbox"><!-- give this an id -->
 <label class="star" for="checkbox"><!--use a label and point it at the id of the chechbox so that you can click on it to change the status--></label>
</div>

share|improve this answer

answered yesterday

Pete

37.9k1872113

• 
  
  
  

  
  

  
  
  
  
  
  

  
  This is also the only answer so far where the star doesn't change sizes upon clicking.
  – spacetyper
  yesterday
  

  
  
  
  

add a comment | 

up vote
7
down vote

up vote
7
down vote

There are a few things I would change:

1. use flex instead of float


2. use a label for your star instead of the input itself


3. remove the absolute positioning - it's not needed and can just complicate things


4. don't mix inline styles with css - it's best to use all css (I haven't fixed this though)

/* seperate the checkbox and star styles */
.group-checkbox 
 display:none;

.group-checkbox:checked + .star:before /* using the adjacent sibling selector to selec the star after a checked input */
 content: "2606";


.star 
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";



.group 
 background-color: #20262e;
 line-height:30px; /* may want to match the size of the star font */
 display:flex; /* make the container flex */
 width:100%;


.group .font-weight-bold 
 flex-grow:1; /* make this label grow to fill the space the star doesn't take */

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" class="group-checkbox" id="checkbox"><!-- give this an id -->
 <label class="star" for="checkbox"><!--use a label and point it at the id of the chechbox so that you can click on it to change the status--></label>
</div>

share|improve this answer

answered yesterday

Pete

37.9k1872113

There are a few things I would change:

1. use flex instead of float


2. use a label for your star instead of the input itself


3. remove the absolute positioning - it's not needed and can just complicate things


4. don't mix inline styles with css - it's best to use all css (I haven't fixed this though)

/* seperate the checkbox and star styles */
.group-checkbox 
 display:none;

.group-checkbox:checked + .star:before /* using the adjacent sibling selector to selec the star after a checked input */
 content: "2606";


.star 
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";



.group 
 background-color: #20262e;
 line-height:30px; /* may want to match the size of the star font */
 display:flex; /* make the container flex */
 width:100%;


.group .font-weight-bold 
 flex-grow:1; /* make this label grow to fill the space the star doesn't take */

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" class="group-checkbox" id="checkbox"><!-- give this an id -->
 <label class="star" for="checkbox"><!--use a label and point it at the id of the chechbox so that you can click on it to change the status--></label>
</div>

/* seperate the checkbox and star styles */
.group-checkbox 
 display:none;

.group-checkbox:checked + .star:before /* using the adjacent sibling selector to selec the star after a checked input */
 content: "2606";


.star 
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";



.group 
 background-color: #20262e;
 line-height:30px; /* may want to match the size of the star font */
 display:flex; /* make the container flex */
 width:100%;


.group .font-weight-bold 
 flex-grow:1; /* make this label grow to fill the space the star doesn't take */

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" class="group-checkbox" id="checkbox"><!-- give this an id -->
 <label class="star" for="checkbox"><!--use a label and point it at the id of the chechbox so that you can click on it to change the status--></label>
</div>

/* seperate the checkbox and star styles */
.group-checkbox 
 display:none;

.group-checkbox:checked + .star:before /* using the adjacent sibling selector to selec the star after a checked input */
 content: "2606";


.star 
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";



.group 
 background-color: #20262e;
 line-height:30px; /* may want to match the size of the star font */
 display:flex; /* make the container flex */
 width:100%;


.group .font-weight-bold 
 flex-grow:1; /* make this label grow to fill the space the star doesn't take */

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" class="group-checkbox" id="checkbox"><!-- give this an id -->
 <label class="star" for="checkbox"><!--use a label and point it at the id of the chechbox so that you can click on it to change the status--></label>
</div>

share|improve this answer

answered yesterday

Pete

37.9k1872113

share|improve this answer

share|improve this answer

answered yesterday

Pete

37.9k1872113

answered yesterday

Pete

37.9k1872113

answered yesterday

Pete

37.9k1872113

37.9k1872113

• 
  
  
  

  
  

  
  
  
  
  
  

  
  This is also the only answer so far where the star doesn't change sizes upon clicking.
  – spacetyper
  yesterday
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  This is also the only answer so far where the star doesn't change sizes upon clicking.
  – spacetyper
  yesterday
  

  
  
  
  

This is also the only answer so far where the star doesn't change sizes upon clicking.
– spacetyper
yesterday

This is also the only answer so far where the star doesn't change sizes upon clicking.
– spacetyper
yesterday

add a comment | 

up vote
6
down vote

Please add position: relative; to .group and adjust the star position accordingly. check below:

.star 
 visibility: hidden;
 font-size: 20px;
 cursor: pointer;
 color: orange;


.star:before 
 top: -3px;
 right: 2px;
 content: "2605";
 position: absolute;
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 position: relative;
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

share|improve this answer

edited yesterday

answered yesterday

VicJordan

9,88574068

add a comment | 

up vote
6
down vote

Please add position: relative; to .group and adjust the star position accordingly. check below:

.star 
 visibility: hidden;
 font-size: 20px;
 cursor: pointer;
 color: orange;


.star:before 
 top: -3px;
 right: 2px;
 content: "2605";
 position: absolute;
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 position: relative;
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

share|improve this answer

edited yesterday

answered yesterday

VicJordan

9,88574068

add a comment | 

up vote
6
down vote

up vote
6
down vote

Please add position: relative; to .group and adjust the star position accordingly. check below:

.star 
 visibility: hidden;
 font-size: 20px;
 cursor: pointer;
 color: orange;


.star:before 
 top: -3px;
 right: 2px;
 content: "2605";
 position: absolute;
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 position: relative;
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

share|improve this answer

edited yesterday

answered yesterday

VicJordan

9,88574068

Please add position: relative; to .group and adjust the star position accordingly. check below:

.star 
 visibility: hidden;
 font-size: 20px;
 cursor: pointer;
 color: orange;


.star:before 
 top: -3px;
 right: 2px;
 content: "2605";
 position: absolute;
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 position: relative;
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

.star 
 visibility: hidden;
 font-size: 20px;
 cursor: pointer;
 color: orange;


.star:before 
 top: -3px;
 right: 2px;
 content: "2605";
 position: absolute;
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 position: relative;
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

.star 
 visibility: hidden;
 font-size: 20px;
 cursor: pointer;
 color: orange;


.star:before 
 top: -3px;
 right: 2px;
 content: "2605";
 position: absolute;
 visibility: visible;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 position: relative;
 background-color: #20262e;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

share|improve this answer

edited yesterday

answered yesterday

VicJordan

9,88574068

share|improve this answer

share|improve this answer

edited yesterday

edited yesterday

edited yesterday

answered yesterday

VicJordan

9,88574068

answered yesterday

VicJordan

9,88574068

answered yesterday

VicJordan

9,88574068

9,88574068

add a comment | 

add a comment | 

up vote
3
down vote

in your .star:before and .star:after, you need to set the position to relative

Now it let's them to be in the same position as the input that has star class itself!

Now you can align the input to be in the right place.

In that case, you can add these to your .star styles:

.star 
 position: relative;
 bottom: 12px;
 right: 15px;

And it will be what you're looking for

This is the snippet:

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;
 position: relative;
 bottom: 12px;
 right: 12px;


.star:before 
 content: "2605";
 position: relative;
 visibility: visible;
 


.star:checked:before 
 content: "2606";
 position: relative;


.group 
 background-color: #20262e;
 height: 25px;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

share|improve this answer

answered yesterday

imans77

337110

add a comment | 

up vote
3
down vote

in your .star:before and .star:after, you need to set the position to relative

Now it let's them to be in the same position as the input that has star class itself!

Now you can align the input to be in the right place.

In that case, you can add these to your .star styles:

.star 
 position: relative;
 bottom: 12px;
 right: 15px;

And it will be what you're looking for

This is the snippet:

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;
 position: relative;
 bottom: 12px;
 right: 12px;


.star:before 
 content: "2605";
 position: relative;
 visibility: visible;
 


.star:checked:before 
 content: "2606";
 position: relative;


.group 
 background-color: #20262e;
 height: 25px;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

share|improve this answer

answered yesterday

imans77

337110

add a comment | 

up vote
3
down vote

up vote
3
down vote

in your .star:before and .star:after, you need to set the position to relative

Now it let's them to be in the same position as the input that has star class itself!

Now you can align the input to be in the right place.

In that case, you can add these to your .star styles:

.star 
 position: relative;
 bottom: 12px;
 right: 15px;

And it will be what you're looking for

This is the snippet:

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;
 position: relative;
 bottom: 12px;
 right: 12px;


.star:before 
 content: "2605";
 position: relative;
 visibility: visible;
 


.star:checked:before 
 content: "2606";
 position: relative;


.group 
 background-color: #20262e;
 height: 25px;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

share|improve this answer

answered yesterday

imans77

337110

in your .star:before and .star:after, you need to set the position to relative

Now it let's them to be in the same position as the input that has star class itself!

Now you can align the input to be in the right place.

In that case, you can add these to your .star styles:

.star 
 position: relative;
 bottom: 12px;
 right: 15px;

And it will be what you're looking for

This is the snippet:

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;
 position: relative;
 bottom: 12px;
 right: 12px;


.star:before 
 content: "2605";
 position: relative;
 visibility: visible;
 


.star:checked:before 
 content: "2606";
 position: relative;


.group 
 background-color: #20262e;
 height: 25px;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;
 position: relative;
 bottom: 12px;
 right: 12px;


.star:before 
 content: "2605";
 position: relative;
 visibility: visible;
 


.star:checked:before 
 content: "2606";
 position: relative;


.group 
 background-color: #20262e;
 height: 25px;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;
 position: relative;
 bottom: 12px;
 right: 12px;


.star:before 
 content: "2605";
 position: relative;
 visibility: visible;
 


.star:checked:before 
 content: "2606";
 position: relative;


.group 
 background-color: #20262e;
 height: 25px;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

share|improve this answer

answered yesterday

imans77

337110

share|improve this answer

share|improve this answer

answered yesterday

imans77

337110

answered yesterday

imans77

337110

answered yesterday

imans77

337110

337110

add a comment | 

add a comment | 

up vote
2
down vote

I think you can just add a top attribute and clean it up with positioning and padding like below.

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;
 top: 0;
 right: 10px;


.star:checked:before 
 content: "2606";
 position: absolute;


.group
 background-color: #20262e;
 padding: 5px;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
 </div>

share|improve this answer

answered yesterday

Zaren Wienclaw

10510

add a comment | 

up vote
2
down vote

I think you can just add a top attribute and clean it up with positioning and padding like below.

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;
 top: 0;
 right: 10px;


.star:checked:before 
 content: "2606";
 position: absolute;


.group
 background-color: #20262e;
 padding: 5px;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
 </div>

share|improve this answer

answered yesterday

Zaren Wienclaw

10510

add a comment | 

up vote
2
down vote

up vote
2
down vote

I think you can just add a top attribute and clean it up with positioning and padding like below.

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;
 top: 0;
 right: 10px;


.star:checked:before 
 content: "2606";
 position: absolute;


.group
 background-color: #20262e;
 padding: 5px;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
 </div>

share|improve this answer

answered yesterday

Zaren Wienclaw

10510

I think you can just add a top attribute and clean it up with positioning and padding like below.

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;
 top: 0;
 right: 10px;


.star:checked:before 
 content: "2606";
 position: absolute;


.group
 background-color: #20262e;
 padding: 5px;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
 </div>

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;
 top: 0;
 right: 10px;


.star:checked:before 
 content: "2606";
 position: absolute;


.group
 background-color: #20262e;
 padding: 5px;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
 </div>

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;
 top: 0;
 right: 10px;


.star:checked:before 
 content: "2606";
 position: absolute;


.group
 background-color: #20262e;
 padding: 5px;

<div class="group text-truncate">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
 <input type="checkbox" style="float:right;" class="group-checkbox star">
 </div>

share|improve this answer

answered yesterday

Zaren Wienclaw

10510

share|improve this answer

share|improve this answer

answered yesterday

Zaren Wienclaw

10510

answered yesterday

Zaren Wienclaw

10510

answered yesterday

Zaren Wienclaw

10510

10510

add a comment | 

add a comment | 

up vote
2
down vote

Few minor updates to the .star and .star:before classes will fix the issue, please have a look at the below-working snippet

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;
 position: relative;
 margin: 0;
 padding: 0;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;
 top: 0;
 right: 0;
 line-height: 1;
 font-size: 20px;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 background-color: #20262e;

<div class="group text-truncate">
 <input type="checkbox" style="float:right;" class="group-checkbox star">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
</div>

share|improve this answer

answered yesterday

Girisha C

904513

add a comment | 

up vote
2
down vote

Few minor updates to the .star and .star:before classes will fix the issue, please have a look at the below-working snippet

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;
 position: relative;
 margin: 0;
 padding: 0;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;
 top: 0;
 right: 0;
 line-height: 1;
 font-size: 20px;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 background-color: #20262e;

<div class="group text-truncate">
 <input type="checkbox" style="float:right;" class="group-checkbox star">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
</div>

share|improve this answer

answered yesterday

Girisha C

904513

add a comment | 

up vote
2
down vote

up vote
2
down vote

Few minor updates to the .star and .star:before classes will fix the issue, please have a look at the below-working snippet

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;
 position: relative;
 margin: 0;
 padding: 0;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;
 top: 0;
 right: 0;
 line-height: 1;
 font-size: 20px;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 background-color: #20262e;

<div class="group text-truncate">
 <input type="checkbox" style="float:right;" class="group-checkbox star">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
</div>

share|improve this answer

answered yesterday

Girisha C

904513

Few minor updates to the .star and .star:before classes will fix the issue, please have a look at the below-working snippet

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;
 position: relative;
 margin: 0;
 padding: 0;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;
 top: 0;
 right: 0;
 line-height: 1;
 font-size: 20px;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 background-color: #20262e;

<div class="group text-truncate">
 <input type="checkbox" style="float:right;" class="group-checkbox star">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
</div>

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;
 position: relative;
 margin: 0;
 padding: 0;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;
 top: 0;
 right: 0;
 line-height: 1;
 font-size: 20px;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 background-color: #20262e;

<div class="group text-truncate">
 <input type="checkbox" style="float:right;" class="group-checkbox star">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
</div>

.star 
 visibility: hidden;
 font-size: 30px;
 cursor: pointer;
 color: orange;
 position: relative;
 margin: 0;
 padding: 0;


.star:before 
 content: "2605";
 position: absolute;
 visibility: visible;
 top: 0;
 right: 0;
 line-height: 1;
 font-size: 20px;


.star:checked:before 
 content: "2606";
 position: absolute;


.group 
 background-color: #20262e;

<div class="group text-truncate">
 <input type="checkbox" style="float:right;" class="group-checkbox star">
 <label class="font-weight-bold"> 
 <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
 <span class="align-middle" style="color: orange;">(3 items)</span>
 </label>
</div>

share|improve this answer

answered yesterday

Girisha C

904513

share|improve this answer

share|improve this answer

answered yesterday

Girisha C

904513

answered yesterday

Girisha C

904513

answered yesterday

Girisha C

904513

904513

add a comment | 

add a comment | 

 

draft saved

draft discarded

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52278140%2fcannot-add-element-in-the-same-line%23new-answer', 'question_page');

);

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Name Email

Name

Email

Name Email

Name

Email