Avatar in text area
By Fagault Eric on Thursday, 14 December 2017
Posted in General
Likes 0
Views 490
Votes 0
Hello,
I'm trying to drop the member's avatar image into the post entry textarea.
(in .../components/com_easysocial/themes/wireframe/story/default.php)

I did this:


<div class = "es-story-textbox mentions-textfield" data-story-textbox>



<! - ***** ->

<div style = "margin-bottom: 5px"> <!-- with border-radius:50% -->

<img src = "<? php echo $ user-> getAvatar (small)?>" />

</ Div>

<! - ***** ->



<div class = "mentions">

<div data-mentions-overlay data-default = "<? php echo $ this-> html ('string.escape', $ story-> overlay);?>"> <? php echo $ story-> overlay; ?> </ Div>

<textarea class = "es-story-textfield" name = "content" data-story-textField data-mentions-textarea

data-default = "<? php echo $ this-> html ('string.escape', $ story-> content);?>"

data-initial = "<? php echo ($ story-> overlay)? JString :: strlen ($ story-> overlay): '0';?>"

placeholder = "<? php echo $ nameUser; echo", ";?> <? php echo JText :: _ ('COM_EASYSOCIAL_STORY_PLACEHOLDER');?>"> <? php echo $ story-> content; ?> </ Textarea>



</ Div>

</ Div>

But I can not put the placeholder on the same line as the avatar.
(As on the Example screenshot)

How would you do it?

Best regards.

Eric
Hm, not sure if this is a good idea but you can try it, http://take.ms/PnAsI
Mark
·
Thursday, 14 December 2017 23:39
·
0 Likes
·
0 Votes
·
0 Comments
·
Thank you Mark
Fagault Eric
·
Friday, 15 December 2017 01:38
·
0 Likes
·
0 Votes
·
0 Comments
·
Fagault Eric
·
Friday, 15 December 2017 02:04
·
0 Likes
·
0 Votes
·
0 Comments
·
Fagault Eric
·
Friday, 15 December 2017 02:07
·
0 Likes
·
0 Votes
·
0 Comments
·
Good evening Mark,
Thank you for your answer.
I tried with a "float-left" but when I do that, the text superimposes the image.
In fact I display the Username followed by "Express yourself" and in the screenshot the first name (Eric) is over the image. The text is not pushed to the right of the image.


In custom.css, I modify the CSS like this:
#es .mentions textarea {
color: # 333;
font-size: 14px;
line-height: 18px;
padding: 10px 10px 0px 45px;
}


But I see that when I inspect:

#es .mentions textarea {
padding: 0! important;
margin: 0! important;

And the padding of the custom.css does not work.


When I disable the padding it works, but I do not see how to do that in the custom.css?


Best regards.
Eric
Fagault Eric
·
Friday, 15 December 2017 02:07
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Eric,

Perhaps, you can do a little tweak on your css code as below? and see how it goes?


body #es .mentions .es-story-textfield {

    color: #333;

    font-size: 14px;

    line-height: 18px;

    padding: 10px 10px 0px 45px !important;

}
Muhammad Fadhli
·
Friday, 15 December 2017 12:38
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Fadhli ,
Thank you very much.

To apply a border-radius to the photo how would you do it?

I did try that:



<div style = "margin-right: 5px; float: left; border-radius: 50%">

<img src = "<? php echo $ user-> getAvatar (small)?>" />

</ Div>


But the border-radius is not applied.
Fagault Eric
·
Friday, 15 December 2017 16:59
·
0 Likes
·
0 Votes
·
0 Comments
·
I think you could try applying the border-radius on the image.
Mark
·
Friday, 15 December 2017 23:27
·
0 Likes
·
0 Votes
·
0 Comments
·
in class .img ?
Fagault Eric
·
Sunday, 17 December 2017 22:03
·
0 Likes
·
0 Votes
·
0 Comments
·
The image tag, http://take.ms/naXqY
Mark
·
Sunday, 17 December 2017 23:02
·
0 Likes
·
0 Votes
·
0 Comments
·
Thank You very much
Fagault Eric
·
Monday, 18 December 2017 00:13
·
0 Likes
·
0 Votes
·
0 Comments
·
You are most welcome Eric
Mark
·
Monday, 18 December 2017 00:21
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post