[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Need help styling a web page

Posted on 2016-08-06
5
Medium Priority
?
64 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 59

Accepted Solution

by:
Julian Hansen earned 2000 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 59

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 59

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

Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

Question has a verified solution.

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

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
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…
Suggested Courses

649 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