I have code as below div is draggable and Resizable using JQuery.I want the inner textare to be resized automatically based on resized div.With code below it works fine for width but it does not acquire full height of div .
<div class="dragDiv" id="dragDiv"> <textarea style="width:100%;height:100%;background-color:Transparent;font-family:Arial;font-size:11pt;border: 1px;color: white;" id="Text" name="Text"></textarea>
<br/><input type="submit" value="Mark" onclick="MarkImage()" />
</div>
Everything below the jQuery resizable div needs to have height set to -something- in CSS (or absolute positioning with top and bottom both set). e.g.:
<div class="Resizable">
<div style="height:100%">
<div style="height:100%">
<textarea></textarea>
</div>
</div>
</div>
quick demo: http://jsfiddle.net/cwolves/KkNRb/
height: 100% works only if parent has a fixed height defined in style or css.
Here, you need to calculate height with scripts and update it when parent div resizes.
You can use attribute alsoResize of JQueryUI's resizable. In my case the following code worked perfectly:
var box=$('#dragDiv');
box.resizable({alsoResize: box.find('textarea').css('resize', 'none'),
minHeight: '200',
minWidth: '400'});
Also I've disabled browser built-in resizing of texarea to prevent it from getting out of the parent div.
Related
I have a parent element that applies fxLayout="column".
Inside the parent element I have a child element that applies fxFlex="80".
In this case, fxFlex="80" affects the height of the child element not the width.
I get the expected result when changing the parent flex-layout to row.
How can I achieve the expected results with fxLayout="column" and still using this declarative style?
Can you try something like this?
<div fxLayout="row">
<div fxLayout="column" fxFlex="80">
<!-- place other elements here -->
<div>
</div>
The above answer worked for me, for my specific case I had to set the wrapping element's height and width to 100%
<div class="wrapper" fxLayout="row">
<div fxLayout="column" fxFlex="80">
<!-- place other elements here -->
<div>
</div>
// CSS
.wrapper {
width: 100%;
height: 100%;
}
the header image i have obviously wont fit to all browser width so i used following css to take auto adjust it to the browser width. however, if i dont specify the height attribute the div does not appear. specifying height as auto or % does not work either. only way it works is giving a fix px. but then that will make the whole design non responsive on small devices as the height will stay constant. please advise
<div fxLayout="column">
<app-nav-bar></app-nav-bar>
<div fxLayout="row" fxLayoutAlign="start stretch" style="background: url('../../assets/images/header1.png') no-repeat;background-size: 100%;height:300px">
</div>
</div>
Try using "background-size:cover" instead of 100%.
For those using React: the material-ui-image will automatically make the image full screen like so:
<Image style={{marginLeft: '-24px', marginRight: '-24px', marginBottom: '24px', marginTop: '-24px'}}
src={'https://images.unsplash.com/photo-1579037611768-298fcaad76e2?auto=format&fit=crop&w=1000&h=625&q=60'}
onClick={() => console.log('onClick')}
aspectRatio={(16 / 9)}
disableSpinner
/>
can you help me to fix this layout: http://imgur.com/a/kTMao
I'd like the grid will fill totally (hoizontally and vertically) its parent div without show me the outermost scrolbar(the window scollbar)
The only scrollbar that i'd like to see are the those of the grid
the page has a kendoSplitter in the middle
this is my markup
<body>
<img src="images/logo.png" />
<h1>Archivio documentale</h1>
<div id="horizontal" style="height: 100%; width: 100%">
<div id="left-pane">
<div class="pane-content" style="width:390px;">
<!-- LEFT SIDE CONTENT initial fixed width -->
</div>
</div>
<div id="main-pane">
<div class="pane-content">
<div id="mainGrid"></div>
</div>
</div>
</div>
</body>
You could use Viewports. There is vh (View Height) and vw (View Width). vh takes the height of the window dinamically, and vw takes the width of the window also dinamically.
Therefore, by applying the following:
div{
height: 100vh;
width: 100vw;
}
Your grid would always fit 100% no matter what.
Example: http://codepen.io/diego-fortes/pen/oYKpqK
I hope it helps :)
I have a link that looks like a button that needs to be at the center of the page horizontally.
This is the link:
Return to Top
I have tried:
style = "margin: 0 auto"
style = "text-align: center"
class="btn btn-info btn-xs center-block"
Nothing works. Is it because my ui-view is set like so this?
<div class="col-md-10 col-md-offset-1">
<ui-view></ui-view>
</div>
What should I do?
You can just wrap your button inside a div and add the text-center class to the div as follows:
<div class="text-center">
Return to Top
</div>
axc, Hi there. Along the line of what Imgonzalves has said.
You need to give some width to center something within.
Have a look at this Fiddle.
The top block you will see the button is centered.
Using the Bootstrap class text-center which is placed in the parent and then it will center all text within that div and ones within.
The parent has width because it uses the class col-md-10.
The second orange block in this demo shows you what you were trying to do.
Hope this shows you that you need to give a div some width to center the button within.
My application features many modals, all with different widths. I understand you can set the width of a modal inline by doing something like:
width: 400px
margin-left: -200px;
This works great, however if you compress your window in it'll kick the modal 50% of the screen, so you cannot see half of the modal rendering it useless at these small resolutions. At about the resolution of an iPad you can see this happen.
Now on to the issue, if in the main bootstrap.css file you set the width of the modal, only that one width works perfect. So if I set the width as 400 and margin-left -200, all modals will work at this width. But if I go ahead and do inline CSS on a modal and do for instance:
width: 900px
margin-left: -450px
It'll break at lower resolutions as described above.
What am I doing wrong? Does Twitter Bootstrap only offer the ability to make one modal width work at all resolutions?
I'd include screenshots, however the admins at StackOverflow apparently don't allow me to post these to help you guys.
Here's an example of one of the modals that will break at a lower resolutions because of doing the width inline:
<div id="add-edit-project-modal" class="modal hide fade" style="width: 320px; margin-left: -160px;">
<div class="add-edit-project-modal-header modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4 class="modal-title">New Project</h4>
</div>
<div class="add-edit-project-modal-body modal-body">
<form action="" id="add_project">
<label>Name</label>
</div>
<div class="add-edit-project-modal-footer modal-footer">
<input type="submit" id="submitButton" class="btn submit" value="Create">
</form>
</div>
</div>
At about the resolution of an iPad, 50% of the modal is off the screen to the left.
You could use jQuery to select the modal(s) in question and edit their CSS attributes. Using the following would set the modal to 90% of screen width and position it center of the screen:
$('#myModal').modal({
backdrop: true,
keyboard: true,
show: false
}).css({
// make width 90% of screen
'width': function () {
return ($(document).width() * .9) + 'px';
},
// center model
'margin-left': function () {
return -($(this).width() / 2);
}
});
This would work when the page loads. Resize you browser and refresh the page and the modal should be centered in the screen taking up 90% of screen width.