I am wondering in MVC(ie 3) + Razor, could we make partial view have the same effect as iframe? For example right side scroll bar, fixed height, etc.
Thanks a lot!
You can make use of CSS overflow, overflow-y and overflow-x properties to achieve the points you gave examples for (right side scroll bar, fixed height), making sure to include a height style or even width if required.
.partial-view-container
{
height:400px;
overflow:scroll;
}
The possible values for the overflow properties are
visible (default)
hidden
scroll
auto
So I guess your Razor markup would look something like this
<div class="partial-view-container">
#Html.Partial("InnerPartialView")
</div>
Further explanation at css tricks or w3schools
Related
I'm using PrimeNG and p-dropdown to show a bunch of filtering options. However, in trying to make things responsive, p-dropdown seems to be fixed to a min-width of content and I can't seem to override it so that it might ellipsis the content or truncate it, etc.
This is the image before making the display narrower:
And this is what it looks like if I resize my browser...
If you notice, the cost center drop down sized to min content, but nothing smaller.
If I replace the dropdown with an input box:
I've tried a few different CSS options to no avail.
[style]="{'minWidth':'20px'}"
I have it working fine going the other way, it sizes to correctly when going wider, just not narrow.
So what did I miss?
Thanks,
Nick
I believe for this to work, you need to set the autoWidth field to be false.
For example:
<p-dropdown
[options]="cities"
[(ngModel)]="selectedCity"
optionLabel="name"
optionValue="code"
autoWidth="false"
[style]="{ minWidth: '50px', width: '50%' }">
</p-dropdown>
This gives me the following:
Stackblitz for reference
I'm having issues with my footer. It's the appropriate width and length but I can't get the text to move.
I've tried toggling with the numbers, using both negative and positive numbers with no luck. I'm using a theme created by another tumblr user, with permission to edit it to my liking, but she won't help me edit it, which is how I got here.
I'd like the text on the left side to be 20px from the left, and the text on the right to be 20px from the right. Both sets of text should be 15px from the top. (These are just guesses- once this problems solved, I'll probably toggle a bit more.)
Here's a link to the coding: http://pastebin.com/c0RdkC4W
Thank you in advance!!
OK, so you have some css being applied to the footer (I assume you are talking about the main site footer rather than the footer for each post.
You need to find the css for the #footer
And apply the following css:
#footer {
padding: 15px 20px 20px 20px;
height: 130px;
}
That is in addition to the properties already applied to that element. It's on line 231 of the full block of html you posted.
I am afraid setting the height on the footer is a hack, you would have to adjust this if you add or remove navigation items. A better solution is to use clearfix.
You also have some inline styles hard coded into the html, this is often frowned upon as it is easier to control the css using classes, id's and element selectors. But sometimes these inline styles get written to the template via the tumblr options.
See how you get on and give us a shout if you need more help.
I have two divs, neither floated, and the bottom one has a negative margin on top (pulling it upwards). That bottom div is ‘covering’ some of the links in the div underneath. I need links to work in both divs, and z-index doesn’t seem to be working at all.
Again, neither div is floated, just the bottom div pulled up a bit with a negative margin on top and it’s ‘covering’ links in the div below it.
Any thoughts? Thanks!
The site in question is here: http://dawsondental.ca (see the footer)
So, I don't believe it's actually possible to allow links in both layered divs to work. I have the divs relatively positioned so that z-index works, but regardless, layered is layered. It's not possible to have useable content in layered divs. Right? If anyone knows anything I'm missing, I'm all ears.
Thanks
Using Jquery UI's tabs I want to be able to set the tab + tab content views together to be a specific height say 500px. Since the height of the tab section varies by theme and I cannot know what height to use in px for the content view so I cannot hard code it. How do you force the whole thing to a specific height?
Thanks!
Put the entire block inside a div and apply max-height CSS property to it.
I have a div in a page (footer) and I want the following to happen with CSS:
If the page has not enough content to fill the window, the div should be at the very bottom.
If the page has enough content (and a scroll bar perhaps appears) then I want the div to be after all the content.
If I do it with position absolute etc, I can't get the second case to work.
Any ideas?
I think you're looking for 100% min-height layout. Check out this post: 100% Min Height CSS layout.
You want to use a sticky footer.
For example: http://ryanfait.com/sticky-footer/
or if you google Sticky footer you find a few alternatives