• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 68
  • Last Modified:

Need help styling a web page

HI,
I am attaching the html files for my web page. Initially when you open it it appears crooked but just select Rich Text or Markdown from drop down then it works fine.
If you select rich text the size of the editor appears fine. This is how exactly i want to style Markdown write and preview .I need some help with styling of the screen when you select the Markdown option.
There are two issues  :
1) On write page the textarea is resizeable. I want to fix the size of this text area and match exactly like the following screenshot always :
write.png
2) The preview area i appended an html inside the div and since it was large it just crossed over other elements and a scroll bar appeared. Same thing as in write case i want the height to limit it to just above the Add comment box.
And so a scrollbar appears inside the div rather than on the page.
preview.pngPlease help me pointing out changes i need to do to achieve this.

HTML folder :
Archive.zip

Thanks
0
Rohit Bajaj
Asked:
Rohit Bajaj
  • 3
  • 2
1 Solution
 
Julian HansenCommented:
First - remove the hardcoded width and height from the <textarea> for the #write
Then add these styles

#write textarea {
  width: 100%;
  height: 297px;
  resize: none;
}
.tabcontent {
  overflow: auto;
  height: 297px;
}

Open in new window

Note the hard coded height moved to the styles above - if you want to make the areas bigger then you need to change those.

The Preview pane was overflowing for two reasons

1. Not set height
2. overflow style not set to auto (create scroll bars)
0
 
Rohit BajajAuthor Commented:
Thanks that worked.
I need to figure out some more things on this page on of them is :
If you move the cursor to Write a pointer appears but that does not happen when you go to preview.
To me it looks like all css is same for both.
0
 
Julian HansenCommented:
Spelling error
<a data-tab="preview" class="tablinks" herf="#">Preview</a>

Open in new window


herf instead of href
1
 
Rohit BajajAuthor Commented:
Hey,
I will need some more help on minor things. :
 Screen-Shot-2016-08-09-at-9.51.15-PM.pngHere you see a border is appearing inside drop down... How can i get rid of that ?
Thanks a lot.. If you feel its getting longer i can file another question...
0
 
Julian HansenCommented:
This appears to be a new question.

Please can you close this question and open another one to address this issue - you may reference this question in your new one.
0

Featured Post

[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now