Solved

Need help styling a web page

Posted on 2016-08-06
5
56 Views
Last Modified: 2016-08-13
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
Comment
Question by:Rohit Bajaj
  • 3
  • 2
5 Comments
 
LVL 52

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41745477
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
 

Author Comment

by:Rohit Bajaj
ID: 41745720
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
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41745954
Spelling error
<a data-tab="preview" class="tablinks" herf="#">Preview</a>

Open in new window


herf instead of href
1
 

Author Comment

by:Rohit Bajaj
ID: 41749072
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
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41749902
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now