Solved

Need help styling a web page

Posted on 2016-08-06
5
61 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 57

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 57

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 57

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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to dynamically set the form action using jQuery.

728 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