How to Make a Button Stretch Across the Width of a Column

How to make a button stretch across the width of a column

You will have to make them block elements to be able to set a width:

.button {
    display: block;
    width: 100%;
}

How to have the button span the whole width?

Use .flex.xs12 (12 = flex-basis: 100%;)
-or-
remove xs12 (And add button block attribute = flex: 1 0 auto;).

<!-- block buttons extend the full available width -->
<template>
  <v-btn block>
    Block Button
  </v-btn>
</template>

https://vuetifyjs.com/en/components/buttons/#block

How do I make a button stretching to the entire length of the right side of a table?

Ok, so that problem is a little trickier.

<div style="position: relative;">
  <table style="">
    <tr>
      <td>asdasdasdssssssss sssssssssssss sssssssssss sssssssss sssssssssssssss sssssssss</td>
      <td>betasssssssssssssssssssssssssssss ssssssssssssssssssssssssssss ssssssssssssssss sssssssssss sssssss sssssssssssssssss s s ss s s s</td>
    </tr>
    <tr>
      <td>alpha</td>
      <td>beta</td>
    </tr>
  </table>
  <div style="position: absolute; top: 0pt; right: 0pt; bottom: 0pt;">
    <button style="height: 100%;">c</button>
  </div>
</div>

The problem with this solution is you need to give your content that sits on the right a width then add a margin to the table so that it does not hide behind the button.

There is a lot of information for you to take in over at this related question which points to some valuable resources.

Make a button fill the full width of container element?

Add the "box-sizing: border-box" property to all elements. The width and height properties include the padding and border, but not the margin. This will ensure your measurements across elements are correct and take into account the padding. display: block and width: 100% is the correct way to go full width but you need to remove the left/right margin on the button as it pushes it outside the containing element.

* {
    box-sizing: border-box
} 

.container {
    background-color: #ddd;
    padding: 10px;
    margin: 0 auto;
    max-width: 500px;
}

.button {
    background-color: #bbb;
    display: block;
    margin: 10px 0;
    padding: 10px;
    width: 100%;
}

for more information on the box-sizing property, read the MDN docs.

How to make button width match parent?

Update:

With Flutter 2.0 RaisedButton is deprecated and replaced by ElevatedButton. you can use minimumSize like this:

ElevatedButton(
        style: ElevatedButton.styleFrom(
          minimumSize: Size.fromHeight(40), // fromHeight use double.infinity as width and 40 is the height
        ),
        onPressed: () {},
        child: Text('Text Of Button'),
      )

---

Old answer for Flutter less than 2.0:

The correct solution would be to use the SizedBox.expand widget, which enforces its child to match its parent's size.

SizedBox.expand(
  child: RaisedButton(...),
)

There are many alternatives, which allows for more or less customization:

SizedBox(
  width: double.infinity,
  // height: double.infinity,
  child: RaisedButton(...),
)

or using a ConstrainedBox

ConstrainedBox(
    constraints: const BoxConstraints(minWidth: double.infinity),
    child: RaisedButton(...),
)

Why does this WPF button stretch across the window?

Regarding your annoyance at the sizing of buttons, this is something that seems to be targeted at the designer in the designer/developer workflow, while you're clearly working on the developer portion. For the sake of development, I always apply a few styles in my App.xaml to ensure somewhat better button sizing. For example, in the application tag in your app.xaml file:

<Application.Resources>
  <Style TargetType="Button">
    <Setter Property="MinWidth" Value="60" />
    <Setter Property="MinHeight" Value="23" />
    <Setter Property="Margin" Value="3" />
  </Style>
</Application.Resources>

Regarding your actual question:

The problem is that your DockPanel is stretching to the width of the text and the button will naturally expand to fill the available area. If you want the quick and dirty solution you can do something like:

<DockPanel HorizontalAlignment="Left">
    <Button x:Name="ButtonFavorite"
            DockPanel.Dock="Top"  
            Content="Customers" 
            Margin="10" 
            Width="Auto"
            MaxWidth="100"
            Click="ButtonFavorite_Click">
    </Button>
</DockPanel>

Note the MaxWidth. If you want a more composable result, isolate your button in another panel. (I'm using a stackpanel because I believe someone else already used a grid in their example):

<DockPanel HorizontalAlignment="Left">
    <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
        <Button x:Name="ButtonFavorite"
            Content="Customers" 
            Margin="10" 
            Width="Auto"
            Click="ButtonFavorite_Click" />
    </StackPanel>
    <TextBlock DockPanel.Dock="Top" Text="this is a long text which makes the button stretch across the window, if this text is just a couple words, the button will be smaller, and this drives me up the wall"  Margin="10" TextWrapping="Wrap" />
</DockPanel>

I like the StackPanel in this case because I find myself using it to create the horizontal "bar" of buttons along the bottom of a Form- err- Window in the right corner.

Make a button fill the whole width and (!) extend its container's size

Testing on Firefox 42 (which seems to be the only browser currently exhibiting this issue), my suggestion is to use min-width rather than width.

So in your example, change this declaration block should work:

div.btn1 button { min-width: 100% }

Here's an updated JSFiddle to demonstrate. Hope this helps! Let me know if you have any questions.

---

Related Topics